Unit as buttons and othe rimprovements

iframe.html

@@ -7,6 +7,15 @@
     <style>
         /* Sundog Dog Food Calorie Calculator Styles */
         
+        /* CSS Variables for theming */
+        :root {
+            --bg-primary: #fdfcfe;
+            --bg-secondary: #ffffff;
+            --border-color: #e8e3ed;
+            --text-primary: #6f3f6d;
+            --text-secondary: #8f7a8e;
+        }
+
         body {
             margin: 0;
             padding: 0;
@@ -435,6 +444,11 @@
 
         /* Dark theme - manual override */
         .dog-calculator-container.theme-dark {
+            --bg-primary: #24202d;
+            --bg-secondary: #312b3b;
+            --border-color: #433c4f;
+            --text-primary: #f5f3f7;
+            --text-secondary: #b8b0c2;
             color: #f5f3f7;
         }
             
@@ -521,6 +535,23 @@
             color: #f5f3f7;
         }
 
+        .dog-calculator-container.theme-dark .dog-calculator-unit-btn {
+            background-color: #312b3b;
+            border-color: #433c4f;
+            color: #f5f3f7;
+        }
+
+        .dog-calculator-container.theme-dark .dog-calculator-unit-btn:hover {
+            border-color: #f19a5f;
+            background: rgba(241, 154, 95, 0.2);
+        }
+
+        .dog-calculator-container.theme-dark .dog-calculator-unit-btn.active {
+            border-color: #f19a5f;
+            background: #f19a5f;
+            color: white;
+        }
+            
         .dog-calculator-container.theme-dark .dog-calculator-results {
             background: linear-gradient(135deg, rgba(241, 154, 95, 0.15) 0%, rgba(241, 154, 95, 0.08) 100%);
             border-color: rgba(241, 154, 95, 0.3);
@@ -565,6 +596,11 @@
         /* System theme - follows user's OS preference */
         @media (prefers-color-scheme: dark) {
             .dog-calculator-container.theme-system {
+                --bg-primary: #24202d;
+                --bg-secondary: #312b3b;
+                --border-color: #433c4f;
+                --text-primary: #f5f3f7;
+                --text-secondary: #b8b0c2;
                 color: #f5f3f7;
             }
             
@@ -651,6 +687,23 @@
                 color: #f5f3f7;
             }
 
+            .dog-calculator-container.theme-system .dog-calculator-unit-btn {
+                background-color: #312b3b;
+                border-color: #433c4f;
+                color: #f5f3f7;
+            }
+
+            .dog-calculator-container.theme-system .dog-calculator-unit-btn:hover {
+                border-color: #f19a5f;
+                background: rgba(241, 154, 95, 0.2);
+            }
+
+            .dog-calculator-container.theme-system .dog-calculator-unit-btn.active {
+                border-color: #f19a5f;
+                background: #f19a5f;
+                color: white;
+            }
+            
             .dog-calculator-container.theme-system .dog-calculator-results {
                 background: linear-gradient(135deg, rgba(241, 154, 95, 0.15) 0%, rgba(241, 154, 95, 0.08) 100%);
                 border-color: rgba(241, 154, 95, 0.3);
@@ -1566,6 +1619,41 @@
             margin: 0 4px;
         }
 
+        /* Unit selection buttons */
+        .dog-calculator-unit-buttons {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin: 24px auto;
+            flex-wrap: wrap;
+            width: fit-content;
+        }
+
+        .dog-calculator-unit-btn {
+            padding: 8px 14px;
+            border: 2px solid var(--border-color);
+            border-radius: 6px;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            font-size: 0.9rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            min-width: 50px;
+            text-align: center;
+        }
+
+        .dog-calculator-unit-btn:hover {
+            border-color: #f19a5f;
+            background: rgba(241, 154, 95, 0.1);
+        }
+
+        .dog-calculator-unit-btn.active {
+            border-color: #f19a5f;
+            background: #f19a5f;
+            color: white;
+        }
+
         /* Mobile responsive adjustments for inline unit selector */
         @media (max-width: 576px) {
             .dog-calculator-result-item {
@@ -1810,20 +1898,30 @@
                         </div>
                     </div>
 
+                    <!-- Unit Selection Buttons -->
+                    <div class="dog-calculator-unit-buttons" id="unitButtons" style="display: none;">
+                        <button type="button" class="dog-calculator-unit-btn active" data-unit="g">g</button>
+                        <button type="button" class="dog-calculator-unit-btn" data-unit="kg">kg</button>
+                        <button type="button" class="dog-calculator-unit-btn" data-unit="oz">oz</button>
+                        <button type="button" class="dog-calculator-unit-btn" data-unit="lb">lb</button>
+                    </div>
+
                     <!-- Daily Total Results -->
                     <div class="dog-calculator-results" id="dailyFoodResults" style="display: none;">
                         <div class="dog-calculator-result-item">
                             <span class="dog-calculator-result-label">Total Daily Amount:</span>
                             <span class="dog-calculator-result-value" id="dailyFoodValue">- g/day</span>
-                            <select id="unit" class="dog-calculator-unit-select dog-calculator-inline-unit" aria-describedby="unitHelp">
-                                <option value="g">grams (g)</option>
-                                <option value="kg">kilograms (kg)</option>
-                                <option value="oz">ounces (oz)</option>
-                                <option value="lb">pounds (lb)</option>
-                            </select>
                         </div>
                     </div>
 
+                    <!-- Hidden select for compatibility -->
+                    <select id="unit" style="display: none;" aria-describedby="unitHelp">
+                        <option value="g">grams (g)</option>
+                        <option value="kg">kilograms (kg)</option>
+                        <option value="oz">ounces (oz)</option>
+                        <option value="lb">pounds (lb)</option>
+                    </select>
+
                     <div class="dog-calculator-food-amounts-section" id="foodAmountsSection" style="display: none;">
                         <h4 class="dog-calculator-section-title">
                             Calculate amounts for 
@@ -2667,6 +2765,20 @@
                 
                 if (unitSelect) unitSelect.addEventListener('change', () => this.updateFoodCalculations());
 
+                // Unit button event listeners
+                const unitButtons = document.querySelectorAll('.dog-calculator-unit-btn');
+                unitButtons.forEach(button => {
+                    button.addEventListener('click', (e) => {
+                        const selectedUnit = e.target.dataset.unit;
+                        this.setActiveUnitButton(selectedUnit);
+                        // Update hidden select to trigger existing logic
+                        if (unitSelect) {
+                            unitSelect.value = selectedUnit;
+                            this.updateFoodCalculations();
+                        }
+                    });
+                });
+                
                 if (unitToggle) unitToggle.addEventListener('change', () => this.toggleUnits());
 
                 if (addFoodBtn) addFoodBtn.addEventListener('click', () => this.addFoodSource());
@@ -2752,6 +2864,8 @@
                             '<option value="lb">pounds (lb)</option>' +
                             '<option value="g">grams (g)</option>' +
                             '<option value="kg">kilograms (kg)</option>';
+                        unitSelect.value = 'oz'; // Auto-select ounces for imperial
+                        this.setActiveUnitButton('oz'); // Sync unit buttons
                     }
                     
                     // Update energy units for all food sources to kcal/cup for imperial
@@ -2776,6 +2890,8 @@
                             '<option value="kg">kilograms (kg)</option>' +
                             '<option value="oz">ounces (oz)</option>' +
                             '<option value="lb">pounds (lb)</option>';
+                        unitSelect.value = 'g'; // Auto-select grams for metric
+                        this.setActiveUnitButton('g'); // Sync unit buttons
                     }
                     
                     // Update energy units for all food sources to kcal/100g for metric
@@ -2891,6 +3007,16 @@
                 }
             }
 
+            setActiveUnitButton(unit) {
+                const unitButtons = document.querySelectorAll('.dog-calculator-unit-btn');
+                unitButtons.forEach(button => {
+                    button.classList.remove('active');
+                    if (button.dataset.unit === unit) {
+                        button.classList.add('active');
+                    }
+                });
+            }
+
             updateCalorieCalculations() {
                 const dogTypeSelect = document.getElementById('dogType');
                 const calorieResults = document.getElementById('calorieResults');
@@ -2967,6 +3093,10 @@
                     foodAmountsSection.style.display = 'none';
                     dailyFoodResults.style.display = 'none';
                     if (foodBreakdownResults) foodBreakdownResults.style.display = 'none';
+                    
+                    // Hide unit buttons when validation fails
+                    const unitButtons = document.getElementById('unitButtons');
+                    if (unitButtons) unitButtons.style.display = 'none';
                     return;
                 }
 
@@ -3020,6 +3150,10 @@
                     dailyFoodResults.style.display = 'none';
                     if (foodBreakdownResults) foodBreakdownResults.style.display = 'none';
                     
+                    // Hide unit buttons when no valid foods
+                    const unitButtons = document.getElementById('unitButtons');
+                    if (unitButtons) unitButtons.style.display = 'none';
+                    
                     // If we have any food sources without energy content, still show the breakdown section
                     if (foodBreakdowns.length > 0) {
                         // Show food amounts section with warnings for missing energy content
@@ -3061,6 +3195,10 @@
                 // Update daily food results (total) - will be updated with proper units later
                 dailyFoodResults.style.display = 'block';
                 
+                // Show unit buttons when daily results are shown
+                const unitButtons = document.getElementById('unitButtons');
+                if (unitButtons) unitButtons.style.display = 'flex';
+
                 // Update per-food breakdown
                 if (foodBreakdownList && foodBreakdowns.length > 1) {
                     const breakdownHTML = foodBreakdowns.map(breakdown => {