/* XM 4 — dark appearance for shared components that ship their own light theme. Loaded on every xm-4 page; every rule
   is scoped to html[data-bs-theme="dark"], so light mode is untouched. The Workbench (lib/com/workbench/workbench.css)
   and the data explorer (lib/tag/xm/inc/dataexplorer/v29.1/main.css + _grid.cfm) carry their own generated dark maps;
   this file covers what they load from elsewhere: ParamQuery grid (bootstrap theme), pqSelect, the jQuery contextMenu,
   jQuery UI widgets, selectize, the query builder, tippy's light-border theme and jq-toast. */

/* ===================== ParamQuery grid (.pq-theme, themes/bootstrap/pqgrid.css + pqgrid.dev.css) ===================== */
html[data-bs-theme="dark"] div.pq-theme,
html[data-bs-theme="dark"] .pq-theme .ui-widget-content {color:var(--xm4-text); background:var(--xm4-surface); border-color:var(--xm4-line)!important;}
html[data-bs-theme="dark"] .pq-theme .ui-widget-header {background:var(--xm4-soft); background-image:none; color:var(--xm4-text); border-color:var(--xm4-line);}
html[data-bs-theme="dark"] .pq-theme .ui-state-default,
html[data-bs-theme="dark"] .pq-theme .ui-button,
html[data-bs-theme="dark"] .pq-theme button.ui-state-default:not(.ui-state-hover) {background:var(--xm4-soft); background-image:none; color:var(--xm4-text); border-color:var(--xm4-line);}
html[data-bs-theme="dark"] .pq-theme .ui-state-default a, html[data-bs-theme="dark"] .pq-theme .ui-button .ui-button-text {color:var(--xm4-text);}
html[data-bs-theme="dark"] .pq-theme .ui-state-hover,
html[data-bs-theme="dark"] .pq-theme .ui-state-focus,
html[data-bs-theme="dark"] .pq-theme .ui-button:hover {background:var(--xm4-line-2); color:var(--xm4-text); border-color:var(--xm4-faint);}
html[data-bs-theme="dark"] .pq-theme .ui-state-active:not(.ui-tabs-active) {background:var(--xm4-tint); color:var(--xm4-accent); border-color:var(--xm4-accent);}
html[data-bs-theme="dark"] .pq-theme .ui-state-active a {color:var(--xm4-accent);}
html[data-bs-theme="dark"] .pq-theme li.ui-tabs-active.ui-state-active.ui-state-default {border-bottom-color:var(--xm4-accent);}
html[data-bs-theme="dark"] .pq-theme .ui-icon {filter:invert(.85) hue-rotate(180deg);}
html[data-bs-theme="dark"] .pq-theme *:focus {outline-color:var(--xm4-accent);}
html[data-bs-theme="dark"] .pq-theme select,
html[data-bs-theme="dark"] .pq-theme input,
html[data-bs-theme="dark"] .pq-theme textarea {background:var(--xm4-surface); color:var(--xm4-text); border-color:var(--xm4-line);}
html[data-bs-theme="dark"] .pq-theme > .pq-grid-top,
html[data-bs-theme="dark"] .pq-grid-bottom,
html[data-bs-theme="dark"] .pq-grid-title,
html[data-bs-theme="dark"] .pq-group-header,
html[data-bs-theme="dark"] div.pq-toolbar,
html[data-bs-theme="dark"] div.pq-pager,
html[data-bs-theme="dark"] div.pq-grid-summary,
html[data-bs-theme="dark"] .pq-grid-center > .pq-summary-outer,
html[data-bs-theme="dark"] .pq-body-outer {color:var(--xm4-text); background:var(--xm4-surface); border-color:var(--xm4-line);}
html[data-bs-theme="dark"] .pq-header-outer,
html[data-bs-theme="dark"] .pq-header-outer .pq-cont-inner {background:var(--xm4-soft); background-image:none; border-bottom-color:var(--xm4-line);}
html[data-bs-theme="dark"] .pq-grid-col,
html[data-bs-theme="dark"] .pq-grid-number-col {color:var(--xm4-ink-2); border-color:var(--xm4-line);}
html[data-bs-theme="dark"] .pq-grid-col:hover {background:var(--xm4-line-2);}
html[data-bs-theme="dark"] .pq-col-sort-asc,
html[data-bs-theme="dark"] .pq-col-sort-desc {background:var(--xm4-line); color:var(--xm4-text); border-color:var(--xm4-faint);}
html[data-bs-theme="dark"] .pq-grid-row {background:var(--xm4-surface); color:var(--xm4-text); border-color:var(--xm4-line-2);}
html[data-bs-theme="dark"] .pq-grid-cell,
html[data-bs-theme="dark"] .pq-td-border-right > .pq-grid-row > .pq-grid-cell:not(.pq-focus),
html[data-bs-theme="dark"] .pq-td-border-top > .pq-grid-row > .pq-grid-cell:not(.pq-focus),
html[data-bs-theme="dark"] .pq-cont-inner > .pq-td-border-top > .pq-grid-row,
html[data-bs-theme="dark"] .pq-grid-row > .pq-grid-number-cell {border-color:var(--xm4-line-2);}
html[data-bs-theme="dark"] .pq-grid-row.pq-striped {background:color-mix(in srgb,var(--xm4-surface) 65%,var(--xm4-soft));}
html[data-bs-theme="dark"] .pq-grid-row-hover.ui-state-hover,
html[data-bs-theme="dark"] .pq-grid-cell-hover.ui-state-hover,
html[data-bs-theme="dark"] .pq-grid-row-hover.pq-striped,
html[data-bs-theme="dark"] .pq-striped > .pq-grid-cell-hover {background:var(--xm4-soft); color:var(--xm4-text);}
html[data-bs-theme="dark"] .pq-state-select.ui-state-highlight,
html[data-bs-theme="dark"] .pq-state-select.pq-striped,
html[data-bs-theme="dark"] .pq-theme .pq-state-highlight {background:var(--xm4-tint); color:var(--xm4-text); border-color:var(--xm4-line); background-image:none!important;}
/* The data explorer's inline <style> (_grid.cfm) sets .pq-state-select {background:#fff0c3!important}, which beat the rule
   above: checked rows showed light text on pale yellow. They keep the yellow meaning here as a dark amber. */
html[data-bs-theme="dark"] .pq-grid-row.pq-state-select {background:color-mix(in srgb,var(--xm4-warning) 20%,var(--xm4-surface))!important; color:var(--xm4-text);}
html[data-bs-theme="dark"] .pq-grid-row > .pq-grid-cell.pq-focus,
html[data-bs-theme="dark"] .pq-grid-row > .pq-grid-col.pq-focus {border-color:var(--xm4-accent);}
html[data-bs-theme="dark"] .pq-body-outer .pq-grid-number-cell,
html[data-bs-theme="dark"] .pq-summary-outer .pq-grid-number-cell,
html[data-bs-theme="dark"] .pq-loading-bg,
html[data-bs-theme="dark"] .pq-loading > .pq-loading-mask,
html[data-bs-theme="dark"] div.pq-loading-mask > div,
html[data-bs-theme="dark"] .pq-pivot-pane .pq-sortable,
html[data-bs-theme="dark"] .pq-bg-3 {background:var(--xm4-surface); color:var(--xm4-text); border-color:var(--xm4-line);}
html[data-bs-theme="dark"] .pq-cont-lt, html[data-bs-theme="dark"] .pq-cont-tr, html[data-bs-theme="dark"] .pq-body-outer .pq-cont-left,
html[data-bs-theme="dark"] .pqg-vert-frozen-line, html[data-bs-theme="dark"] .pqg-horiz-frozen-line,
html[data-bs-theme="dark"] .pq-group-item, html[data-bs-theme="dark"] .pq-group-item:hover,
html[data-bs-theme="dark"] .pq-border-0, html[data-bs-theme="dark"] .pq-border-1, html[data-bs-theme="dark"] .pq-border-2 {border-color:var(--xm4-line)!important;}
html[data-bs-theme="dark"] .pq-theme span.pq-separator {border-right-color:var(--xm4-surface); border-left-color:var(--xm4-line);}
html[data-bs-theme="dark"] .pq-bg-0, html[data-bs-theme="dark"] .pq-bg-1 {background-color:var(--xm4-faint);}
html[data-bs-theme="dark"] .pq-bg-2 {background-color:var(--xm4-line);}
html[data-bs-theme="dark"] .pq-grid-summary-table div {background:var(--xm4-soft);}
/* popups, menus, filter and tab strips from pqgrid.dev.css */
html[data-bs-theme="dark"] .pq-popup,
html[data-bs-theme="dark"] .pq-intel,
html[data-bs-theme="dark"] .pq-filter-menu,
html[data-bs-theme="dark"] .pq-cmenu-item,
html[data-bs-theme="dark"] .pq-tab-item:not(.pq-active) {background:var(--xm4-surface); color:var(--xm4-text); border-color:var(--xm4-line); box-shadow:var(--xm4-shadow-lg);}
html[data-bs-theme="dark"] .pq-cmenu-item:hover:not(.pq_disabled) {background:var(--xm4-tint); color:var(--xm4-accent);}
html[data-bs-theme="dark"] .pq-cmenu-item.pq_disabled, html[data-bs-theme="dark"] .pq-theme .pq-dnd-drag {color:var(--xm4-faint);}
html[data-bs-theme="dark"] .pq-editor-inner > .pq-cell-editor, html[data-bs-theme="dark"] div.pq-editor-inner > .pq-cell-editor {background:var(--xm4-surface); color:var(--xm4-text); border-color:var(--xm4-accent);}
html[data-bs-theme="dark"] .pq-select-menu, html[data-bs-theme="dark"] .pq-select-button, html[data-bs-theme="dark"] .pq-select-item {background:var(--xm4-surface); color:var(--xm4-text); border-color:var(--xm4-line);}
html[data-bs-theme="dark"] .pq-select-item.pq-select-item-hover, html[data-bs-theme="dark"] .pq-select-item:hover {background:var(--xm4-tint); color:var(--xm4-accent);}

/* ===================== jQuery contextMenu (grid right-click), jQuery UI menus and dialogs ===================== */
html[data-bs-theme="dark"] .context-menu-list {background:var(--xm4-surface); border-color:var(--xm4-line); box-shadow:var(--xm4-shadow-lg);}
html[data-bs-theme="dark"] .context-menu-item {background:transparent; color:var(--xm4-text);}
html[data-bs-theme="dark"] .context-menu-item.context-menu-hover {background:var(--xm4-tint); color:var(--xm4-accent);}
html[data-bs-theme="dark"] .context-menu-item.context-menu-disabled {color:var(--xm4-faint); background:transparent;}
html[data-bs-theme="dark"] .context-menu-separator {border-bottom-color:var(--xm4-line);}
html[data-bs-theme="dark"] .context-menu-submenu:after {border-left-color:var(--xm4-muted);}
html[data-bs-theme="dark"] .xm4 .ui-widget-content,
html[data-bs-theme="dark"] .xm4 .ui-menu,
html[data-bs-theme="dark"] .xm4 .ui-dialog,
html[data-bs-theme="dark"] .xm4 .ui-autocomplete,
html[data-bs-theme="dark"] .xm4 .ui-datepicker {background:var(--xm4-surface); color:var(--xm4-text); border-color:var(--xm4-line);}
html[data-bs-theme="dark"] .xm4 .ui-widget-header {background:var(--xm4-soft); background-image:none; color:var(--xm4-text); border-color:var(--xm4-line);}
html[data-bs-theme="dark"] .xm4 .ui-widget-content a, html[data-bs-theme="dark"] .xm4 .ui-widget-header a {color:var(--xm4-text);}
html[data-bs-theme="dark"] .xm4 .ui-state-default, html[data-bs-theme="dark"] .xm4 .ui-widget-content .ui-state-default, html[data-bs-theme="dark"] .xm4 .ui-widget-header .ui-state-default {background:var(--xm4-soft); background-image:none; color:var(--xm4-text); border-color:var(--xm4-line);}
html[data-bs-theme="dark"] .xm4 .ui-state-hover, html[data-bs-theme="dark"] .xm4 .ui-widget-content .ui-state-hover, html[data-bs-theme="dark"] .xm4 .ui-state-focus, html[data-bs-theme="dark"] .xm4 .ui-widget-content .ui-state-focus {background:var(--xm4-line-2); background-image:none; color:var(--xm4-text); border-color:var(--xm4-faint);}
html[data-bs-theme="dark"] .xm4 .ui-state-active, html[data-bs-theme="dark"] .xm4 .ui-widget-content .ui-state-active, html[data-bs-theme="dark"] .xm4 .ui-menu .ui-menu-item-wrapper.ui-state-active {background:var(--xm4-tint); background-image:none; color:var(--xm4-accent); border-color:var(--xm4-accent);}
html[data-bs-theme="dark"] .xm4 .ui-menu .ui-menu-item:not(:last-child) {border-bottom-color:var(--xm4-line-2);}
html[data-bs-theme="dark"] .xm4 .ui-widget-overlay {background:#07122799;}

/* ===================== selectize, query builder, tippy light-border, jq-toast ===================== */
html[data-bs-theme="dark"] .xm4 .selectize-input, html[data-bs-theme="dark"] .xm4 .selectize-control.single .selectize-input,
html[data-bs-theme="dark"] .xm4 .selectize-dropdown, html[data-bs-theme="dark"] .xm4 .selectize-dropdown.form-control {background:var(--xm4-surface); color:var(--xm4-text); border-color:var(--xm4-line); box-shadow:none;}
html[data-bs-theme="dark"] .xm4 .selectize-input input, html[data-bs-theme="dark"] .xm4 .selectize-input > div {color:var(--xm4-text); background:transparent;}
html[data-bs-theme="dark"] .xm4 .selectize-control.multi .selectize-input > div {background:var(--xm4-soft); border-color:var(--xm4-line); color:var(--xm4-text);}
html[data-bs-theme="dark"] .xm4 .selectize-dropdown .option.active, html[data-bs-theme="dark"] .xm4 .selectize-dropdown .active {background:var(--xm4-tint); color:var(--xm4-accent);}
html[data-bs-theme="dark"] .xm4 .selectize-dropdown .optgroup-header {background:var(--xm4-soft); color:var(--xm4-muted);}
html[data-bs-theme="dark"] .xm4 .query-builder .rules-group-container {background:var(--xm4-soft); border-color:var(--xm4-line);}
html[data-bs-theme="dark"] .xm4 .query-builder .rule-container, html[data-bs-theme="dark"] .xm4 .query-builder .rule-placeholder {background:var(--xm4-surface); border-color:var(--xm4-line); color:var(--xm4-text);}
html[data-bs-theme="dark"] .xm4 .query-builder .rules-list > ::before, html[data-bs-theme="dark"] .xm4 .query-builder .rules-list > ::after {border-color:var(--xm4-line);}
html[data-bs-theme="dark"] .tippy-box[data-theme~="light-border"] {background:var(--xm4-surface); color:var(--xm4-text); border-color:var(--xm4-line); box-shadow:var(--xm4-shadow-lg);}
html[data-bs-theme="dark"] .tippy-box[data-theme~="light-border"] > .tippy-backdrop {background:var(--xm4-surface);}
html[data-bs-theme="dark"] .tippy-box[data-theme~="light-border"] > .tippy-arrow::before, html[data-bs-theme="dark"] .tippy-box[data-theme~="light-border"] > .tippy-arrow::after {color:var(--xm4-surface); border-color:var(--xm4-surface);}
html[data-bs-theme="dark"] .tippy-box[data-theme~="light"] {background:var(--xm4-surface); color:var(--xm4-text); box-shadow:var(--xm4-shadow-lg);}
html[data-bs-theme="dark"] .tippy-box[data-theme~="light"] > .tippy-arrow::before {color:var(--xm4-surface);}
html[data-bs-theme="dark"] .xm4 .jq-toast-single {background:var(--xm4-soft); color:var(--xm4-text); border:1px solid var(--xm4-line);}
html[data-bs-theme="dark"] .xm4 .jq-toast-single a {color:var(--xm4-accent);}

/* ===================== FusionCharts ===================== */
/* MR/Claude 10/16/2026: js/charts-appearance.js recolours each chart's own drawing (background, text, grid, tooltip). These cover what
   FusionCharts paints around it: the container's default white (containerBackgroundColor, separate from the chart's bgColor, set inline
   on the <svg>) and the export menu, whose colours are inline styles. The tooltip (.fc__tooltip) already takes the chart's dark colours. */
html[data-bs-theme="dark"] .fusioncharts-container > svg {background-color:transparent!important;}
html[data-bs-theme="dark"] .fusioncharts-container > div:not(.fc__tooltip) {background:var(--xm4-surface)!important; border-color:var(--xm4-line)!important; box-shadow:var(--xm4-shadow-lg)!important;}
html[data-bs-theme="dark"] .fusioncharts-container > div:not(.fc__tooltip) div,
html[data-bs-theme="dark"] .fusioncharts-container > div:not(.fc__tooltip) span {background:transparent!important; color:var(--xm4-text)!important;}
html[data-bs-theme="dark"] .fusioncharts-container > div:not(.fc__tooltip) div:hover > span {background:var(--xm4-tint)!important; color:var(--xm4-accent)!important;}

/* MR/Claude 10/16/2026: theme.css highlights the select2 option under the pointer with the accent and white text; the dark accent is a light
   blue, so that was about 2:1. Dark text on it, as .xm-btn does in dark. */
html[data-bs-theme="dark"] .xm4 .select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {color:var(--xm4-bg);}

/* MR/Claude 10/16/2026: print stays light. theme.css prints the page white with black text, but in dark appearance the tokens
   stayed dark, so every dark rule that uses them (page dark blocks, generated block twins) printed light text on white paper.
   In print the dark tokens take their light values (same as theme.css :root). */
@media print {
  html[data-bs-theme="dark"] {
    --xm4-bg:#ffffff; --xm4-surface:#ffffff; --xm4-soft:#f1f4f9; --xm4-text:#0f172a; --xm4-ink-2:#334155;
    --xm4-muted:#64748b; --xm4-faint:#94a3b8; --xm4-line:#e2e8f0; --xm4-line-2:#eef2f7;
    --xm4-accent:#2563eb; --xm4-accent-dark:#1d4ed8; --xm4-tint:#eaf1ff; --xm4-danger:#dc2626; --xm4-success:#16a34a; --xm4-warning:#d97706;
    color-scheme: light;
  }
}

/* MR/Claude 10/18/2026: read-only choice values (multi-selects, tag lists) render as .xmTokenList > .xmTokenItem, styled by
   xm-3's main.css in the legacy layer (#ddd chip, #333 text). forms.css styles .xmTokenListItem, the edit-form class, so on a
   dark record detail page the chips stayed light grey inside the dark field box. Pills that carry their own inline
   background (choice colours) keep it. */
html[data-bs-theme="dark"] .xmTokenList .xmTokenItem {background:var(--xm4-soft); color:var(--xm4-text); border-color:var(--xm4-line);}
html[data-bs-theme="dark"] .xmTokenPill:not([style*="background"]) {background:var(--xm4-soft); color:var(--xm4-text);}

/* MR/Claude 10/18/2026: record pages in dark, the Notes and Metrics tabs.
   - The Notes search bar is painted white inline (lib/inc/mini_module/_notes.cfm, #NotesSearchBar style="...background:white").
   - Change diffs in notes use xm-3 main.css's spans: lime #9fe101 behind white text, and dark red #c00000.
   - FusionTime charts (type timeseries: the record Metrics timeline) ignore the chart-level bgcolor that charts-appearance.js
     rewrites and paint their background, navigator, grid lines and axis text as SVG attributes. CSS outranks SVG presentation
     attributes, and :has(g[class*="-timenav-"]) keeps these rules to time-series charts. */
html[data-bs-theme="dark"] #NotesSearchBar {background:var(--xm4-surface)!important; border-color:var(--xm4-line)!important;}
html[data-bs-theme="dark"] span.diff-html-added {background-color:color-mix(in srgb, var(--xm4-success) 22%, transparent); color:var(--xm4-success);}
html[data-bs-theme="dark"] span.diff-html-removed {color:var(--xm4-danger);}
html[data-bs-theme="dark"] .fusioncharts-container:has(g[class*="-timenav-"]) rect[fill="#ffffff" i] {fill:var(--xm4-surface);}
html[data-bs-theme="dark"] .fusioncharts-container:has(g[class*="-timenav-"]) :is(rect[fill="#ebebeb" i], rect[fill="#eeeeee" i]) {fill:var(--xm4-soft);}
html[data-bs-theme="dark"] .fusioncharts-container:has(g[class*="-timenav-"]) :is(rect[stroke="#eeeeee" i], rect[stroke="#dfdfdf" i], path[stroke="#dfdfdf" i], path[stroke="#e3e3e3" i]) {stroke:var(--xm4-line);}
html[data-bs-theme="dark"] .fusioncharts-container:has(g[class*="-timenav-"]) :is(text[fill="#858585" i], text[fill="#9a9a9a" i], text[fill="#999999" i], text[fill="#7c7c7c" i]) {fill:var(--xm4-muted);}
html[data-bs-theme="dark"] .fusioncharts-container:has(g[class*="-timenav-"]) :is(text[fill="#5648d4" i], path[fill="#5648d4" i]) {fill:#a5a0f0;}

/* MR/Claude 10/18/2026: record detail, Accordion layout (lib/inc/mini_module/_accordion.cfm and _modular.cfm). The headers are
   <details><summary> styled by xm-3's main.css (#fefefe, open #DDF3FE, nested #e0e0e0/#efefef, label #fcfcfc). The count badge
   comes from the pages' own <style>. Each header's bottom border is the section colour (var(--data-bgcolor)), so only the top
   border is recoloured. A section's table and the default choice chips are painted inline (background:#ffffff, and
   background:#dddddd;color:#000000), which only an !important attribute rule can reach; chips in a choice colour keep it. */
html[data-bs-theme="dark"] .xmAccordionDetail details {border-color:var(--xm4-line);}
html[data-bs-theme="dark"] .xmAccordionDetail details > summary {color:var(--xm4-text); background:var(--xm4-surface); border-top-color:var(--xm4-line);}
html[data-bs-theme="dark"] .xmAccordionDetail details > summary label {color:var(--xm4-muted); background:var(--xm4-soft); border-color:var(--xm4-line);}
html[data-bs-theme="dark"] .xmAccordionDetail details > summary:after {color:var(--xm4-muted);}
html[data-bs-theme="dark"] .xmAccordionDetail details[open] > summary {color:var(--xm4-text); background:var(--xm4-tint);}
html[data-bs-theme="dark"] .xmAccordionDetail details[open] > div > details[open] > summary {background:var(--xm4-soft);}
html[data-bs-theme="dark"] .xmAccordionDetail details[open] > div > details[open] > div > details[open] > summary {background:var(--xm4-line-2);}
html[data-bs-theme="dark"] .xmAccordionDetail details .label-num {border-color:var(--xm4-line); color:#1b2536;}
html[data-bs-theme="dark"] .xmAccordionDetail details[open] .label-num {background:var(--xm4-soft); color:var(--xm4-ink-2);}
html[data-bs-theme="dark"] .xmAccordionDetail table[style*="background:#ffffff" i] {background:var(--xm4-surface)!important;}
/* MR/Claude 10/18/2026: the same inline white also comes as the word: style="background:white" on the accordion's function
   sections (Files, _accordion.cfm), modular layouts, matrix fields (formfield.cfm), What's New and older list pages. Any table
   painted white inline is a light block in dark, wherever it sits. */
html[data-bs-theme="dark"] table:is([style*="background:white" i], [style*="background: white" i], [style*="background-color:white" i], [style*="background-color: white" i]) {background:var(--xm4-surface)!important;}
html[data-bs-theme="dark"] .xmTokenList .xmTokenItem[style*="background:#dddddd" i] {background:var(--xm4-soft)!important; color:var(--xm4-text)!important;}

/* MR/Claude 10/18/2026: MapLibre GL (the Online Users map on the operations dashboard, and any other MapLibre map). Its own CSS
   paints popups, popup tips, control groups and the attribution bar white with dark SVG icons, so in dark the popup's text (which
   follows the theme) and the dashboard's "Fit all markers" button (a Font Awesome glyph that inherits the text colour) vanished
   on white. Dark surface; the SVG icons are inverted. */
html[data-bs-theme="dark"] .maplibregl-popup-content {background:var(--xm4-surface); color:var(--xm4-text); box-shadow:0 10px 28px rgba(0,0,0,.5); border:1px solid var(--xm4-line);}
html[data-bs-theme="dark"] .maplibregl-popup-anchor-bottom .maplibregl-popup-tip, html[data-bs-theme="dark"] .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip, html[data-bs-theme="dark"] .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {border-top-color:var(--xm4-surface);}
html[data-bs-theme="dark"] .maplibregl-popup-anchor-top .maplibregl-popup-tip, html[data-bs-theme="dark"] .maplibregl-popup-anchor-top-left .maplibregl-popup-tip, html[data-bs-theme="dark"] .maplibregl-popup-anchor-top-right .maplibregl-popup-tip {border-bottom-color:var(--xm4-surface);}
html[data-bs-theme="dark"] .maplibregl-popup-anchor-left .maplibregl-popup-tip {border-right-color:var(--xm4-surface);}
html[data-bs-theme="dark"] .maplibregl-popup-anchor-right .maplibregl-popup-tip {border-left-color:var(--xm4-surface);}
html[data-bs-theme="dark"] .maplibregl-popup-close-button {color:var(--xm4-muted);}
html[data-bs-theme="dark"] .maplibregl-popup-close-button:hover {background:var(--xm4-soft); color:var(--xm4-text);}
html[data-bs-theme="dark"] .maplibregl-ctrl-group {background:var(--xm4-surface); box-shadow:0 0 0 1px var(--xm4-line);}
html[data-bs-theme="dark"] .maplibregl-ctrl-group button {color:var(--xm4-text);}
html[data-bs-theme="dark"] .maplibregl-ctrl-group button + button {border-top-color:var(--xm4-line);}
html[data-bs-theme="dark"] .maplibregl-ctrl-group button:not(:disabled):hover {background-color:var(--xm4-soft);}
html[data-bs-theme="dark"] .maplibregl-ctrl button > .maplibregl-ctrl-icon, html[data-bs-theme="dark"] .maplibregl-ctrl-attrib-button {filter:invert(1) hue-rotate(180deg);}
html[data-bs-theme="dark"] .maplibregl-ctrl.maplibregl-ctrl-attrib {background:color-mix(in srgb, var(--xm4-surface) 85%, transparent); color:var(--xm4-muted);}
html[data-bs-theme="dark"] .maplibregl-ctrl-attrib.maplibregl-compact {background:var(--xm4-surface);}
html[data-bs-theme="dark"] .maplibregl-ctrl-attrib a {color:var(--xm4-muted);}

/* MR/Claude 10/18/2026: signatures and initials in dark (member detail, record detail, forms). A signature renders as
   <img class="sigImg"> (lib/udf/standard.cfc DisplayJSONSignature): black ink on a transparent PNG, which xm-3's main.css sets
   on a white box with a #dadada border, a bright block on a dark page. Dark drops the white and inverts the image so the ink
   reads light. The filter inverts the border too, so its colour is the inverse of --xm4-line (#2b3a50 -> #d4c5af).
   Initials (.initials, same file) paint a yellow chip and inherit the text colour, which is light in dark: pin dark ink. */
html[data-bs-theme="dark"] .sigImg {background:transparent; border-color:#d4c5af; filter:invert(1);}
html[data-bs-theme="dark"] .initials {color:#1f2937;}

/* MR/Claude 10/27/2026: the site's Page Bottom box (Admin > Settings > Page Bottom, printed by _page_footer.cfm). Portals wrap
   their accessibility statement in <div class="accessibility-pod" style="...background:white;border:1px solid #dadada">; the
   text has no colour of its own, so in dark it inherited light text on that white (Trust Central / miami-samis). Dark surface
   here, so no portal has to edit its Settings HTML. */
html[data-bs-theme="dark"] .accessibility-pod {background:var(--xm4-surface)!important; border-color:var(--xm4-line)!important; color:var(--xm4-text);}

/* MR/Claude 10/27/2026: the duration field (lib/tag/xm/duration.cfm, e.g. Estimated Hours / Time Spent on support tickets)
   paints its box #fff with #e5e5e5 dividers and #999 labels in its own <style>. The coloured primary/success variants keep
   their borders (:where keeps this rule weaker than :focus-within). */
html[data-bs-theme="dark"] .xm-duration-wrapper {background:var(--xm4-surface);}
html[data-bs-theme="dark"] .xm-duration-wrapper:where(:not(.xm-duration-primary, .xm-duration-success)) {border-color:var(--xm4-line);}
html[data-bs-theme="dark"] .xm-duration-wrapper:focus-within {border-color:var(--xm4-accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--xm4-accent) 25%,transparent);}
html[data-bs-theme="dark"] .xm-duration-group {border-right-color:var(--xm4-line);}
html[data-bs-theme="dark"] .xm-duration-group:hover {background:var(--xm4-soft);}
html[data-bs-theme="dark"] .xm-duration-group input[type="number"] {color:var(--xm4-text);}
html[data-bs-theme="dark"] .xm-duration-group .xm-duration-label,
html[data-bs-theme="dark"] .xm-duration-total,
html[data-bs-theme="dark"] .xm-duration-total i {color:var(--xm4-muted);}
html[data-bs-theme="dark"] .xm-duration-total {background:var(--xm4-soft); border-left-color:var(--xm4-line);}

/* MR/Claude 10/27/2026: the upload field's "Choose File" button (<input type=button class="xmFilePicker">, added by
   lib/plupload/setup.js) is painted #f5f5f5 by formfield.cfm's inline <style>, so its light theme text vanished in dark. Same
   look as the ≡ menu button beside it (forms.css .xmUploadMenuDrop). */
html[data-bs-theme="dark"] .xmFilePicker {background:var(--xm4-surface); border-color:var(--xm4-line); color:var(--xm4-text);}
html[data-bs-theme="dark"] .xmFilePicker:hover {background:var(--xm4-tint); border-color:var(--xm4-accent); color:var(--xm4-accent);}

/* MR/Claude 10/28/2026: the JSON editor field (xm:formfield type="jsoneditor", e.g. a function's Code on Site Admin > Functions)
   paints its cards #fefefe and its list headings #f6fbff in formfield.cfm's inline <style>, and json-editor wraps each object in
   Bootstrap 5's .bg-light, which stays light in dark (a utility with !important). The labels already turn light, so they
   vanished on that white. Cards alternate surface/soft like the light white/grey nesting. */
html[data-bs-theme="dark"] .jsonEditorCanvas .xm-card {background:var(--xm4-surface); border-color:var(--xm4-line);}
html[data-bs-theme="dark"] .jsonEditorCanvas .bg-light {background-color:var(--xm4-soft)!important;}
html[data-bs-theme="dark"] .jsonEditorCanvas .row h3 {background:var(--xm4-tint); border-bottom-color:var(--xm4-line);}
html[data-bs-theme="dark"] .jsonEditorCanvas input[type="color"],
html[data-bs-theme="dark"] .jsonEditorCanvas input[type="color"].form-control {border-color:var(--xm4-line)!important;}

/* MR/Claude 10/28/2026: tag-it chips (Tags fields): forms.css gives the chip a dark fill, but lib/jquery/tag-it/jquery.tagit.css
   keeps the label #555, the × #777 and a #bbcef1 hover, so the tag names read grey on dark. */
html[data-bs-theme="dark"] ul.tagit li.tagit-choice .tagit-label:not(a) {color:var(--xm4-text);}
html[data-bs-theme="dark"] ul.tagit li.tagit-choice .tagit-close .text-icon {color:var(--xm4-muted);}
html[data-bs-theme="dark"] ul.tagit li.tagit-choice a.tagit-close .text-icon:hover {color:var(--xm4-text);}
html[data-bs-theme="dark"] ul.tagit li.tagit-choice:hover,
html[data-bs-theme="dark"] ul.tagit li.tagit-choice.remove {background-color:var(--xm4-tint); border-color:var(--xm4-accent);}