feat: Enhanced TreeTrack form UI with improved multi-select and location controls

- Redesigned multi-select elements with better visual separation and custom scrollbars
- Added enhanced hover effects and checked states for better UX
- Improved location section with reorganized GPS and Map buttons
- Enhanced mobile responsiveness with proper button stacking
- Added better spacing, padding, and visual hierarchy
- Implemented custom scrollbar styling for multi-select containers
- Optimized button placement for mobile devices (GPS left-aligned, Map full-width)
- Added responsive text hiding for very small screens
- Improved overall form usability and visual appeal

Changes affect utility, phenology, and photography sections with consistent styling.

static/index.html

@@ -381,44 +381,73 @@
             appearance: none;
         }
 
-        /* Multi-select */
+        /* Enhanced Multi-select with better UX */
         .multi-select {
-            border: 1px solid var(--gray-300);
-            border-radius: var(--radius-md);
-            background: white;
-            max-height: 140px;
+            border: 2px solid var(--gray-200);
+            border-radius: var(--radius-lg);
+            background: var(--gray-50);
+            max-height: 200px;
             overflow-y: auto;
+            overflow-x: hidden;
+            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
+        }
+
+        /* Custom scrollbar for multi-select */
+        .multi-select::-webkit-scrollbar {
+            width: 8px;
         }
 
-        .multi-select-option {
+        .multi-select::-webkit-scrollbar-track {
+            background: var(--gray-100);
+            border-radius: 4px;
+            margin: 4px;
+        }
+
+        .multi-select::-webkit-scrollbar-thumb {
+            background: var(--gray-400);
+            border-radius: 4px;
+        }
+
+        .multi-select::-webkit-scrollbar-thumb:hover {
+            background: var(--primary-500);
+        }
+
+        .multi-select label {
             display: flex;
             align-items: center;
             padding: var(--space-3) var(--space-4);
-            border-bottom: 1px solid var(--gray-100);
-            transition: background-color 0.15s ease;
+            margin: var(--space-2);
+            border: 1px solid var(--gray-200);
+            border-radius: var(--radius-md);
+            background: white;
             cursor: pointer;
+            transition: all 0.2s ease;
+            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+            font-size: 0.875rem;
+            font-weight: 500;
+            color: var(--gray-700);
         }
 
-        .multi-select-option:last-child {
-            border-bottom: none;
+        .multi-select label:hover {
+            border-color: var(--primary-300);
+            background: var(--primary-50);
+            transform: translateY(-1px);
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
         }
 
-        .multi-select-option:hover {
-            background: var(--gray-50);
+        .multi-select label:has(input:checked) {
+            border-color: var(--primary-500);
+            background: var(--primary-100);
+            color: var(--primary-700);
+            font-weight: 600;
         }
 
-        .multi-select-checkbox {
+        .multi-select input[type="checkbox"] {
+            width: 1.125rem;
+            height: 1.125rem;
             margin-right: var(--space-3);
-            width: 1rem;
-            height: 1rem;
             accent-color: var(--primary-500);
-        }
-
-        .multi-select-label {
-            flex: 1;
-            font-size: 0.875rem;
-            color: var(--gray-700);
-            margin: 0;
+            cursor: pointer;
         }
 
         /* File Upload */
@@ -473,6 +502,49 @@
             flex-shrink: 0;
         }
 
+        /* Location buttons redesign */
+        .location-buttons {
+            display: flex;
+            gap: var(--space-3);
+            align-items: center;
+            margin-top: var(--space-2);
+        }
+
+        .location-btn-gps {
+            flex: 0 0 auto;
+        }
+
+        .location-btn-map {
+            flex: 1;
+            justify-content: center;
+        }
+
+        @media (max-width: 640px) {
+            .location-buttons {
+                flex-direction: column;
+                gap: var(--space-2);
+            }
+            
+            .location-btn-gps {
+                align-self: flex-start;
+                width: auto;
+            }
+            
+            .location-btn-map {
+                width: 100%;
+            }
+            
+            .btn-text {
+                display: inline;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .btn-text {
+                display: none;
+            }
+        }
+
         /* Form Actions */
         .form-actions {
             display: flex;
@@ -707,14 +779,7 @@
                             <div class="form-row">
                                 <div class="form-group">
                                     <label class="form-label required" for="latitude">Latitude</label>
-                                    <div class="location-group">
-                                        <div class="location-input">
-                                            <input type="number" id="latitude" class="form-input" step="0.0000001" min="-90" max="90" required placeholder="e.g. 26.1445">
-                                        </div>
-                                        <div class="location-button">
-                                            <button type="button" id="getLocation" class="btn btn-outline btn-sm">📍 GPS</button>
-                                        </div>
-                                    </div>
+                                    <input type="number" id="latitude" class="form-input" step="0.0000001" min="-90" max="90" required placeholder="e.g. 26.1445">
                                 </div>
                                 <div class="form-group">
                                     <label class="form-label required" for="longitude">Longitude</label>
@@ -723,7 +788,14 @@
                             </div>
                             
                             <div class="form-group">
-                                <a href="/static/map.html" class="btn btn-outline" style="width: 100%; justify-content: center;">🗺️ Select from Interactive Map</a>
+                                <div class="location-buttons">
+                                    <button type="button" id="getLocation" class="btn btn-outline location-btn-gps">
+                                        📍 <span class="btn-text">Get GPS Location</span>
+                                    </button>
+                                    <a href="/static/map.html" class="btn btn-primary location-btn-map">
+                                        🗺️ <span class="btn-text">Select from Map</span>
+                                    </a>
+                                </div>
                             </div>
                         </div>