Fix: select shows gray placeholder, turns white when value is chosen

public/css/dashboard.css

@@ -248,13 +248,13 @@ .form-select {
     background: var(--filter-bg);
     border: 1px solid var(--filter-border);
     border-radius: var(--radius-sm);
-    color: var(--text-primary);
+    color: var(--text-muted);
     font-family: var(--font);
     font-size: 0.88rem;
-    font-weight: 400;
+    font-weight: 300;
     outline: none;
     cursor: pointer;
-    transition: all var(--transition);
+    transition: color var(--transition), border-color var(--transition), background var(--transition);
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
@@ -264,6 +264,12 @@ .form-select {
     padding-right: 36px;
 }
 
+/* When a real value has been selected */
+.form-select.is-selected {
+    color: var(--text-primary);
+    font-weight: 400;
+}
+
 .form-select:focus {
     border-color: rgba(255, 255, 255, 0.2);
     background-color: rgba(255, 255, 255, 0.05);

resources/views/input-data.blade.php

@@ -340,6 +340,19 @@ function toggleTheme() {
             const mobileBtn = document.getElementById('mobileThemeBtn');
             if (btn) btn.addEventListener('click', toggleTheme);
             if (mobileBtn) mobileBtn.addEventListener('click', toggleTheme);
+
+            // Toggle warna select: abu-abu saat placeholder, putih saat sudah dipilih
+            document.querySelectorAll('.form-select').forEach(function(sel) {
+                function checkSelected() {
+                    if (sel.value !== '') {
+                        sel.classList.add('is-selected');
+                    } else {
+                        sel.classList.remove('is-selected');
+                    }
+                }
+                sel.addEventListener('change', checkSelected);
+                checkSelected(); // cek kondisi awal (misal saat back/reload)
+            });
         });
     </script>
 </body>