/* Dark Mode Styles - Universal for all themes */
/* This file can be included in any theme to add dark mode support */

/* Production Warning Banner Close Button */
.top-warning-banner {
  position: relative;
}

.top-warning-banner .banner-close {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  padding: 0 8px;
  line-height: 1;
  z-index: 10;
}

.top-warning-banner .banner-close:hover {
  color: #ffcccc;
  text-decoration: none;
}

/* Dark Mode Toggle Button Styles */
#page-header #hamburgerBar a#darkModeToggle {
  float: right;
  width: 40px !important;
  height: 40px !important;
  margin: 5px !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
  background-image: url(../img/moon.svg) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 20px !important;
  cursor: pointer !important;
  display: inline-block !important;
  border-radius: 50px !important;
}

#page-header #hamburgerBar a#darkModeToggle.dark-mode-active {
  background-image: url(../img/sun.svg) !important;
}

#page-header #hamburgerBar a#darkModeToggle:hover {
  background-color: rgba(255, 255, 255, 0.3) !important;
}

/* Login Screen Dark Mode Toggle */
.login-dark-mode-toggle {
  position: fixed;
  top: 24px;
  right: 24px;
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.9);
  background-image: url(../img/moon.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 24px;
  cursor: pointer;
  border-radius: 50px;
  z-index: 9999;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.2s;
  text-decoration: none;
}

.login-dark-mode-toggle:hover {
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transform: scale(1.05);
}

.login-dark-mode-toggle.dark-mode-active {
  background-image: url(../img/sun.svg);
  background-color: rgba(45, 45, 45, 0.9);
}

.login-dark-mode-toggle.dark-mode-active:hover {
  background-color: rgba(45, 45, 45, 1);
}

/* Dark Mode Styles - Using CSS Variables from themeBase.scss */
/* This allows customization via Theme Customizer */
body.dark-mode {
  background-color: var(--dark-background-color, #1a1a1a) !important;
  color: var(--dark-text-color, #e0e0e0) !important;
}

body.dark-mode #page-container {
  background-color: var(--dark-background-color, #1a1a1a) !important;
}

body.dark-mode #page-header {
  background-color: var(--dark-header-background-color, #2d2d2d) !important;
  border-bottom-color: var(--dark-border-color, #404040) !important;
}

body.dark-mode #page-content {
  background-color: var(--dark-background-color, #1a1a1a) !important;
  color: var(--dark-text-color, #e0e0e0) !important;
}

body.dark-mode #body {
  background-color: var(--dark-background-color, #1a1a1a) !important;
  color: var(--dark-text-color, #e0e0e0) !important;
}

body.dark-mode #content {
  background-color: var(--dark-background-color, #1a1a1a) !important;
  color: var(--dark-text-color, #e0e0e0) !important;
}

body.dark-mode #content > div {
  background-color: var(--dark-background-color, #1a1a1a) !important;
}

body.dark-mode #realbody,
body.dark-mode #realBody,
body.dark-mode .realbody {
  background: var(--dark-background-color, #1a1a1a) !important;
  background-color: var(--dark-background-color, #1a1a1a) !important;
  color: var(--dark-text-color, #e0e0e0) !important;
}

/* Override any div inside realBody */
body.dark-mode #realBody > div,
body.dark-mode #realbody > div {
  background: var(--dark-background-color, #1a1a1a) !important;
  background-color: var(--dark-background-color, #1a1a1a) !important;
  color: var(--dark-text-color, #e0e0e0) !important;
}

/* Apply light text color to common text elements inside realBody */
body.dark-mode #realBody p,
body.dark-mode #realBody span:not(.badge):not(.status):not(.tag):not(.label),
body.dark-mode #realBody td,
body.dark-mode #realBody th,
body.dark-mode #realBody li,
body.dark-mode #realBody dt,
body.dark-mode #realBody dd,
body.dark-mode #realbody p,
body.dark-mode #realbody span:not(.badge):not(.status):not(.tag):not(.label),
body.dark-mode #realbody td,
body.dark-mode #realbody th,
body.dark-mode #realbody li,
body.dark-mode #realbody dt,
body.dark-mode #realbody dd {
  color: inherit !important;
}

body.dark-mode #realBody,
body.dark-mode #realbody {
  color: #e0e0e0 !important;
}

body.dark-mode .loginContainer {
  background-color: #1a1a1a !important;
}

body.dark-mode select[readonly],
body.dark-mode input[readonly],
body.dark-mode input:disabled,
body.dark-mode select:disabled,
body.dark-mode textarea[readonly],
body.dark-mode textarea:disabled {
  background-color: var(--dark-input-readonly-background-color, #2d2d2d) !important;
  border-color: var(--dark-border-color, #404040) !important;
  color: var(--dark-input-readonly-text-color, #a0a0a0) !important;
}

/* Read-only DISPLAY fields on the Razor/Knockout detail screens (Site, Interval Meter,
   NHH Meter, Account ...) are not form controls at all. Details.cshtml renders each value
   as <label> followed by a plain <span>, and the shared theme partial (_themePost.scss)
   gives that span the very same light $input-readonly-color pill it gives a real readonly
   input - baked into all 48 generated tenant themes, same shape as the sidebar heading
   pill fixed earlier on this ticket. The rule above only reaches genuine controls, so the
   handful of fields that ARE <textarea disabled> (Address, Location, Information) went
   dark while every <span> field stayed light - which is exactly the split QA reported on
   the Site and Interval Meter screens. Matching the readonly-input treatment keeps a
   display field and its edit-mode counterpart looking the same. .mpans/.mpanTEXT are the
   MPAN boxes on the Interval Meter electricity panel, hard-coded #eef0f3 and white. */
body.dark-mode .tab-content p label + span,
body.dark-mode .tab-content p label + .text-area,
body.dark-mode .tab-content p .spanStyling,
body.dark-mode .tab-content p span + .spanList,
body.dark-mode .tab-content p .spanList,
body.dark-mode .tab-content p#twoFields span,
body.dark-mode .tab-content .mpans,
body.dark-mode .tab-content .mpanTEXT,
body.dark-mode .popup-content p label + span,
body.dark-mode .popup-content p label + .text-area,
body.dark-mode .popup-content p .spanStyling,
body.dark-mode .popup-content p span + .spanList,
body.dark-mode .popup-content p .spanList {
  background-color: var(--dark-input-readonly-background-color, #2d2d2d) !important;
  border-color: var(--dark-border-color, #404040) !important;
  color: var(--dark-input-readonly-text-color, #a0a0a0) !important;
}

body.dark-mode .main-container,
body.dark-mode .container {
  background-color: var(--dark-background-color, #1a1a1a) !important;
  color: var(--dark-text-color, #e0e0e0) !important;
}

body.dark-mode .mid {
  background-color: var(--dark-container-background-color, #252525);
  color: var(--dark-text-color, #e0e0e0);
}

body.dark-mode .mid table {
  background-color: var(--dark-container-background-color, #252525);
}

body.dark-mode .mid table th {
  background-color: var(--dark-heading-background-color, #2d2d2d);
  color: var(--dark-text-color, #e0e0e0);
}

body.dark-mode .mid table td {
  border-color: var(--dark-border-color, #404040);
  color: var(--dark-text-color, #e0e0e0);
}

body.dark-mode #body table.main tbody td,
body.dark-mode .popup-container table.main tbody td,
body.dark-mode .error-popup-content table.main tbody td,
body.dark-mode .popup table.main tbody td,
body.dark-mode .ui-datepicker table.main tbody td,
body.dark-mode .helpHome table.main tbody td,
body.dark-mode .help-content table.main tbody td,
body.dark-mode .helpFooter table.main tbody td {
  background-color: #252525 !important;
  color: #e0e0e0 !important;
  border-color: #404040 !important;
}

/* Table styles - comprehensive coverage */
body.dark-mode table {
  background-color: var(--dark-container-background-color, #252525) !important;
  color: var(--dark-text-color, #e0e0e0) !important;
}

body.dark-mode table tr {
  background-color: var(--dark-container-background-color, #252525) !important;
  color: var(--dark-text-color, #e0e0e0) !important;
}

body.dark-mode table td {
  background-color: var(--dark-container-background-color, #252525) !important;
  color: var(--dark-text-color, #e0e0e0) !important;
  border-color: var(--dark-border-color, #404040) !important;
}

body.dark-mode table th {
  background-color: var(--dark-heading-background-color, #2d2d2d) !important;
  color: var(--dark-text-color, #e0e0e0) !important;
  border-color: var(--dark-border-color, #404040) !important;
}

body.dark-mode table.main tbody td {
  background-color: var(--dark-container-background-color, #252525) !important;
  color: var(--dark-text-color, #e0e0e0) !important;
  border-color: var(--dark-border-color, #404040) !important;
}

body.dark-mode table.main tbody tr {
  background-color: var(--dark-container-background-color, #252525) !important;
  color: var(--dark-text-color, #e0e0e0) !important;
}

body.dark-mode table.main tbody tr:nth-child(even) td {
  background-color: var(--dark-heading-background-color, #2d2d2d) !important;
}

body.dark-mode table.main tbody tr:hover td {
  background-color: var(--dark-sidebar-hover-background-color, #3d3d3d) !important;
}

body.dark-mode table.main thead th,
body.dark-mode table.main th {
  background-color: var(--dark-heading-background-color, #2d2d2d) !important;
  color: var(--dark-text-color, #e0e0e0) !important;
  border-color: var(--dark-border-color, #404040) !important;
}

/* !important is load-bearing here: this file is linked BEFORE the tenant theme CSS
   (see BundleConfig.RenderTheme), so without it these rules lose the cascade to the
   theme's own input/button colours. It also feeds the WebClient's #ReactThemeBuilder
   colour probe, which reads computed button/input styles once at bundle load and
   reuses them for its inline-styled components. */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background-color: var(--dark-input-background-color, #2d2d2d) !important;
  color: var(--dark-input-text-color, #e0e0e0) !important;
  border-color: var(--dark-input-border-color, #404040) !important;
}

body.dark-mode .button,
body.dark-mode button {
  background-color: var(--dark-button-background-color, #3d3d3d) !important;
  color: var(--dark-button-text-color, #e0e0e0) !important;
  border-color: var(--dark-button-border-color, #505050) !important;
}

body.dark-mode .button:hover,
body.dark-mode button:hover {
  background-color: var(--dark-button-hover-background-color, #4d4d4d) !important;
}

/* Sidebar dark mode */
body.dark-mode .sidebar {
  background-color: rgba(0, 0, 0, 0.7) !important;
}

body.dark-mode .sidebar .sidebar_div {
  background-color: var(--dark-sidebar-background-color, #2d2d2d) !important;
}

body.dark-mode .sidebar .sidebar_div .sidebar_header {
  color: var(--dark-link-color, #6ba3e0) !important;
  border-bottom-color: var(--dark-sidebar-border-color, #404040) !important;
}

body.dark-mode .sidebar .sidebar_div .sidemenu_items p,
body.dark-mode .sidebar .sidebar_div .sidemenu_items a {
  color: var(--dark-sidebar-text-color, #e0e0e0) !important;
}

body.dark-mode .sidebar .sidebar_div .sidemenu_items p:hover,
body.dark-mode .sidebar .sidebar_div .sidemenu_items a:hover {
  background-color: var(--dark-sidebar-hover-background-color, #3d3d3d) !important;
  color: var(--dark-sidebar-active-text-color, #ffffff) !important;
}

body.dark-mode .sidebar .sidebar_div .sidemenu_items .mutli_link_dropdown.show_dropdown a {
  background-color: var(--dark-sidebar-background-color, #2d2d2d) !important;
  color: var(--dark-sidebar-text-color, #e0e0e0) !important;
}

body.dark-mode .sidebar .sidebar_div .sidemenu_items .mutli_link_dropdown.show_dropdown a:hover {
  background-color: var(--dark-sidebar-hover-background-color, #3d3d3d) !important;
  color: var(--dark-sidebar-active-text-color, #ffffff) !important;
}

/* Nested group headings (Electricity/Gas/Water, Tariff Groups, Account Groups) are <p>, not <a>,
   and the shared theme partial gives them a hard-coded light-grey pill. Without a background
   override here the pill stays light while the text above is forced near-white, so the labels
   are only legible on hover. Border keeps the heading/link hierarchy the grey pill provided. */
body.dark-mode .sidebar .sidebar_div .sidemenu_items .mutli_link_dropdown.show_dropdown p {
  background-color: var(--dark-sidebar-background-color, #2d2d2d) !important;
  color: var(--dark-sidebar-text-color, #e0e0e0) !important;
  border: 1px solid var(--dark-sidebar-border-color, #404040) !important;
}

body.dark-mode .sidebar .sidebar_div .sidemenu_items .mutli_link_dropdown.show_dropdown p:hover {
  background-color: var(--dark-sidebar-hover-background-color, #3d3d3d) !important;
  color: var(--dark-sidebar-active-text-color, #ffffff) !important;
}

body.dark-mode .sidebar_content {
  background-color: var(--dark-sidebar-background-color, #2d2d2d) !important;
  color: var(--dark-text-color, #e0e0e0) !important;
}

/* Links and text colors in dark mode */
body.dark-mode a {
  color: var(--dark-link-color, #6ba3e0) !important;
}

body.dark-mode a:hover {
  color: var(--dark-link-hover-color, #8fc4ff) !important;
}

body.dark-mode a:visited {
  color: var(--dark-link-visited-color, #9b7fd4) !important;
}

body.dark-mode table a,
body.dark-mode table.main a,
body.dark-mode .mid table a {
  color: var(--dark-link-color, #6ba3e0) !important;
}

body.dark-mode table a:hover,
body.dark-mode table.main a:hover,
body.dark-mode .mid table a:hover {
  color: var(--dark-link-hover-color, #8fc4ff) !important;
  text-decoration: underline;
}

/* Override any black text */
body.dark-mode mark {
  background: var(--dark-border-color, #666) !important;
  color: var(--dark-sidebar-active-text-color, #fff) !important;
}

body.dark-mode *[style*="color: #000"],
body.dark-mode *[style*="color: black"],
body.dark-mode *[style*="color:black"],
body.dark-mode *[style*="color:#000"] {
  color: var(--dark-text-color, #e0e0e0) !important;
}

/* Ensure all text is readable */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode p,
body.dark-mode span,
body.dark-mode div,
body.dark-mode label {
  color: inherit;
}

/* Override specific black text elements */
body.dark-mode .tab-content {
  background-color: var(--dark-container-background-color, #252525) !important;
  color: var(--dark-text-color, #e0e0e0) !important;
}

body.dark-mode div.tab-content {
  background-color: var(--dark-container-background-color, #252525) !important;
  color: var(--dark-text-color, #e0e0e0) !important;
}

body.dark-mode #content .tab-content[data-tab] {
  background-color: var(--dark-container-background-color, #252525) !important;
  color: var(--dark-text-color, #e0e0e0) !important;
}

body.dark-mode #body .tab-content,
body.dark-mode .popup-container .tab-content,
body.dark-mode .error-popup-content .tab-content,
body.dark-mode .popup .tab-content,
body.dark-mode .ui-datepicker .tab-content,
body.dark-mode .helpHome .tab-content,
body.dark-mode .help-content .tab-content,
body.dark-mode .helpFooter .tab-content {
  background-color: var(--dark-container-background-color, #252525) !important;
  color: var(--dark-text-color, #e0e0e0) !important;
}

body.dark-mode div.header,
body.dark-mode .header {
  color: var(--dark-text-color, #e0e0e0) !important;
  background-color: var(--dark-heading-background-color, #2d2d2d) !important;
}

body.dark-mode div.header::after {
  border-bottom-color: var(--dark-border-color, #606060) !important;
}

body.dark-mode .header + .tab-content {
  background-color: var(--dark-container-background-color, #252525) !important;
  color: var(--dark-text-color, #e0e0e0) !important;
}

body.dark-mode .tab-content[data-tab] {
  background-color: var(--dark-container-background-color, #252525) !important;
  color: var(--dark-text-color, #e0e0e0) !important;
}

/* Ensure data-bound links are visible */
body.dark-mode a[data-bind],
body.dark-mode a[href^="#/"] {
  color: var(--dark-link-color, #6ba3e0) !important;
}

body.dark-mode a[data-bind]:hover,
body.dark-mode a[href^="#/"]:hover {
  color: var(--dark-link-hover-color, #8fc4ff) !important;
}

/* ============================================================================
   WebClient (F# Fable/React) screens

   The WebClient ships no CSS of its own — its markup is styled by the shared
   theme SCSS, so the table/panel/input/button rules above already cover most
   of it. What it DOES do differently:

   1. It portals modals, typeahead dropdowns and tooltips OUTSIDE #mainWrapper,
      as direct children of <body> (#ReactModal, #ReactSearchList,
      #ReactTooltip). Rules scoped under #body/#content never reach those.
   2. A handful of components carry hardcoded inline colours (white popup
      surfaces, grey hint text). CSS !important beats non-!important inline
      styles, and the browser serialises hex inline values to rgb(), so the
      attribute selectors below match both spellings.
   3. Its remaining inline colours come from the #ReactThemeBuilder probe,
      which reads computed .popup-container button/input/th styles at bundle
      load — the !important input/button rules above feed it dark values.
      (Probe values are read once per page load: switching mode mid-session
      updates them on the next full page load.)
   ============================================================================ */

body.dark-mode #ReactApp,
body.dark-mode #ReactModal,
body.dark-mode #ReactSearchList,
body.dark-mode #ReactTooltip {
  color: var(--dark-text-color, #e0e0e0);
}

/* Popup chrome (shared by WebClient modals and the theme probe). */
body.dark-mode .popup-container .popup,
body.dark-mode .popup-container .popup-content {
  background-color: var(--dark-container-background-color, #252525) !important;
  color: var(--dark-text-color, #e0e0e0) !important;
  border-color: var(--dark-border-color, #404040) !important;
}

body.dark-mode .popup-container button.disabled,
body.dark-mode .popup-container button:disabled {
  background-color: var(--dark-input-readonly-background-color, #262626) !important;
  color: var(--dark-input-readonly-text-color, #8a8a8a) !important;
}

body.dark-mode .buttonbar a,
body.dark-mode #buttonbar a {
  color: var(--dark-button-text-color, #e0e0e0) !important;
}

/* Inline "background-color: white" surfaces (datepicker, combobox dropdown,
   loading/progress modals). No class hook exists, so match the style attribute. */
body.dark-mode #ReactApp [style*="background-color: white"],
body.dark-mode #ReactModal [style*="background-color: white"],
body.dark-mode #ReactSearchList [style*="background-color: white"],
body.dark-mode #ReactTooltip [style*="background-color: white"],
body.dark-mode #ReactApp [style*="background-color: rgb(255, 255, 255)"],
body.dark-mode #ReactModal [style*="background-color: rgb(255, 255, 255)"],
body.dark-mode #ReactSearchList [style*="background-color: rgb(255, 255, 255)"] {
  background-color: var(--dark-container-background-color, #252525) !important;
  color: var(--dark-text-color, #e0e0e0) !important;
}

/* Inline grey hint text (#555 / #666) and light-grey readonly panels (#f0f0f0);
   hex serialises to rgb() when set from script. */
body.dark-mode #ReactApp [style*="color: rgb(85, 85, 85)"],
body.dark-mode #ReactApp [style*="color: #555"],
body.dark-mode #ReactApp [style*="color: rgb(102, 102, 102)"],
body.dark-mode #ReactApp [style*="color: #666"] {
  color: var(--dark-input-readonly-text-color, #a0a0a0) !important;
}

body.dark-mode #ReactApp [style*="background-color: rgb(240, 240, 240)"],
body.dark-mode #ReactApp [style*="background-color: #f0f0f0"] {
  background-color: var(--dark-input-readonly-background-color, #262626) !important;
  color: var(--dark-text-color, #e0e0e0) !important;
}

/* Inline light-grey borders (#d0d6de). */
body.dark-mode #ReactApp [style*="rgb(208, 214, 222)"],
body.dark-mode #ReactApp [style*="#d0d6de"] {
  border-color: var(--dark-border-color, #404040) !important;
}

/* ============================================================================
   Help pages (apihelp.css surfaces — the standalone /help document, which links
   this stylesheet and applies body.dark-mode with its own pre-paint script)
   ============================================================================ */

body.dark-mode #helpBody,
body.dark-mode .helpHome,
body.dark-mode .content-wrapper {
  background-color: var(--dark-background-color, #1a1a1a) !important;
  color: var(--dark-text-color, #e0e0e0) !important;
}

body.dark-mode .help-content,
body.dark-mode .help-content p,
body.dark-mode .help-content li,
body.dark-mode .help-content h1,
body.dark-mode .help-content h2,
body.dark-mode .help-content h3,
body.dark-mode .help-content h4 {
  background-color: transparent !important;
  color: var(--dark-text-color, #e0e0e0) !important;
}

body.dark-mode .help-content pre,
body.dark-mode .help-content code,
body.dark-mode pre.wrapped {
  background-color: var(--dark-container-background-color, #252525) !important;
  color: var(--dark-text-color, #e0e0e0) !important;
  border-color: var(--dark-border-color, #404040) !important;
}

body.dark-mode .help-page-table td {
  background-color: var(--dark-container-background-color, #252525) !important;
  color: var(--dark-text-color, #e0e0e0) !important;
  border-color: var(--dark-border-color, #404040) !important;
}

body.dark-mode .help-page-table th {
  background-color: var(--dark-heading-background-color, #2d2d2d) !important;
  color: var(--dark-text-color, #e0e0e0) !important;
  border-color: var(--dark-border-color, #404040) !important;
}

/* Keep the warning banner amber, but dark-amber so it doesn't glow on the page. */
body.dark-mode .warning-message-container {
  background: #4a3d14 !important;
  color: #e8d9a0 !important;
}

body.dark-mode .helpFooter,
body.dark-mode .helpFooter a {
  color: var(--dark-text-color, #b0b0b0) !important;
  border-color: var(--dark-border-color, #404040) !important;
}

/* ============================================================================
   MarkdownDeep editor (mdd.css surfaces — rendered inside the SPA shell on the
   home-page edit screen, so body.dark-mode is already present)
   ============================================================================ */

body.dark-mode div.mdd_modal_frame,
body.dark-mode div.mdd_modal_content,
body.dark-mode .mdd_preview {
  background-color: var(--dark-container-background-color, #252525) !important;
  color: var(--dark-text-color, #e0e0e0) !important;
  border-color: var(--dark-border-color, #404040) !important;
}

body.dark-mode div.mdd_syntax pre {
  background-color: var(--dark-heading-background-color, #2d2d2d) !important;
  color: var(--dark-text-color, #e0e0e0) !important;
}

/* The toolbar buttons are light image sprites on a light strip; keep the strip
   neutral-dark so they stay visible without recolouring the sprites. */
body.dark-mode .mdd_toolbar {
  background-color: var(--dark-heading-background-color, #2d2d2d) !important;
  border-color: var(--dark-border-color, #404040) !important;
}

/* ============================================================================
   Charts (Highstock / Highcharts)

   The interval-meter, dashboard and target charts render through Highstock
   1.2.5, which predates styled mode: it emits no class hooks for the chart
   background, axes, grid or series (only .highcharts-container), paints every
   colour as an SVG presentation attribute from its own light defaults, and has
   no chart.update() to re-theme an existing chart in place. There is therefore
   nothing to override per element and no way to re-colour live on the toggle,
   so the rendered chart is tone-inverted as a whole instead.

   invert(0.9) rather than invert(1): it lands the chart's white background on
   #1a1a1a - the page's own dark background - instead of pure black, so the
   chart sits flush with the page. hue-rotate(180deg) puts the hues back where
   they started, so a blue trace stays blue rather than turning tan.
   Chart exports go to the export server as SVG and are unaffected.
   ============================================================================ */

body.dark-mode .highcharts-container {
  filter: invert(0.9) hue-rotate(180deg);
}

/* ============================================================================
   Autocomplete and table-filter search controls

   The picker button beside an autocomplete field paints an opaque $input-color
   tile behind a dark glyph, so in dark mode it read as a white chip on a dark
   field; the tabler filter magnifier is the theme's dark blue, near-invisible
   once the input behind it went dark. Both take the light-stroked magnifier,
   and the results dropdown (another $input-color surface) follows the panels.
   ============================================================================ */

body.dark-mode .autocomplete-arrow {
  background-color: var(--dark-input-background-color, #2d2d2d) !important;
  background-image: url(../img/search-wht.svg) !important;
  background-size: 12px 12px !important;
  background-repeat: no-repeat !important;
}

body.dark-mode .filterButton {
  background-image: url(../img/search-wht.svg) !important;
}

body.dark-mode .autocomplete-results {
  background-color: var(--dark-container-background-color, #252525) !important;
  color: var(--dark-text-color, #e0e0e0) !important;
  border-color: var(--dark-border-color, #404040) !important;
}