From 72e7067b172a7cbe9b14a252b35ed181ea64aa6d Mon Sep 17 00:00:00 2001
From: TheFlow <theflow@sydigital.com>
Date: Mon, 27 Oct 2025 11:23:11 +1300
Subject: [PATCH] fix(bi): add explicit slider track styling for cross-browser
 visibility
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed invisible sliders in cost configuration modal by adding:

1. Explicit .slider base styles:
   - height: 8px (was conflicting with Tailwind h-2)
   - background: #e9d5ff (light purple)
   - appearance: none for both -webkit and standard

2. Track-specific styling:
   - ::-webkit-slider-track for Chrome/Safari/Edge
   - ::-moz-range-track for Firefox
   - Both get 8px height + purple background

3. Removed conflicting Tailwind classes:
   - Changed from "w-full h-2 bg-purple-200 rounded-lg..." to just "slider"
   - Custom CSS now has complete control

Issue: appearance-none removes native styling but browsers need
explicit track styles to render the slider bar visible.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 public/js/admin/audit-analytics.js | 32 +++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/public/js/admin/audit-analytics.js b/public/js/admin/audit-analytics.js
index eb18eaf8..ba3924d4 100644
--- a/public/js/admin/audit-analytics.js
+++ b/public/js/admin/audit-analytics.js
@@ -993,7 +993,7 @@ async function showCostConfigModal() {
               <input type="range" id="cost-${severity}-slider"
                      min="${config.min}" max="${config.max}" step="${config.step}"
                      value="${amount}"
-                     class="w-full h-2 bg-purple-200 rounded-lg appearance-none cursor-pointer slider">
+                     class="slider">
               <div class="flex justify-between text-xs text-gray-500 mt-1">
                 <span>$${(config.min / 1000).toFixed(0)}k</span>
                 <span>$${(config.max / 1000).toFixed(0)}k</span>
@@ -1042,7 +1042,26 @@ async function showCostConfigModal() {
 
     <style>
       /* Custom slider styling */
+      .slider {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 100%;
+        height: 8px;
+        background: #e9d5ff;
+        border-radius: 5px;
+        outline: none;
+      }
+
+      /* WebKit browsers (Chrome, Safari, Edge) */
+      .slider::-webkit-slider-track {
+        width: 100%;
+        height: 8px;
+        background: #e9d5ff;
+        border-radius: 5px;
+      }
+
       .slider::-webkit-slider-thumb {
+        -webkit-appearance: none;
         appearance: none;
         width: 20px;
         height: 20px;
@@ -1051,10 +1070,20 @@ async function showCostConfigModal() {
         cursor: pointer;
         transition: all 0.15s ease;
       }
+
       .slider::-webkit-slider-thumb:hover {
         background: #7e22ce;
         transform: scale(1.1);
       }
+
+      /* Firefox */
+      .slider::-moz-range-track {
+        width: 100%;
+        height: 8px;
+        background: #e9d5ff;
+        border-radius: 5px;
+      }
+
       .slider::-moz-range-thumb {
         width: 20px;
         height: 20px;
@@ -1064,6 +1093,7 @@ async function showCostConfigModal() {
         border: none;
         transition: all 0.15s ease;
       }
+
       .slider::-moz-range-thumb:hover {
         background: #7e22ce;
         transform: scale(1.1);