Fix broken admin panel layout

Issues fixed:
- Removed broken range slider that was causing black boxes
- Simplified HTML structure with proper containers
- Fixed input visibility on both mobile and desktop
- Added proper flex containers for inputs and units
- Removed complex wrapper divs that were breaking layout
- Ensured all inputs are visible and properly sized
- Fixed checkbox alignment issues
- Made inputs actually usable on all screen sizes

The admin panel should now work properly on both mobile and desktop.

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>

index.html

@@ -691,84 +691,77 @@
             z-index: 998;
         }
 
-        /* Admin Panel Styles - Mobile First */
+        /* Admin Panel Styles - Simple and Working */
         .admin-setting-group {
-            padding: 15px 10px;
+            padding: 15px;
         }
         .admin-input-row {
             display: flex;
             flex-direction: column;
             margin-bottom: 20px;
-            gap: 8px;
         }
         .admin-input-row label {
             color: #FFA726;
             font-size: 14px;
             font-weight: 600;
-            letter-spacing: 0.3px;
-            margin-bottom: 4px;
+            margin-bottom: 8px;
+            display: block;
         }
-        .admin-input-wrapper {
+        .admin-input-container {
             display: flex;
             align-items: center;
             gap: 10px;
         }
-        .admin-input-row input[type="number"],
-        .admin-input-row input[type="range"] {
-            flex: 1;
-            min-height: 44px;
-            padding: 10px 12px;
+        .admin-input-row input[type="number"] {
+            width: 100%;
+            max-width: 200px;
+            height: 44px;
+            padding: 8px 12px;
             background: #2a2a2a;
             color: white;
-            border: 2px solid #444;
+            border: 2px solid #555;
             border-radius: 8px;
             font-size: 16px;
             text-align: center;
             -webkit-appearance: none;
+            -moz-appearance: textfield;
+            box-sizing: border-box;
         }
         .admin-input-row input[type="checkbox"] {
             width: 24px;
             height: 24px;
             cursor: pointer;
+            margin-right: 10px;
         }
-        .admin-input-row input[type="number"]:focus,
-        .admin-input-row input[type="range"]:focus {
+        .admin-input-row input[type="number"]:focus {
             outline: none;
             border-color: #4CAF50;
             background: #333;
-            box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
         }
         .admin-input-row .unit {
             color: #aaa;
             font-size: 14px;
             white-space: nowrap;
-            min-width: 60px;
-            text-align: right;
         }
-        .admin-range-value {
-            background: #333;
-            color: #FFA726;
-            padding: 8px 12px;
-            border-radius: 6px;
-            font-weight: bold;
-            min-width: 60px;
-            text-align: center;
-            border: 1px solid #555;
+        .admin-checkbox-row {
+            display: flex;
+            align-items: center;
+            margin-bottom: 20px;
         }
-        /* Desktop layout */
+        /* Responsive adjustments */
         @media (min-width: 768px) {
             .admin-input-row {
                 flex-direction: row;
                 align-items: center;
+                justify-content: space-between;
             }
             .admin-input-row label {
-                flex: 0 0 200px;
                 margin-bottom: 0;
+                flex: 0 0 auto;
+                min-width: 200px;
             }
-            .admin-input-row input[type="number"],
-            .admin-input-row input[type="range"] {
+            .admin-input-container {
                 flex: 0 0 auto;
-                width: 120px;
             }
         }
         .admin-button-group {
@@ -1033,23 +1026,22 @@
                 <div class="section-content">
                     <div class="admin-setting-group">
                         <div class="admin-input-row">
-                            <label>Interaction Range:</label>
-                            <div class="admin-input-wrapper">
-                                <input type="range" id="geocacheRangeSlider" min="1" max="50" value="5">
-                                <span class="admin-range-value" id="geocacheRangeValue">5</span>
+                            <label for="geocacheRange">Interaction Range:</label>
+                            <div class="admin-input-container">
+                                <input type="number" id="geocacheRange" min="1" max="50" value="5">
                                 <span class="unit">meters</span>
                             </div>
-                            <input type="number" id="geocacheRange" min="1" max="50" value="5" style="display:none;">
                         </div>
                         <div class="admin-input-row">
-                        <label>Alert Distance:</label>
+                            <label for="geocacheAlertRange">Alert Distance:</label>
+                            <div class="admin-input-container">
                                 <input type="number" id="geocacheAlertRange" min="1" max="50" value="5">
                                 <span class="unit">meters</span>
                             </div>
-                    <div class="admin-input-row">
-                        <label>Alert Sound:</label>
+                        </div>
+                        <div class="admin-checkbox-row">
                             <input type="checkbox" id="geocacheSoundEnabled" checked>
-                        <span class="unit">Enable alert sound</span>
+                            <label for="geocacheSoundEnabled">Enable alert sound</label>
                         </div>
                 </div>
             </div>
@@ -2225,24 +2217,6 @@
                 { id: 'proximityCheckInterval', setting: 'proximityCheckInterval', type: 'number' }
             ];
 
-            // Setup range sliders if they exist
-            const sliderPairs = [
-                { slider: 'geocacheRangeSlider', input: 'geocacheRange', value: 'geocacheRangeValue' }
-            ];
-
-            sliderPairs.forEach(pair => {
-                const slider = document.getElementById(pair.slider);
-                const input = document.getElementById(pair.input);
-                const valueDisplay = document.getElementById(pair.value);
-
-                if (slider && input && valueDisplay) {
-                    slider.addEventListener('input', function() {
-                        input.value = this.value;
-                        valueDisplay.textContent = this.value;
-                        input.dispatchEvent(new Event('input'));
-                    });
-                }
-            });
 
             adminInputs.forEach(input => {
                 const element = document.getElementById(input.id);