/* 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;}