From 51a5268bc2453a76465be64f0e3e3cd7e1d4f9d7 Mon Sep 17 00:00:00 2001
From: Scott Pouliot <spouliot@scppowdercoating.com>
Date: Wed, 20 May 2026 21:40:44 -0400
Subject: [PATCH] Fix Log Material dropdown invisible in dark mode

Replace hardcoded #fff / #f8f9fa / #dee2e6 / #e8eeff colors with Bootstrap
CSS variables so the dropdown respects the active theme.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/PowderCoating.Web/Views/Jobs/Details.cshtml  |  2 +-
 src/PowderCoating.Web/wwwroot/js/log-material.js | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/PowderCoating.Web/Views/Jobs/Details.cshtml b/src/PowderCoating.Web/Views/Jobs/Details.cshtml
index 9334148..6b3fd55 100644
--- a/src/PowderCoating.Web/Views/Jobs/Details.cshtml
+++ b/src/PowderCoating.Web/Views/Jobs/Details.cshtml
@@ -1128,7 +1128,7 @@
                                             </button>
                                         </div>
                                         <div id="lmItemDropdown"
-                                             style="display:none;max-height:220px;overflow-y:auto;z-index:1070;background:#fff;border:1px solid rgba(0,0,0,.15);border-radius:.375rem;box-shadow:0 4px 12px rgba(0,0,0,.12);">
+                                             style="display:none;max-height:220px;overflow-y:auto;z-index:1070;background:var(--bs-body-bg);color:var(--bs-body-color);border:1px solid var(--bs-border-color);border-radius:.375rem;box-shadow:0 4px 12px rgba(0,0,0,.12);">
                                         </div>
                                     </div>
                                     <div id="lmItemBalance" class="form-text text-muted d-none"></div>
diff --git a/src/PowderCoating.Web/wwwroot/js/log-material.js b/src/PowderCoating.Web/wwwroot/js/log-material.js
index b54b86b..11afcbe 100644
--- a/src/PowderCoating.Web/wwwroot/js/log-material.js
+++ b/src/PowderCoating.Web/wwwroot/js/log-material.js
@@ -49,7 +49,7 @@
                      data-uom="${escLm(it.unitOfMeasure || '')}"
                      data-label="${escLm(label)}"
                      onmousedown="event.preventDefault(); lmComboSelect(this)"
-                     onmouseenter="this.style.background='#f0f4ff'"
+                     onmouseenter="this.style.background='var(--bs-secondary-bg)'"
                      onmouseleave="this.classList.contains('lm-active') ? null : this.style.background=''">
                 ${display}
              </div>`;
@@ -73,11 +73,11 @@
 
         let html = '';
         if (jobItems.length > 0) {
-            html += '<div class="px-3 py-1 text-muted" style="font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;background:#f8f9fa;border-bottom:1px solid #dee2e6;">This Job</div>';
+            html += '<div class="px-3 py-1 text-muted" style="font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;background:var(--bs-tertiary-bg);border-bottom:1px solid var(--bs-border-color);">This Job</div>';
             html += jobItems.map(lmMakeRow).join('');
             if (otherItems.length > 0) {
-                html += '<div style="height:1px;background:#dee2e6;margin:.25rem 0;"></div>';
-                html += '<div class="px-3 py-1 text-muted" style="font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;background:#f8f9fa;border-bottom:1px solid #dee2e6;">All Inventory</div>';
+                html += '<div style="height:1px;background:var(--bs-border-color);margin:.25rem 0;"></div>';
+                html += '<div class="px-3 py-1 text-muted" style="font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;background:var(--bs-tertiary-bg);border-bottom:1px solid var(--bs-border-color);">All Inventory</div>';
             }
         }
         html += otherItems.map(lmMakeRow).join('');
@@ -133,12 +133,12 @@
             event.preventDefault();
             idx = Math.min(idx + 1, opts.length - 1);
             opts.forEach(o => { o.classList.remove('lm-active'); o.style.background = ''; });
-            if (opts[idx]) { opts[idx].classList.add('lm-active'); opts[idx].style.background = '#e8eeff'; opts[idx].scrollIntoView({ block: 'nearest' }); }
+            if (opts[idx]) { opts[idx].classList.add('lm-active'); opts[idx].style.background = 'var(--bs-primary-bg-subtle)'; opts[idx].scrollIntoView({ block: 'nearest' }); }
         } else if (event.key === 'ArrowUp') {
             event.preventDefault();
             idx = Math.max(idx - 1, 0);
             opts.forEach(o => { o.classList.remove('lm-active'); o.style.background = ''; });
-            if (opts[idx]) { opts[idx].classList.add('lm-active'); opts[idx].style.background = '#e8eeff'; opts[idx].scrollIntoView({ block: 'nearest' }); }
+            if (opts[idx]) { opts[idx].classList.add('lm-active'); opts[idx].style.background = 'var(--bs-primary-bg-subtle)'; opts[idx].scrollIntoView({ block: 'nearest' }); }
         } else if (event.key === 'Enter') {
             event.preventDefault();
             const active = dd.querySelector('.lm-active') || opts[0];