From 4ec42fdbc0200d003c57299814af75f069363fe9 Mon Sep 17 00:00:00 2001
From: Dayowe <dayowe@tutamail.com>
Date: Mon, 18 Aug 2025 14:36:25 +0200
Subject: [PATCH] Add cups unit option for kcal/cup measurements

Features:
- Add cups as a unit option that only works with kcal/cup energy measurements
- Cups button is disabled with tooltip when kcal/cup is not selected
- Auto-select cups when user selects kcal/cup as energy unit
- Auto-switch to appropriate units when changing energy measurement types
- Calculate cup amounts directly from calories without density assumptions

Fixes:
- Ensure cups display correct values immediately upon auto-selection
- Fix "Per day" radio button to be pre-selected when feeding config becomes visible
- Handle empty unit values with failsafe fallback to active button

Technical details:
- Direct calorie-to-cups conversion bypassing gram conversions
- Pre-calculate cups values in food breakdown for efficient display
- Set unit before updating calculations to avoid timing issues
- Added CSS styling for disabled button state across all themes
---
 iframe.html                   | 330 +++++++++++++++++++++++++++++++---
 src/css/themes.css            |  40 +++++
 src/index.html                |   2 +
 src/js/calculator.js          | 285 ++++++++++++++++++++++++++---
 sundog-dog-food-calculator.js | 330 +++++++++++++++++++++++++++++++---
 5 files changed, 914 insertions(+), 73 deletions(-)

diff --git a/iframe.html b/iframe.html
index 624e892..983d804 100644
--- a/iframe.html
+++ b/iframe.html
@@ -497,9 +497,8 @@
         .dog-calculator-container .dog-calculator-meal-input {
             display: inline-flex;
             align-items: center;
-            justify-content: center;
             gap: 6px;
-            margin-left: auto;
+            margin: 0 auto;
         }
 
         .dog-calculator-container .dog-calculator-meal-input span {
@@ -660,6 +659,19 @@
             background: #f19a5f;
             color: white;
         }
+
+        .dog-calculator-container.theme-dark .dog-calculator-unit-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            border-color: var(--border-color);
+            background: var(--bg-tertiary);
+            color: var(--text-secondary);
+        }
+
+        .dog-calculator-container.theme-dark .dog-calculator-unit-btn:disabled:hover {
+            border-color: var(--border-color);
+            background: var(--bg-tertiary);
+        }
             
         .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%);
@@ -853,6 +865,19 @@
                 background: #f19a5f;
                 color: white;
             }
+
+            .dog-calculator-container.theme-system .dog-calculator-unit-btn:disabled {
+                opacity: 0.5;
+                cursor: not-allowed;
+                border-color: var(--border-color);
+                background: var(--bg-tertiary);
+                color: var(--text-secondary);
+            }
+
+            .dog-calculator-container.theme-system .dog-calculator-unit-btn:disabled:hover {
+                border-color: var(--border-color);
+                background: var(--bg-tertiary);
+            }
             
             .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%);
@@ -1840,6 +1865,20 @@
             color: white;
         }
 
+        .dog-calculator-unit-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            border-color: var(--border-color);
+            background: var(--bg-tertiary);
+            color: var(--text-secondary);
+        }
+
+        .dog-calculator-unit-btn:disabled:hover {
+            border-color: var(--border-color);
+            background: var(--bg-tertiary);
+            transform: none;
+        }
+
         /* Hidden unit select for compatibility */
         .dog-calculator-unit-select-hidden {
             display: none;
@@ -2117,6 +2156,7 @@
                         <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>
+                        <button type="button" class="dog-calculator-unit-btn" data-unit="cups" id="cupsButton" disabled title="Available when using kcal/cup measurement">cups</button>
                     </div>
 
                     <!-- Daily Total Results -->
@@ -2133,6 +2173,7 @@
                         <option value="kg">kilograms (kg)</option>
                         <option value="oz">ounces (oz)</option>
                         <option value="lb">pounds (lb)</option>
+                        <option value="cups">cups</option>
                     </select>
 
                     <div class="dog-calculator-food-amounts-section" id="foodAmountsSection" style="display: none;">
@@ -2830,7 +2871,36 @@ const CALCULATOR_CONFIG = {
                 if (energyInput) {
                     energyInput.addEventListener('input', () => {
                         this.updateFoodSourceData(id, 'energy', energyInput.value);
-                        this.updateFoodCalculations();
+                        
+                        // Auto-select cups when entering energy for kcal/cup
+                        const foodSource = this.foodSources.find(fs => fs.id === id);
+                        if (foodSource && foodSource.energyUnit === 'kcalcup' && parseFloat(energyInput.value) > 0) {
+                            const unitSelect = document.getElementById('unit');
+                            const cupsButton = document.getElementById('cupsButton');
+                            
+                            // First check if cups button will be enabled after update
+                            const willEnableCups = this.foodSources.some(fs => 
+                                fs.energyUnit === 'kcalcup' && fs.energy && parseFloat(fs.energy) > 0
+                            );
+                            
+                            if (willEnableCups && unitSelect) {
+                                // Set cups BEFORE updating calculations
+                                unitSelect.value = 'cups';
+                                unitSelect.setAttribute('value', 'cups');
+                                this.setActiveUnitButton('cups');
+                                
+                                // Enable the cups button manually since we know it will be valid
+                                if (cupsButton) {
+                                    cupsButton.disabled = false;
+                                    cupsButton.title = 'Show amounts in cups';
+                                }
+                            }
+                            
+                            // Now update calculations with cups already selected
+                            this.updateFoodCalculations();
+                        } else {
+                            this.updateFoodCalculations();
+                        }
                     });
                     energyInput.addEventListener('blur', () => this.validateFoodSourceEnergy(id));
                 }
@@ -2838,7 +2908,54 @@ const CALCULATOR_CONFIG = {
                 if (energyUnitSelect) {
                     energyUnitSelect.addEventListener('change', () => {
                         this.updateFoodSourceData(id, 'energyUnit', energyUnitSelect.value);
-                        this.updateFoodCalculations();
+                        
+                        // Auto-select the most appropriate unit based on energy unit
+                        const unitSelect = document.getElementById('unit');
+                        const energyInput = document.getElementById(`energy-${id}`);
+                        
+                        if (unitSelect) {
+                            switch(energyUnitSelect.value) {
+                                case 'kcalcup':
+                                    // Check if we have energy value to enable cups
+                                    const foodSource = this.foodSources.find(fs => fs.id === id);
+                                    if (foodSource && foodSource.energy && parseFloat(foodSource.energy) > 0) {
+                                        // Set cups BEFORE updating calculations
+                                        unitSelect.value = 'cups';
+                                        unitSelect.setAttribute('value', 'cups');
+                                        this.setActiveUnitButton('cups');
+                                        
+                                        // Enable the cups button manually
+                                        const cupsButton = document.getElementById('cupsButton');
+                                        if (cupsButton) {
+                                            cupsButton.disabled = false;
+                                            cupsButton.title = 'Show amounts in cups';
+                                        }
+                                    }
+                                    this.updateFoodCalculations();
+                                    break;
+                                case 'kcal100g':
+                                    // For kcal/100g, select grams
+                                    unitSelect.value = 'g';
+                                    this.setActiveUnitButton('g');
+                                    this.updateFoodCalculations();
+                                    break;
+                                case 'kcalkg':
+                                    // For kcal/kg, also select grams (or could be kg)
+                                    unitSelect.value = 'g';
+                                    this.setActiveUnitButton('g');
+                                    this.updateFoodCalculations();
+                                    break;
+                                case 'kcalcan':
+                                    // For kcal/can, use grams as default (or ounces in imperial)
+                                    unitSelect.value = this.isImperial ? 'oz' : 'g';
+                                    this.setActiveUnitButton(unitSelect.value);
+                                    this.updateFoodCalculations();
+                                    break;
+                            }
+                        } else {
+                            // No unit select, just update calculations
+                            this.updateFoodCalculations();
+                        }
                     });
                 }
 
@@ -3236,7 +3353,7 @@ const CALCULATOR_CONFIG = {
                 }
             }
 
-            convertUnits(grams, unit) {
+            convertUnits(grams, unit, foodSource = null) {
                 switch (unit) {
                     case 'kg':
                         return grams / 1000;
@@ -3244,6 +3361,18 @@ const CALCULATOR_CONFIG = {
                         return grams / 28.3495;
                     case 'lb':
                         return grams / 453.592;
+                    case 'cups':
+                        // For cups, we need to convert from grams worth of calories to cups
+                        if (foodSource && foodSource.energyUnit === 'kcalcup' && foodSource.energy) {
+                            // Get calories per 100g for this food
+                            const caloriesPerGram = this.getFoodSourceEnergyPer100g(foodSource) / 100;
+                            // Calculate total calories represented by these grams
+                            const totalCalories = grams * caloriesPerGram;
+                            // Divide by calories per cup to get number of cups
+                            const caloriesPerCup = parseFloat(foodSource.energy);
+                            return totalCalories / caloriesPerCup;
+                        }
+                        return null; // Cannot convert to cups without kcal/cup
                     default:
                         return grams;
                 }
@@ -3347,6 +3476,31 @@ const CALCULATOR_CONFIG = {
                 this.sendHeightToParent();
             }
 
+            updateCupsButtonState() {
+                const cupsButton = document.getElementById('cupsButton');
+                if (!cupsButton) return;
+                
+                // Check if any food source has kcal/cup selected
+                const hasKcalCup = this.foodSources.some(fs => 
+                    fs.energyUnit === 'kcalcup' && fs.energy && parseFloat(fs.energy) > 0
+                );
+                
+                if (hasKcalCup) {
+                    cupsButton.disabled = false;
+                    cupsButton.title = 'Show amounts in cups';
+                } else {
+                    cupsButton.disabled = true;
+                    cupsButton.title = 'Available when using kcal/cup measurement';
+                    
+                    // If cups was selected, switch back to grams
+                    const unitSelect = document.getElementById('unit');
+                    if (unitSelect && unitSelect.value === 'cups') {
+                        unitSelect.value = 'g';
+                        this.setActiveUnitButton('g');
+                    }
+                }
+            }
+
             updateFoodCalculations() {
                 if (this.currentMER === 0) return;
                 
@@ -3360,15 +3514,32 @@ const CALCULATOR_CONFIG = {
                 const foodBreakdownResults = document.getElementById('foodBreakdownResults');
                 const foodBreakdownList = document.getElementById('foodBreakdownList');
                 const feedingConfig = document.getElementById('feedingConfig');
+                
+                // Update cups button state
+                this.updateCupsButtonState();
 
                 if (!daysInput || !unitSelect || !dailyFoodResults || !dailyFoodValue || !foodAmountsSection) {
                     return;
                 }
 
                 const days = daysInput.value;
-                const unit = unitSelect.value;
-                const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : 'lb';
-                const decimals = unit === 'g' ? 0 : unit === 'kg' ? 2 : 1;
+                let unit = unitSelect.value;
+                
+                // Failsafe: if unit is empty string but cups button is active, use 'cups'
+                if (!unit || unit === '') {
+                    const activeButton = document.querySelector('.dog-calculator-unit-btn.active');
+                    if (activeButton) {
+                        unit = activeButton.dataset.unit || 'g';
+                    } else {
+                        unit = 'g'; // Default fallback
+                    }
+                }
+                
+                const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : unit === 'lb' ? 'lb' : 'cups';
+                const decimals = unit === 'g' ? 0 : unit === 'kg' ? 2 : unit === 'cups' ? 1 : 1;
+                
+                // Debug: log what unit is being used
+                console.log('UpdateFoodCalculations - unit:', unit, 'unitLabel:', unitLabel);
                 
                 // Determine frequency suffix for display
                 const frequencySuffix = this.showPerMeal ? '/meal' : '/day';
@@ -3405,10 +3576,30 @@ const CALCULATOR_CONFIG = {
                     
                     if (energyPer100g && energyPer100g > 0.1 && fs.percentage > 0) {
                         const dailyCaloriesForThisFood = (this.currentMER * fs.percentage) / 100;
-                        const dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
+                        let dailyGramsForThisFood;
+                        let dailyCupsForThisFood = null;
+                        
+                        // For kcal/cup, calculate cups directly from calories
+                        if (fs.energyUnit === 'kcalcup' && fs.energy) {
+                            const caloriesPerCup = parseFloat(fs.energy);
+                            dailyCupsForThisFood = dailyCaloriesForThisFood / caloriesPerCup;
+                            // We still need grams for total calculation, use approximation
+                            dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
+                            console.log('Cups calculation:', {
+                                caloriesPerCup,
+                                dailyCaloriesForThisFood,
+                                dailyCupsForThisFood,
+                                dailyGramsForThisFood
+                            });
+                        } else {
+                            // For other units, calculate grams normally
+                            dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
+                        }
                         
                         // Calculate per-meal amounts if needed
                         const displayGrams = this.showPerMeal ? dailyGramsForThisFood / this.mealsPerDay : dailyGramsForThisFood;
+                        const displayCups = dailyCupsForThisFood !== null ? 
+                            (this.showPerMeal ? dailyCupsForThisFood / this.mealsPerDay : dailyCupsForThisFood) : null;
                         const displayCalories = this.showPerMeal ? dailyCaloriesForThisFood / this.mealsPerDay : dailyCaloriesForThisFood;
                         
                         foodBreakdowns.push({
@@ -3416,10 +3607,13 @@ const CALCULATOR_CONFIG = {
                             percentage: fs.percentage,
                             dailyGrams: dailyGramsForThisFood,
                             displayGrams: displayGrams,
+                            dailyCups: dailyCupsForThisFood,
+                            displayCups: displayCups,
                             calories: dailyCaloriesForThisFood,
                             displayCalories: displayCalories,
                             isLocked: fs.isLocked,
-                            hasEnergyContent: true
+                            hasEnergyContent: true,
+                            foodSource: fs  // Store reference for cups conversion
                         });
                         
                         totalDailyGrams += dailyGramsForThisFood;
@@ -3431,10 +3625,13 @@ const CALCULATOR_CONFIG = {
                             percentage: fs.percentage,
                             dailyGrams: 0,
                             displayGrams: 0,
+                            dailyCups: null,
+                            displayCups: null,
                             calories: 0,
                             displayCalories: 0,
                             isLocked: fs.isLocked,
-                            hasEnergyContent: false
+                            hasEnergyContent: false,
+                            foodSource: fs  // Store reference for cups conversion
                         });
                     }
                 });
@@ -3498,7 +3695,15 @@ const CALCULATOR_CONFIG = {
                 dailyFoodResults.style.display = 'block';
                 
                 // Show feeding configuration when we have valid foods
-                if (feedingConfig) feedingConfig.style.display = 'block';
+                if (feedingConfig) {
+                    feedingConfig.style.display = 'block';
+                    
+                    // Ensure "Per day" is checked when feeding config becomes visible
+                    const showDaily = document.getElementById('showDaily');
+                    if (showDaily && !showDaily.checked && !document.getElementById('showPerMeal').checked) {
+                        showDaily.checked = true;
+                    }
+                }
                 
                 // Show unit buttons when daily results are shown
                 const unitButtons = document.getElementById('unitButtons');
@@ -3507,9 +3712,21 @@ const CALCULATOR_CONFIG = {
                 // Update per-food breakdown
                 if (foodBreakdownList && foodBreakdowns.length > 1) {
                     const breakdownHTML = foodBreakdowns.map(breakdown => {
-                        const valueContent = breakdown.hasEnergyContent 
-                            ? `${this.formatNumber(this.convertUnits(breakdown.displayGrams, unit), decimals)} ${unitLabel}${frequencySuffix}`
-                            : `<span class="dog-calculator-warning" title="Enter energy content to calculate amount">⚠️</span>`;
+                        let valueContent;
+                        if (breakdown.hasEnergyContent) {
+                            if (unit === 'cups') {
+                                // For cups, use the pre-calculated cups value if available
+                                if (breakdown.displayCups !== null) {
+                                    valueContent = `${this.formatNumber(breakdown.displayCups, decimals)} ${unitLabel}${frequencySuffix}`;
+                                } else {
+                                    valueContent = `<span class="dog-calculator-warning" title="Cups only available for foods with kcal/cup measurement">N/A</span>`;
+                                }
+                            } else {
+                                valueContent = `${this.formatNumber(this.convertUnits(breakdown.displayGrams, unit), decimals)} ${unitLabel}${frequencySuffix}`;
+                            }
+                        } else {
+                            valueContent = `<span class="dog-calculator-warning" title="Enter energy content to calculate amount">⚠️</span>`;
+                        }
                         
                         return `
                             <div class="dog-calculator-food-result-item">
@@ -3529,8 +3746,40 @@ const CALCULATOR_CONFIG = {
                 
                 // Update daily food value with correct units
                 const displayTotal = this.showPerMeal ? totalDailyGrams / this.mealsPerDay : totalDailyGrams;
-                const convertedTotal = this.convertUnits(displayTotal, unit);
-                dailyFoodValue.textContent = this.formatNumber(convertedTotal, decimals) + ` ${unitLabel}${frequencySuffix}`;
+                let convertedTotal;
+                let totalDisplayText;
+                
+                if (unit === 'cups') {
+                    console.log('Unit is cups, checking validity...');
+                    // For cups, we can only show total if all foods with percentage > 0 have kcal/cup
+                    const validForCups = foodBreakdowns.filter(b => b.percentage > 0)
+                        .every(b => b.displayCups !== null && b.displayCups !== undefined);
+                    
+                    console.log('Valid for cups?', validForCups, 'Breakdowns:', foodBreakdowns);
+                    
+                    if (validForCups) {
+                        // Calculate total cups using pre-calculated values
+                        let totalCups = 0;
+                        foodBreakdowns.forEach(breakdown => {
+                            if (breakdown.percentage > 0 && breakdown.displayCups !== null) {
+                                totalCups += breakdown.displayCups;
+                            }
+                        });
+                        console.log('Total cups display:', {
+                            totalCups,
+                            displayTotal,
+                            foodBreakdowns: foodBreakdowns.map(b => ({ name: b.name, displayCups: b.displayCups }))
+                        });
+                        totalDisplayText = this.formatNumber(totalCups, decimals) + ` ${unitLabel}${frequencySuffix}`;
+                    } else {
+                        totalDisplayText = 'Mixed units - see breakdown';
+                    }
+                } else {
+                    convertedTotal = this.convertUnits(displayTotal, unit);
+                    totalDisplayText = this.formatNumber(convertedTotal, decimals) + ` ${unitLabel}${frequencySuffix}`;
+                }
+                
+                dailyFoodValue.textContent = totalDisplayText;
                 
                 // Build HTML for individual food amounts
                 const foodAmountsHTML = foodBreakdowns.map(breakdown => {
@@ -3552,11 +3801,23 @@ const CALCULATOR_CONFIG = {
                         `;
                     } else {
                         // For multi-day calculations: show total amount for all days
-                        // But if in per-meal mode, multiply by meals per day as well
-                        const totalGramsForDays = this.showPerMeal 
-                            ? (breakdown.dailyGrams / this.mealsPerDay) * numDays * this.mealsPerDay
-                            : breakdown.dailyGrams * numDays;
-                        const convertedAmount = this.convertUnits(totalGramsForDays, unit);
+                        let amountDisplay;
+                        if (unit === 'cups') {
+                            // For cups, use pre-calculated cups value
+                            if (breakdown.dailyCups !== null) {
+                                const totalCupsForDays = breakdown.dailyCups * numDays;
+                                amountDisplay = `${this.formatNumber(totalCupsForDays, decimals)} ${unitLabel}`;
+                            } else {
+                                amountDisplay = `<span class="dog-calculator-warning" title="Cups only available for foods with kcal/cup measurement">N/A</span>`;
+                            }
+                        } else {
+                            // For other units, calculate from grams
+                            const totalGramsForDays = this.showPerMeal 
+                                ? (breakdown.dailyGrams / this.mealsPerDay) * numDays * this.mealsPerDay
+                                : breakdown.dailyGrams * numDays;
+                            const convertedAmount = this.convertUnits(totalGramsForDays, unit);
+                            amountDisplay = `${this.formatNumber(convertedAmount, decimals)} ${unitLabel}`;
+                        }
                         
                         return `
                             <div class="dog-calculator-food-amount-item">
@@ -3566,7 +3827,7 @@ const CALCULATOR_CONFIG = {
                                     ${lockIndicator}
                                 </div>
                                 <div class="dog-calculator-food-amount-value">
-                                    ${this.formatNumber(convertedAmount, decimals)} ${unitLabel}
+                                    ${amountDisplay}
                                 </div>
                             </div>
                         `;
@@ -3575,7 +3836,6 @@ const CALCULATOR_CONFIG = {
                 
                 // Calculate and display total
                 const totalFoodGrams = totalDailyGrams * numDays;
-                const totalConverted = this.convertUnits(totalFoodGrams, unit);
                 
                 // Update the display
                 if (foodAmountsList) {
@@ -3583,7 +3843,27 @@ const CALCULATOR_CONFIG = {
                 }
                 
                 if (totalAmountDisplay) {
-                    totalAmountDisplay.textContent = `${this.formatNumber(totalConverted, decimals)} ${unitLabel}`;
+                    if (unit === 'cups') {
+                        // For cups total, check if all foods can be converted
+                        const validForCups = foodBreakdowns.filter(b => b.percentage > 0)
+                            .every(b => b.dailyCups !== null && b.dailyCups !== undefined);
+                        
+                        if (validForCups) {
+                            // Calculate total cups using pre-calculated values
+                            let totalCups = 0;
+                            foodBreakdowns.forEach(breakdown => {
+                                if (breakdown.percentage > 0 && breakdown.dailyCups !== null) {
+                                    totalCups += breakdown.dailyCups * numDays;
+                                }
+                            });
+                            totalAmountDisplay.textContent = `${this.formatNumber(totalCups, decimals)} ${unitLabel}`;
+                        } else {
+                            totalAmountDisplay.textContent = 'Mixed units - see individual amounts';
+                        }
+                    } else {
+                        const totalConverted = this.convertUnits(totalFoodGrams, unit);
+                        totalAmountDisplay.textContent = `${this.formatNumber(totalConverted, decimals)} ${unitLabel}`;
+                    }
                 }
                 
                 foodAmountsSection.style.display = 'block';
diff --git a/src/css/themes.css b/src/css/themes.css
index 588201e..5c81819 100644
--- a/src/css/themes.css
+++ b/src/css/themes.css
@@ -110,6 +110,19 @@
             background: #f19a5f;
             color: white;
         }
+
+        .dog-calculator-container.theme-dark .dog-calculator-unit-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            border-color: var(--border-color);
+            background: var(--bg-tertiary);
+            color: var(--text-secondary);
+        }
+
+        .dog-calculator-container.theme-dark .dog-calculator-unit-btn:disabled:hover {
+            border-color: var(--border-color);
+            background: var(--bg-tertiary);
+        }
             
         .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%);
@@ -303,6 +316,19 @@
                 background: #f19a5f;
                 color: white;
             }
+
+            .dog-calculator-container.theme-system .dog-calculator-unit-btn:disabled {
+                opacity: 0.5;
+                cursor: not-allowed;
+                border-color: var(--border-color);
+                background: var(--bg-tertiary);
+                color: var(--text-secondary);
+            }
+
+            .dog-calculator-container.theme-system .dog-calculator-unit-btn:disabled:hover {
+                border-color: var(--border-color);
+                background: var(--bg-tertiary);
+            }
             
             .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%);
@@ -1290,6 +1316,20 @@
             color: white;
         }
 
+        .dog-calculator-unit-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            border-color: var(--border-color);
+            background: var(--bg-tertiary);
+            color: var(--text-secondary);
+        }
+
+        .dog-calculator-unit-btn:disabled:hover {
+            border-color: var(--border-color);
+            background: var(--bg-tertiary);
+            transform: none;
+        }
+
         /* Hidden unit select for compatibility */
         .dog-calculator-unit-select-hidden {
             display: none;
diff --git a/src/index.html b/src/index.html
index 77a5ebe..c515b13 100644
--- a/src/index.html
+++ b/src/index.html
@@ -100,6 +100,7 @@
                         <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>
+                        <button type="button" class="dog-calculator-unit-btn" data-unit="cups" id="cupsButton" disabled title="Available when using kcal/cup measurement">cups</button>
                     </div>
 
                     <!-- Daily Total Results -->
@@ -116,6 +117,7 @@
                         <option value="kg">kilograms (kg)</option>
                         <option value="oz">ounces (oz)</option>
                         <option value="lb">pounds (lb)</option>
+                        <option value="cups">cups</option>
                     </select>
 
                     <div class="dog-calculator-food-amounts-section" id="foodAmountsSection" style="display: none;">
diff --git a/src/js/calculator.js b/src/js/calculator.js
index e75ac69..5804985 100644
--- a/src/js/calculator.js
+++ b/src/js/calculator.js
@@ -589,7 +589,36 @@
                 if (energyInput) {
                     energyInput.addEventListener('input', () => {
                         this.updateFoodSourceData(id, 'energy', energyInput.value);
-                        this.updateFoodCalculations();
+                        
+                        // Auto-select cups when entering energy for kcal/cup
+                        const foodSource = this.foodSources.find(fs => fs.id === id);
+                        if (foodSource && foodSource.energyUnit === 'kcalcup' && parseFloat(energyInput.value) > 0) {
+                            const unitSelect = document.getElementById('unit');
+                            const cupsButton = document.getElementById('cupsButton');
+                            
+                            // First check if cups button will be enabled after update
+                            const willEnableCups = this.foodSources.some(fs => 
+                                fs.energyUnit === 'kcalcup' && fs.energy && parseFloat(fs.energy) > 0
+                            );
+                            
+                            if (willEnableCups && unitSelect) {
+                                // Set cups BEFORE updating calculations
+                                unitSelect.value = 'cups';
+                                unitSelect.setAttribute('value', 'cups');
+                                this.setActiveUnitButton('cups');
+                                
+                                // Enable the cups button manually since we know it will be valid
+                                if (cupsButton) {
+                                    cupsButton.disabled = false;
+                                    cupsButton.title = 'Show amounts in cups';
+                                }
+                            }
+                            
+                            // Now update calculations with cups already selected
+                            this.updateFoodCalculations();
+                        } else {
+                            this.updateFoodCalculations();
+                        }
                     });
                     energyInput.addEventListener('blur', () => this.validateFoodSourceEnergy(id));
                 }
@@ -597,7 +626,54 @@
                 if (energyUnitSelect) {
                     energyUnitSelect.addEventListener('change', () => {
                         this.updateFoodSourceData(id, 'energyUnit', energyUnitSelect.value);
-                        this.updateFoodCalculations();
+                        
+                        // Auto-select the most appropriate unit based on energy unit
+                        const unitSelect = document.getElementById('unit');
+                        const energyInput = document.getElementById(`energy-${id}`);
+                        
+                        if (unitSelect) {
+                            switch(energyUnitSelect.value) {
+                                case 'kcalcup':
+                                    // Check if we have energy value to enable cups
+                                    const foodSource = this.foodSources.find(fs => fs.id === id);
+                                    if (foodSource && foodSource.energy && parseFloat(foodSource.energy) > 0) {
+                                        // Set cups BEFORE updating calculations
+                                        unitSelect.value = 'cups';
+                                        unitSelect.setAttribute('value', 'cups');
+                                        this.setActiveUnitButton('cups');
+                                        
+                                        // Enable the cups button manually
+                                        const cupsButton = document.getElementById('cupsButton');
+                                        if (cupsButton) {
+                                            cupsButton.disabled = false;
+                                            cupsButton.title = 'Show amounts in cups';
+                                        }
+                                    }
+                                    this.updateFoodCalculations();
+                                    break;
+                                case 'kcal100g':
+                                    // For kcal/100g, select grams
+                                    unitSelect.value = 'g';
+                                    this.setActiveUnitButton('g');
+                                    this.updateFoodCalculations();
+                                    break;
+                                case 'kcalkg':
+                                    // For kcal/kg, also select grams (or could be kg)
+                                    unitSelect.value = 'g';
+                                    this.setActiveUnitButton('g');
+                                    this.updateFoodCalculations();
+                                    break;
+                                case 'kcalcan':
+                                    // For kcal/can, use grams as default (or ounces in imperial)
+                                    unitSelect.value = this.isImperial ? 'oz' : 'g';
+                                    this.setActiveUnitButton(unitSelect.value);
+                                    this.updateFoodCalculations();
+                                    break;
+                            }
+                        } else {
+                            // No unit select, just update calculations
+                            this.updateFoodCalculations();
+                        }
                     });
                 }
 
@@ -995,7 +1071,7 @@
                 }
             }
 
-            convertUnits(grams, unit) {
+            convertUnits(grams, unit, foodSource = null) {
                 switch (unit) {
                     case 'kg':
                         return grams / 1000;
@@ -1003,6 +1079,18 @@
                         return grams / 28.3495;
                     case 'lb':
                         return grams / 453.592;
+                    case 'cups':
+                        // For cups, we need to convert from grams worth of calories to cups
+                        if (foodSource && foodSource.energyUnit === 'kcalcup' && foodSource.energy) {
+                            // Get calories per 100g for this food
+                            const caloriesPerGram = this.getFoodSourceEnergyPer100g(foodSource) / 100;
+                            // Calculate total calories represented by these grams
+                            const totalCalories = grams * caloriesPerGram;
+                            // Divide by calories per cup to get number of cups
+                            const caloriesPerCup = parseFloat(foodSource.energy);
+                            return totalCalories / caloriesPerCup;
+                        }
+                        return null; // Cannot convert to cups without kcal/cup
                     default:
                         return grams;
                 }
@@ -1106,6 +1194,31 @@
                 this.sendHeightToParent();
             }
 
+            updateCupsButtonState() {
+                const cupsButton = document.getElementById('cupsButton');
+                if (!cupsButton) return;
+                
+                // Check if any food source has kcal/cup selected
+                const hasKcalCup = this.foodSources.some(fs => 
+                    fs.energyUnit === 'kcalcup' && fs.energy && parseFloat(fs.energy) > 0
+                );
+                
+                if (hasKcalCup) {
+                    cupsButton.disabled = false;
+                    cupsButton.title = 'Show amounts in cups';
+                } else {
+                    cupsButton.disabled = true;
+                    cupsButton.title = 'Available when using kcal/cup measurement';
+                    
+                    // If cups was selected, switch back to grams
+                    const unitSelect = document.getElementById('unit');
+                    if (unitSelect && unitSelect.value === 'cups') {
+                        unitSelect.value = 'g';
+                        this.setActiveUnitButton('g');
+                    }
+                }
+            }
+
             updateFoodCalculations() {
                 if (this.currentMER === 0) return;
                 
@@ -1119,15 +1232,32 @@
                 const foodBreakdownResults = document.getElementById('foodBreakdownResults');
                 const foodBreakdownList = document.getElementById('foodBreakdownList');
                 const feedingConfig = document.getElementById('feedingConfig');
+                
+                // Update cups button state
+                this.updateCupsButtonState();
 
                 if (!daysInput || !unitSelect || !dailyFoodResults || !dailyFoodValue || !foodAmountsSection) {
                     return;
                 }
 
                 const days = daysInput.value;
-                const unit = unitSelect.value;
-                const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : 'lb';
-                const decimals = unit === 'g' ? 0 : unit === 'kg' ? 2 : 1;
+                let unit = unitSelect.value;
+                
+                // Failsafe: if unit is empty string but cups button is active, use 'cups'
+                if (!unit || unit === '') {
+                    const activeButton = document.querySelector('.dog-calculator-unit-btn.active');
+                    if (activeButton) {
+                        unit = activeButton.dataset.unit || 'g';
+                    } else {
+                        unit = 'g'; // Default fallback
+                    }
+                }
+                
+                const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : unit === 'lb' ? 'lb' : 'cups';
+                const decimals = unit === 'g' ? 0 : unit === 'kg' ? 2 : unit === 'cups' ? 1 : 1;
+                
+                // Debug: log what unit is being used
+                console.log('UpdateFoodCalculations - unit:', unit, 'unitLabel:', unitLabel);
                 
                 // Determine frequency suffix for display
                 const frequencySuffix = this.showPerMeal ? '/meal' : '/day';
@@ -1164,10 +1294,30 @@
                     
                     if (energyPer100g && energyPer100g > 0.1 && fs.percentage > 0) {
                         const dailyCaloriesForThisFood = (this.currentMER * fs.percentage) / 100;
-                        const dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
+                        let dailyGramsForThisFood;
+                        let dailyCupsForThisFood = null;
+                        
+                        // For kcal/cup, calculate cups directly from calories
+                        if (fs.energyUnit === 'kcalcup' && fs.energy) {
+                            const caloriesPerCup = parseFloat(fs.energy);
+                            dailyCupsForThisFood = dailyCaloriesForThisFood / caloriesPerCup;
+                            // We still need grams for total calculation, use approximation
+                            dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
+                            console.log('Cups calculation:', {
+                                caloriesPerCup,
+                                dailyCaloriesForThisFood,
+                                dailyCupsForThisFood,
+                                dailyGramsForThisFood
+                            });
+                        } else {
+                            // For other units, calculate grams normally
+                            dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
+                        }
                         
                         // Calculate per-meal amounts if needed
                         const displayGrams = this.showPerMeal ? dailyGramsForThisFood / this.mealsPerDay : dailyGramsForThisFood;
+                        const displayCups = dailyCupsForThisFood !== null ? 
+                            (this.showPerMeal ? dailyCupsForThisFood / this.mealsPerDay : dailyCupsForThisFood) : null;
                         const displayCalories = this.showPerMeal ? dailyCaloriesForThisFood / this.mealsPerDay : dailyCaloriesForThisFood;
                         
                         foodBreakdowns.push({
@@ -1175,10 +1325,13 @@
                             percentage: fs.percentage,
                             dailyGrams: dailyGramsForThisFood,
                             displayGrams: displayGrams,
+                            dailyCups: dailyCupsForThisFood,
+                            displayCups: displayCups,
                             calories: dailyCaloriesForThisFood,
                             displayCalories: displayCalories,
                             isLocked: fs.isLocked,
-                            hasEnergyContent: true
+                            hasEnergyContent: true,
+                            foodSource: fs  // Store reference for cups conversion
                         });
                         
                         totalDailyGrams += dailyGramsForThisFood;
@@ -1190,10 +1343,13 @@
                             percentage: fs.percentage,
                             dailyGrams: 0,
                             displayGrams: 0,
+                            dailyCups: null,
+                            displayCups: null,
                             calories: 0,
                             displayCalories: 0,
                             isLocked: fs.isLocked,
-                            hasEnergyContent: false
+                            hasEnergyContent: false,
+                            foodSource: fs  // Store reference for cups conversion
                         });
                     }
                 });
@@ -1257,7 +1413,15 @@
                 dailyFoodResults.style.display = 'block';
                 
                 // Show feeding configuration when we have valid foods
-                if (feedingConfig) feedingConfig.style.display = 'block';
+                if (feedingConfig) {
+                    feedingConfig.style.display = 'block';
+                    
+                    // Ensure "Per day" is checked when feeding config becomes visible
+                    const showDaily = document.getElementById('showDaily');
+                    if (showDaily && !showDaily.checked && !document.getElementById('showPerMeal').checked) {
+                        showDaily.checked = true;
+                    }
+                }
                 
                 // Show unit buttons when daily results are shown
                 const unitButtons = document.getElementById('unitButtons');
@@ -1266,9 +1430,21 @@
                 // Update per-food breakdown
                 if (foodBreakdownList && foodBreakdowns.length > 1) {
                     const breakdownHTML = foodBreakdowns.map(breakdown => {
-                        const valueContent = breakdown.hasEnergyContent 
-                            ? `${this.formatNumber(this.convertUnits(breakdown.displayGrams, unit), decimals)} ${unitLabel}${frequencySuffix}`
-                            : `<span class="dog-calculator-warning" title="Enter energy content to calculate amount">⚠️</span>`;
+                        let valueContent;
+                        if (breakdown.hasEnergyContent) {
+                            if (unit === 'cups') {
+                                // For cups, use the pre-calculated cups value if available
+                                if (breakdown.displayCups !== null) {
+                                    valueContent = `${this.formatNumber(breakdown.displayCups, decimals)} ${unitLabel}${frequencySuffix}`;
+                                } else {
+                                    valueContent = `<span class="dog-calculator-warning" title="Cups only available for foods with kcal/cup measurement">N/A</span>`;
+                                }
+                            } else {
+                                valueContent = `${this.formatNumber(this.convertUnits(breakdown.displayGrams, unit), decimals)} ${unitLabel}${frequencySuffix}`;
+                            }
+                        } else {
+                            valueContent = `<span class="dog-calculator-warning" title="Enter energy content to calculate amount">⚠️</span>`;
+                        }
                         
                         return `
                             <div class="dog-calculator-food-result-item">
@@ -1288,8 +1464,40 @@
                 
                 // Update daily food value with correct units
                 const displayTotal = this.showPerMeal ? totalDailyGrams / this.mealsPerDay : totalDailyGrams;
-                const convertedTotal = this.convertUnits(displayTotal, unit);
-                dailyFoodValue.textContent = this.formatNumber(convertedTotal, decimals) + ` ${unitLabel}${frequencySuffix}`;
+                let convertedTotal;
+                let totalDisplayText;
+                
+                if (unit === 'cups') {
+                    console.log('Unit is cups, checking validity...');
+                    // For cups, we can only show total if all foods with percentage > 0 have kcal/cup
+                    const validForCups = foodBreakdowns.filter(b => b.percentage > 0)
+                        .every(b => b.displayCups !== null && b.displayCups !== undefined);
+                    
+                    console.log('Valid for cups?', validForCups, 'Breakdowns:', foodBreakdowns);
+                    
+                    if (validForCups) {
+                        // Calculate total cups using pre-calculated values
+                        let totalCups = 0;
+                        foodBreakdowns.forEach(breakdown => {
+                            if (breakdown.percentage > 0 && breakdown.displayCups !== null) {
+                                totalCups += breakdown.displayCups;
+                            }
+                        });
+                        console.log('Total cups display:', {
+                            totalCups,
+                            displayTotal,
+                            foodBreakdowns: foodBreakdowns.map(b => ({ name: b.name, displayCups: b.displayCups }))
+                        });
+                        totalDisplayText = this.formatNumber(totalCups, decimals) + ` ${unitLabel}${frequencySuffix}`;
+                    } else {
+                        totalDisplayText = 'Mixed units - see breakdown';
+                    }
+                } else {
+                    convertedTotal = this.convertUnits(displayTotal, unit);
+                    totalDisplayText = this.formatNumber(convertedTotal, decimals) + ` ${unitLabel}${frequencySuffix}`;
+                }
+                
+                dailyFoodValue.textContent = totalDisplayText;
                 
                 // Build HTML for individual food amounts
                 const foodAmountsHTML = foodBreakdowns.map(breakdown => {
@@ -1311,11 +1519,23 @@
                         `;
                     } else {
                         // For multi-day calculations: show total amount for all days
-                        // But if in per-meal mode, multiply by meals per day as well
-                        const totalGramsForDays = this.showPerMeal 
-                            ? (breakdown.dailyGrams / this.mealsPerDay) * numDays * this.mealsPerDay
-                            : breakdown.dailyGrams * numDays;
-                        const convertedAmount = this.convertUnits(totalGramsForDays, unit);
+                        let amountDisplay;
+                        if (unit === 'cups') {
+                            // For cups, use pre-calculated cups value
+                            if (breakdown.dailyCups !== null) {
+                                const totalCupsForDays = breakdown.dailyCups * numDays;
+                                amountDisplay = `${this.formatNumber(totalCupsForDays, decimals)} ${unitLabel}`;
+                            } else {
+                                amountDisplay = `<span class="dog-calculator-warning" title="Cups only available for foods with kcal/cup measurement">N/A</span>`;
+                            }
+                        } else {
+                            // For other units, calculate from grams
+                            const totalGramsForDays = this.showPerMeal 
+                                ? (breakdown.dailyGrams / this.mealsPerDay) * numDays * this.mealsPerDay
+                                : breakdown.dailyGrams * numDays;
+                            const convertedAmount = this.convertUnits(totalGramsForDays, unit);
+                            amountDisplay = `${this.formatNumber(convertedAmount, decimals)} ${unitLabel}`;
+                        }
                         
                         return `
                             <div class="dog-calculator-food-amount-item">
@@ -1325,7 +1545,7 @@
                                     ${lockIndicator}
                                 </div>
                                 <div class="dog-calculator-food-amount-value">
-                                    ${this.formatNumber(convertedAmount, decimals)} ${unitLabel}
+                                    ${amountDisplay}
                                 </div>
                             </div>
                         `;
@@ -1334,7 +1554,6 @@
                 
                 // Calculate and display total
                 const totalFoodGrams = totalDailyGrams * numDays;
-                const totalConverted = this.convertUnits(totalFoodGrams, unit);
                 
                 // Update the display
                 if (foodAmountsList) {
@@ -1342,7 +1561,27 @@
                 }
                 
                 if (totalAmountDisplay) {
-                    totalAmountDisplay.textContent = `${this.formatNumber(totalConverted, decimals)} ${unitLabel}`;
+                    if (unit === 'cups') {
+                        // For cups total, check if all foods can be converted
+                        const validForCups = foodBreakdowns.filter(b => b.percentage > 0)
+                            .every(b => b.dailyCups !== null && b.dailyCups !== undefined);
+                        
+                        if (validForCups) {
+                            // Calculate total cups using pre-calculated values
+                            let totalCups = 0;
+                            foodBreakdowns.forEach(breakdown => {
+                                if (breakdown.percentage > 0 && breakdown.dailyCups !== null) {
+                                    totalCups += breakdown.dailyCups * numDays;
+                                }
+                            });
+                            totalAmountDisplay.textContent = `${this.formatNumber(totalCups, decimals)} ${unitLabel}`;
+                        } else {
+                            totalAmountDisplay.textContent = 'Mixed units - see individual amounts';
+                        }
+                    } else {
+                        const totalConverted = this.convertUnits(totalFoodGrams, unit);
+                        totalAmountDisplay.textContent = `${this.formatNumber(totalConverted, decimals)} ${unitLabel}`;
+                    }
                 }
                 
                 foodAmountsSection.style.display = 'block';
diff --git a/sundog-dog-food-calculator.js b/sundog-dog-food-calculator.js
index e713eb5..291c924 100644
--- a/sundog-dog-food-calculator.js
+++ b/sundog-dog-food-calculator.js
@@ -512,9 +512,8 @@
         .dog-calculator-container .dog-calculator-meal-input {
             display: inline-flex;
             align-items: center;
-            justify-content: center;
             gap: 6px;
-            margin-left: auto;
+            margin: 0 auto;
         }
 
         .dog-calculator-container .dog-calculator-meal-input span {
@@ -675,6 +674,19 @@
             background: #f19a5f;
             color: white;
         }
+
+        .dog-calculator-container.theme-dark .dog-calculator-unit-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            border-color: var(--border-color);
+            background: var(--bg-tertiary);
+            color: var(--text-secondary);
+        }
+
+        .dog-calculator-container.theme-dark .dog-calculator-unit-btn:disabled:hover {
+            border-color: var(--border-color);
+            background: var(--bg-tertiary);
+        }
             
         .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%);
@@ -868,6 +880,19 @@
                 background: #f19a5f;
                 color: white;
             }
+
+            .dog-calculator-container.theme-system .dog-calculator-unit-btn:disabled {
+                opacity: 0.5;
+                cursor: not-allowed;
+                border-color: var(--border-color);
+                background: var(--bg-tertiary);
+                color: var(--text-secondary);
+            }
+
+            .dog-calculator-container.theme-system .dog-calculator-unit-btn:disabled:hover {
+                border-color: var(--border-color);
+                background: var(--bg-tertiary);
+            }
             
             .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%);
@@ -1855,6 +1880,20 @@
             color: white;
         }
 
+        .dog-calculator-unit-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            border-color: var(--border-color);
+            background: var(--bg-tertiary);
+            color: var(--text-secondary);
+        }
+
+        .dog-calculator-unit-btn:disabled:hover {
+            border-color: var(--border-color);
+            background: var(--bg-tertiary);
+            transform: none;
+        }
+
         /* Hidden unit select for compatibility */
         .dog-calculator-unit-select-hidden {
             display: none;
@@ -2180,6 +2219,7 @@ const CALCULATOR_CONFIG = {
                         <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>
+                        <button type="button" class="dog-calculator-unit-btn" data-unit="cups" id="cupsButton" disabled title="Available when using kcal/cup measurement">cups</button>
                     </div>
 
                     <!-- Daily Total Results -->
@@ -2196,6 +2236,7 @@ const CALCULATOR_CONFIG = {
                         <option value="kg">kilograms (kg)</option>
                         <option value="oz">ounces (oz)</option>
                         <option value="lb">pounds (lb)</option>
+                        <option value="cups">cups</option>
                     </select>
 
                     <div class="dog-calculator-food-amounts-section" id="foodAmountsSection" style="display: none;">
@@ -2867,7 +2908,36 @@ const CALCULATOR_CONFIG = {
                 if (energyInput) {
                     energyInput.addEventListener('input', () => {
                         this.updateFoodSourceData(id, 'energy', energyInput.value);
-                        this.updateFoodCalculations();
+                        
+                        // Auto-select cups when entering energy for kcal/cup
+                        const foodSource = this.foodSources.find(fs => fs.id === id);
+                        if (foodSource && foodSource.energyUnit === 'kcalcup' && parseFloat(energyInput.value) > 0) {
+                            const unitSelect = this.container.querySelector('#unit');
+                            const cupsButton = this.container.querySelector('#cupsButton');
+                            
+                            // First check if cups button will be enabled after update
+                            const willEnableCups = this.foodSources.some(fs => 
+                                fs.energyUnit === 'kcalcup' && fs.energy && parseFloat(fs.energy) > 0
+                            );
+                            
+                            if (willEnableCups && unitSelect) {
+                                // Set cups BEFORE updating calculations
+                                unitSelect.value = 'cups';
+                                unitSelect.setAttribute('value', 'cups');
+                                this.setActiveUnitButton('cups');
+                                
+                                // Enable the cups button manually since we know it will be valid
+                                if (cupsButton) {
+                                    cupsButton.disabled = false;
+                                    cupsButton.title = 'Show amounts in cups';
+                                }
+                            }
+                            
+                            // Now update calculations with cups already selected
+                            this.updateFoodCalculations();
+                        } else {
+                            this.updateFoodCalculations();
+                        }
                     });
                     energyInput.addEventListener('blur', () => this.validateFoodSourceEnergy(id));
                 }
@@ -2875,7 +2945,54 @@ const CALCULATOR_CONFIG = {
                 if (energyUnitSelect) {
                     energyUnitSelect.addEventListener('change', () => {
                         this.updateFoodSourceData(id, 'energyUnit', energyUnitSelect.value);
-                        this.updateFoodCalculations();
+                        
+                        // Auto-select the most appropriate unit based on energy unit
+                        const unitSelect = this.container.querySelector('#unit');
+                        const energyInput = document.getElementById(`energy-${id}`);
+                        
+                        if (unitSelect) {
+                            switch(energyUnitSelect.value) {
+                                case 'kcalcup':
+                                    // Check if we have energy value to enable cups
+                                    const foodSource = this.foodSources.find(fs => fs.id === id);
+                                    if (foodSource && foodSource.energy && parseFloat(foodSource.energy) > 0) {
+                                        // Set cups BEFORE updating calculations
+                                        unitSelect.value = 'cups';
+                                        unitSelect.setAttribute('value', 'cups');
+                                        this.setActiveUnitButton('cups');
+                                        
+                                        // Enable the cups button manually
+                                        const cupsButton = this.container.querySelector('#cupsButton');
+                                        if (cupsButton) {
+                                            cupsButton.disabled = false;
+                                            cupsButton.title = 'Show amounts in cups';
+                                        }
+                                    }
+                                    this.updateFoodCalculations();
+                                    break;
+                                case 'kcal100g':
+                                    // For kcal/100g, select grams
+                                    unitSelect.value = 'g';
+                                    this.setActiveUnitButton('g');
+                                    this.updateFoodCalculations();
+                                    break;
+                                case 'kcalkg':
+                                    // For kcal/kg, also select grams (or could be kg)
+                                    unitSelect.value = 'g';
+                                    this.setActiveUnitButton('g');
+                                    this.updateFoodCalculations();
+                                    break;
+                                case 'kcalcan':
+                                    // For kcal/can, use grams as default (or ounces in imperial)
+                                    unitSelect.value = this.isImperial ? 'oz' : 'g';
+                                    this.setActiveUnitButton(unitSelect.value);
+                                    this.updateFoodCalculations();
+                                    break;
+                            }
+                        } else {
+                            // No unit select, just update calculations
+                            this.updateFoodCalculations();
+                        }
                     });
                 }
 
@@ -3273,7 +3390,7 @@ const CALCULATOR_CONFIG = {
                 }
             }
 
-            convertUnits(grams, unit) {
+            convertUnits(grams, unit, foodSource = null) {
                 switch (unit) {
                     case 'kg':
                         return grams / 1000;
@@ -3281,6 +3398,18 @@ const CALCULATOR_CONFIG = {
                         return grams / 28.3495;
                     case 'lb':
                         return grams / 453.592;
+                    case 'cups':
+                        // For cups, we need to convert from grams worth of calories to cups
+                        if (foodSource && foodSource.energyUnit === 'kcalcup' && foodSource.energy) {
+                            // Get calories per 100g for this food
+                            const caloriesPerGram = this.getFoodSourceEnergyPer100g(foodSource) / 100;
+                            // Calculate total calories represented by these grams
+                            const totalCalories = grams * caloriesPerGram;
+                            // Divide by calories per cup to get number of cups
+                            const caloriesPerCup = parseFloat(foodSource.energy);
+                            return totalCalories / caloriesPerCup;
+                        }
+                        return null; // Cannot convert to cups without kcal/cup
                     default:
                         return grams;
                 }
@@ -3384,6 +3513,31 @@ const CALCULATOR_CONFIG = {
                 this.sendHeightToParent();
             }
 
+            updateCupsButtonState() {
+                const cupsButton = this.container.querySelector('#cupsButton');
+                if (!cupsButton) return;
+                
+                // Check if any food source has kcal/cup selected
+                const hasKcalCup = this.foodSources.some(fs => 
+                    fs.energyUnit === 'kcalcup' && fs.energy && parseFloat(fs.energy) > 0
+                );
+                
+                if (hasKcalCup) {
+                    cupsButton.disabled = false;
+                    cupsButton.title = 'Show amounts in cups';
+                } else {
+                    cupsButton.disabled = true;
+                    cupsButton.title = 'Available when using kcal/cup measurement';
+                    
+                    // If cups was selected, switch back to grams
+                    const unitSelect = this.container.querySelector('#unit');
+                    if (unitSelect && unitSelect.value === 'cups') {
+                        unitSelect.value = 'g';
+                        this.setActiveUnitButton('g');
+                    }
+                }
+            }
+
             updateFoodCalculations() {
                 if (this.currentMER === 0) return;
                 
@@ -3397,15 +3551,32 @@ const CALCULATOR_CONFIG = {
                 const foodBreakdownResults = this.container.querySelector('#foodBreakdownResults');
                 const foodBreakdownList = this.container.querySelector('#foodBreakdownList');
                 const feedingConfig = this.container.querySelector('#feedingConfig');
+                
+                // Update cups button state
+                this.updateCupsButtonState();
 
                 if (!daysInput || !unitSelect || !dailyFoodResults || !dailyFoodValue || !foodAmountsSection) {
                     return;
                 }
 
                 const days = daysInput.value;
-                const unit = unitSelect.value;
-                const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : 'lb';
-                const decimals = unit === 'g' ? 0 : unit === 'kg' ? 2 : 1;
+                let unit = unitSelect.value;
+                
+                // Failsafe: if unit is empty string but cups button is active, use 'cups'
+                if (!unit || unit === '') {
+                    const activeButton = this.container.querySelector('.dog-calculator-unit-btn.active');
+                    if (activeButton) {
+                        unit = activeButton.dataset.unit || 'g';
+                    } else {
+                        unit = 'g'; // Default fallback
+                    }
+                }
+                
+                const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : unit === 'lb' ? 'lb' : 'cups';
+                const decimals = unit === 'g' ? 0 : unit === 'kg' ? 2 : unit === 'cups' ? 1 : 1;
+                
+                // Debug: log what unit is being used
+                console.log('UpdateFoodCalculations - unit:', unit, 'unitLabel:', unitLabel);
                 
                 // Determine frequency suffix for display
                 const frequencySuffix = this.showPerMeal ? '/meal' : '/day';
@@ -3442,10 +3613,30 @@ const CALCULATOR_CONFIG = {
                     
                     if (energyPer100g && energyPer100g > 0.1 && fs.percentage > 0) {
                         const dailyCaloriesForThisFood = (this.currentMER * fs.percentage) / 100;
-                        const dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
+                        let dailyGramsForThisFood;
+                        let dailyCupsForThisFood = null;
+                        
+                        // For kcal/cup, calculate cups directly from calories
+                        if (fs.energyUnit === 'kcalcup' && fs.energy) {
+                            const caloriesPerCup = parseFloat(fs.energy);
+                            dailyCupsForThisFood = dailyCaloriesForThisFood / caloriesPerCup;
+                            // We still need grams for total calculation, use approximation
+                            dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
+                            console.log('Cups calculation:', {
+                                caloriesPerCup,
+                                dailyCaloriesForThisFood,
+                                dailyCupsForThisFood,
+                                dailyGramsForThisFood
+                            });
+                        } else {
+                            // For other units, calculate grams normally
+                            dailyGramsForThisFood = (dailyCaloriesForThisFood / energyPer100g) * 100;
+                        }
                         
                         // Calculate per-meal amounts if needed
                         const displayGrams = this.showPerMeal ? dailyGramsForThisFood / this.mealsPerDay : dailyGramsForThisFood;
+                        const displayCups = dailyCupsForThisFood !== null ? 
+                            (this.showPerMeal ? dailyCupsForThisFood / this.mealsPerDay : dailyCupsForThisFood) : null;
                         const displayCalories = this.showPerMeal ? dailyCaloriesForThisFood / this.mealsPerDay : dailyCaloriesForThisFood;
                         
                         foodBreakdowns.push({
@@ -3453,10 +3644,13 @@ const CALCULATOR_CONFIG = {
                             percentage: fs.percentage,
                             dailyGrams: dailyGramsForThisFood,
                             displayGrams: displayGrams,
+                            dailyCups: dailyCupsForThisFood,
+                            displayCups: displayCups,
                             calories: dailyCaloriesForThisFood,
                             displayCalories: displayCalories,
                             isLocked: fs.isLocked,
-                            hasEnergyContent: true
+                            hasEnergyContent: true,
+                            foodSource: fs  // Store reference for cups conversion
                         });
                         
                         totalDailyGrams += dailyGramsForThisFood;
@@ -3468,10 +3662,13 @@ const CALCULATOR_CONFIG = {
                             percentage: fs.percentage,
                             dailyGrams: 0,
                             displayGrams: 0,
+                            dailyCups: null,
+                            displayCups: null,
                             calories: 0,
                             displayCalories: 0,
                             isLocked: fs.isLocked,
-                            hasEnergyContent: false
+                            hasEnergyContent: false,
+                            foodSource: fs  // Store reference for cups conversion
                         });
                     }
                 });
@@ -3535,7 +3732,15 @@ const CALCULATOR_CONFIG = {
                 dailyFoodResults.style.display = 'block';
                 
                 // Show feeding configuration when we have valid foods
-                if (feedingConfig) feedingConfig.style.display = 'block';
+                if (feedingConfig) {
+                    feedingConfig.style.display = 'block';
+                    
+                    // Ensure "Per day" is checked when feeding config becomes visible
+                    const showDaily = this.container.querySelector('#showDaily');
+                    if (showDaily && !showDaily.checked && !this.container.querySelector('#showPerMeal').checked) {
+                        showDaily.checked = true;
+                    }
+                }
                 
                 // Show unit buttons when daily results are shown
                 const unitButtons = this.container.querySelector('#unitButtons');
@@ -3544,9 +3749,21 @@ const CALCULATOR_CONFIG = {
                 // Update per-food breakdown
                 if (foodBreakdownList && foodBreakdowns.length > 1) {
                     const breakdownHTML = foodBreakdowns.map(breakdown => {
-                        const valueContent = breakdown.hasEnergyContent 
-                            ? `${this.formatNumber(this.convertUnits(breakdown.displayGrams, unit), decimals)} ${unitLabel}${frequencySuffix}`
-                            : `<span class="dog-calculator-warning" title="Enter energy content to calculate amount">⚠️</span>`;
+                        let valueContent;
+                        if (breakdown.hasEnergyContent) {
+                            if (unit === 'cups') {
+                                // For cups, use the pre-calculated cups value if available
+                                if (breakdown.displayCups !== null) {
+                                    valueContent = `${this.formatNumber(breakdown.displayCups, decimals)} ${unitLabel}${frequencySuffix}`;
+                                } else {
+                                    valueContent = `<span class="dog-calculator-warning" title="Cups only available for foods with kcal/cup measurement">N/A</span>`;
+                                }
+                            } else {
+                                valueContent = `${this.formatNumber(this.convertUnits(breakdown.displayGrams, unit), decimals)} ${unitLabel}${frequencySuffix}`;
+                            }
+                        } else {
+                            valueContent = `<span class="dog-calculator-warning" title="Enter energy content to calculate amount">⚠️</span>`;
+                        }
                         
                         return `
                             <div class="dog-calculator-food-result-item">
@@ -3566,8 +3783,40 @@ const CALCULATOR_CONFIG = {
                 
                 // Update daily food value with correct units
                 const displayTotal = this.showPerMeal ? totalDailyGrams / this.mealsPerDay : totalDailyGrams;
-                const convertedTotal = this.convertUnits(displayTotal, unit);
-                dailyFoodValue.textContent = this.formatNumber(convertedTotal, decimals) + ` ${unitLabel}${frequencySuffix}`;
+                let convertedTotal;
+                let totalDisplayText;
+                
+                if (unit === 'cups') {
+                    console.log('Unit is cups, checking validity...');
+                    // For cups, we can only show total if all foods with percentage > 0 have kcal/cup
+                    const validForCups = foodBreakdowns.filter(b => b.percentage > 0)
+                        .every(b => b.displayCups !== null && b.displayCups !== undefined);
+                    
+                    console.log('Valid for cups?', validForCups, 'Breakdowns:', foodBreakdowns);
+                    
+                    if (validForCups) {
+                        // Calculate total cups using pre-calculated values
+                        let totalCups = 0;
+                        foodBreakdowns.forEach(breakdown => {
+                            if (breakdown.percentage > 0 && breakdown.displayCups !== null) {
+                                totalCups += breakdown.displayCups;
+                            }
+                        });
+                        console.log('Total cups display:', {
+                            totalCups,
+                            displayTotal,
+                            foodBreakdowns: foodBreakdowns.map(b => ({ name: b.name, displayCups: b.displayCups }))
+                        });
+                        totalDisplayText = this.formatNumber(totalCups, decimals) + ` ${unitLabel}${frequencySuffix}`;
+                    } else {
+                        totalDisplayText = 'Mixed units - see breakdown';
+                    }
+                } else {
+                    convertedTotal = this.convertUnits(displayTotal, unit);
+                    totalDisplayText = this.formatNumber(convertedTotal, decimals) + ` ${unitLabel}${frequencySuffix}`;
+                }
+                
+                dailyFoodValue.textContent = totalDisplayText;
                 
                 // Build HTML for individual food amounts
                 const foodAmountsHTML = foodBreakdowns.map(breakdown => {
@@ -3589,11 +3838,23 @@ const CALCULATOR_CONFIG = {
                         `;
                     } else {
                         // For multi-day calculations: show total amount for all days
-                        // But if in per-meal mode, multiply by meals per day as well
-                        const totalGramsForDays = this.showPerMeal 
-                            ? (breakdown.dailyGrams / this.mealsPerDay) * numDays * this.mealsPerDay
-                            : breakdown.dailyGrams * numDays;
-                        const convertedAmount = this.convertUnits(totalGramsForDays, unit);
+                        let amountDisplay;
+                        if (unit === 'cups') {
+                            // For cups, use pre-calculated cups value
+                            if (breakdown.dailyCups !== null) {
+                                const totalCupsForDays = breakdown.dailyCups * numDays;
+                                amountDisplay = `${this.formatNumber(totalCupsForDays, decimals)} ${unitLabel}`;
+                            } else {
+                                amountDisplay = `<span class="dog-calculator-warning" title="Cups only available for foods with kcal/cup measurement">N/A</span>`;
+                            }
+                        } else {
+                            // For other units, calculate from grams
+                            const totalGramsForDays = this.showPerMeal 
+                                ? (breakdown.dailyGrams / this.mealsPerDay) * numDays * this.mealsPerDay
+                                : breakdown.dailyGrams * numDays;
+                            const convertedAmount = this.convertUnits(totalGramsForDays, unit);
+                            amountDisplay = `${this.formatNumber(convertedAmount, decimals)} ${unitLabel}`;
+                        }
                         
                         return `
                             <div class="dog-calculator-food-amount-item">
@@ -3603,7 +3864,7 @@ const CALCULATOR_CONFIG = {
                                     ${lockIndicator}
                                 </div>
                                 <div class="dog-calculator-food-amount-value">
-                                    ${this.formatNumber(convertedAmount, decimals)} ${unitLabel}
+                                    ${amountDisplay}
                                 </div>
                             </div>
                         `;
@@ -3612,7 +3873,6 @@ const CALCULATOR_CONFIG = {
                 
                 // Calculate and display total
                 const totalFoodGrams = totalDailyGrams * numDays;
-                const totalConverted = this.convertUnits(totalFoodGrams, unit);
                 
                 // Update the display
                 if (foodAmountsList) {
@@ -3620,7 +3880,27 @@ const CALCULATOR_CONFIG = {
                 }
                 
                 if (totalAmountDisplay) {
-                    totalAmountDisplay.textContent = `${this.formatNumber(totalConverted, decimals)} ${unitLabel}`;
+                    if (unit === 'cups') {
+                        // For cups total, check if all foods can be converted
+                        const validForCups = foodBreakdowns.filter(b => b.percentage > 0)
+                            .every(b => b.dailyCups !== null && b.dailyCups !== undefined);
+                        
+                        if (validForCups) {
+                            // Calculate total cups using pre-calculated values
+                            let totalCups = 0;
+                            foodBreakdowns.forEach(breakdown => {
+                                if (breakdown.percentage > 0 && breakdown.dailyCups !== null) {
+                                    totalCups += breakdown.dailyCups * numDays;
+                                }
+                            });
+                            totalAmountDisplay.textContent = `${this.formatNumber(totalCups, decimals)} ${unitLabel}`;
+                        } else {
+                            totalAmountDisplay.textContent = 'Mixed units - see individual amounts';
+                        }
+                    } else {
+                        const totalConverted = this.convertUnits(totalFoodGrams, unit);
+                        totalAmountDisplay.textContent = `${this.formatNumber(totalConverted, decimals)} ${unitLabel}`;
+                    }
                 }
                 
                 foodAmountsSection.style.display = 'block';