From bbebe94e48217bc3cc10058668982fd21601f378 Mon Sep 17 00:00:00 2001
From: "d.viti" <d.viti@vargroup.it>
Date: Sat, 6 Sep 2025 15:18:42 +0200
Subject: [PATCH] Refactor calculators for improved clarity and maintainability

- Reformat HTML for readability and semantic structure - Refactor
JavaScript for modularity and robustness - Improve language switching
and translation logic - Enhance input validation and error handling -
Add missing DOM element checks and warnings - Update UI rendering for
results and utility lists - Remove unused code and streamline event
listeners
---
 pages/cost-calculator.html    | 2098 ++++++++++++++++++++++-----------
 pages/savings-calculator.html | 1977 ++++++++++++++++++++-----------
 2 files changed, 2720 insertions(+), 1355 deletions(-)
diff --git a/pages/cost-calculator.html b/pages/cost-calculator.html
index 9252100..46fb070 100644
--- a/pages/cost-calculator.html
+++ b/pages/cost-calculator.html
@@ -1,710 +1,1444 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="it">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Calcolatore Costi Elettricità Avanzato</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns"></script>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-    <style>
-        body { font-family: 'Inter', sans-serif; background-color: #f0f4f8; }
-        .card { background-color: white; border-radius: 12px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); padding: 1.5rem; margin-bottom: 1.5rem; }
-        .input-label { font-size: 0.875rem; font-weight: 500; color: #4a5568; margin-bottom: 0.5rem; }
-        .input-field, .select-field { width: 100%; padding: 0.75rem 1rem; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 1rem; transition: border-color 0.2s ease-in-out; background-color: white; }
-        .input-field:focus, .select-field:focus { outline: none; border-color: #4299e1; box-shadow: 0 0 0 3px rgba(66,153,225,0.5); }
-        .btn-primary { background-color: #4299e1; color: white; font-weight: 600; padding: 0.75rem 1.5rem; border-radius: 8px; transition: background-color 0.2s ease-in-out; cursor: pointer; border: none; }
-        .btn-primary:hover { background-color: #3182ce; }
-        .output-value { font-size: 1.25rem; font-weight: 700; color: #2c5282; }
-        .output-label { font-size: 0.8rem; color: #718096; }
-        #errorMessage { color: #e53e3e; background-color: #fed7d7; border: 1px solid #f56565; padding: 0.75rem; border-radius: 8px; margin-top: 1rem; text-align: center; }
-        .optional-section { border-top: 1px dashed #cbd5e0; margin-top: 1rem; padding-top: 1rem; }
-        .checkbox-label { font-size: 0.9rem; font-weight: 500; color: #4a5568; margin-left: 0.5rem; }
-        .lang-selector { padding: 0.3rem 0.6rem; font-size: 0.8rem; margin-left: 0.5rem; border-radius: 6px; }
-        .device-schedule-section { border-top: 1px solid #e2e8f0; margin-top: 1rem; padding-top: 1rem; }
-    </style>
-</head>
-<body class="min-h-screen flex flex-col items-center justify-center p-4 sm:p-6">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Calcolatore Costi Elettricità Avanzato</title>
+        <script src="https://cdn.tailwindcss.com"></script>
+        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns"></script>
+        <link
+            href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+            rel="stylesheet"
+        />
+        <style>
+            body {
+                font-family: "Inter", sans-serif;
+                background-color: #f0f4f8;
+            }
+            .card {
+                background-color: white;
+                border-radius: 12px;
+                box-shadow:
+                    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+                    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+                padding: 1.5rem;
+                margin-bottom: 1.5rem;
+            }
+            .input-label {
+                font-size: 0.875rem;
+                font-weight: 500;
+                color: #4a5568;
+                margin-bottom: 0.5rem;
+            }
+            .input-field,
+            .select-field {
+                width: 100%;
+                padding: 0.75rem 1rem;
+                border: 1px solid #e2e8f0;
+                border-radius: 8px;
+                font-size: 1rem;
+                transition: border-color 0.2s ease-in-out;
+                background-color: white;
+            }
+            .input-field:focus,
+            .select-field:focus {
+                outline: none;
+                border-color: #4299e1;
+                box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+            }
+            .btn-primary {
+                background-color: #4299e1;
+                color: white;
+                font-weight: 600;
+                padding: 0.75rem 1.5rem;
+                border-radius: 8px;
+                transition: background-color 0.2s ease-in-out;
+                cursor: pointer;
+                border: none;
+            }
+            .btn-primary:hover {
+                background-color: #3182ce;
+            }
+            .output-value {
+                font-size: 1.25rem;
+                font-weight: 700;
+                color: #2c5282;
+            }
+            .output-label {
+                font-size: 0.8rem;
+                color: #718096;
+            }
+            #errorMessage {
+                color: #e53e3e;
+                background-color: #fed7d7;
+                border: 1px solid #f56565;
+                padding: 0.75rem;
+                border-radius: 8px;
+                margin-top: 1rem;
+                text-align: center;
+            }
+            .optional-section {
+                border-top: 1px dashed #cbd5e0;
+                margin-top: 1rem;
+                padding-top: 1rem;
+            }
+            .checkbox-label {
+                font-size: 0.9rem;
+                font-weight: 500;
+                color: #4a5568;
+                margin-left: 0.5rem;
+            }
+            .lang-selector {
+                padding: 0.3rem 0.6rem;
+                font-size: 0.8rem;
+                margin-left: 0.5rem;
+                border-radius: 6px;
+            }
+            .device-schedule-section {
+                border-top: 1px solid #e2e8f0;
+                margin-top: 1rem;
+                padding-top: 1rem;
+            }
+        </style>
+    </head>
+    <body
+        class="min-h-screen flex flex-col items-center justify-center p-4 sm:p-6"
+    >
+        <div class="w-full max-w-4xl">
+            <header class="text-center mb-6 relative">
+                <div class="absolute top-0 right-0 mt-2 mr-2">
+                    <select
+                        id="languageSelector"
+                        class="select-field lang-selector"
+                    >
+                        <option value="it">Italiano</option>
+                        <option value="en">English</option>
+                    </select>
+                </div>
+                <h1
+                    id="mainTitle"
+                    class="text-3xl sm:text-4xl font-bold text-gray-800 pt-8"
+                >
+                    Calcolo Avanzato Consumi e Costi Elettricità
+                </h1>
+                <p id="subTitle" class="text-gray-600 mt-2">
+                    Includi fotovoltaico e batteria per una stima più completa.
+                </p>
+            </header>
 
-    <div class="w-full max-w-4xl">
-        <header class="text-center mb-6 relative">
-            <div class="absolute top-0 right-0 mt-2 mr-2">
-                <select id="languageSelector" class="select-field lang-selector">
-                    <option value="it">Italiano</option>
-                    <option value="en">English</option>
-                </select>
-            </div>
-            <h1 id="mainTitle" class="text-3xl sm:text-4xl font-bold text-gray-800 pt-8">Calcolo Avanzato Consumi e Costi Elettricità</h1>
-            <p id="subTitle" class="text-gray-600 mt-2">Includi fotovoltaico e batteria per una stima più completa.</p>
-        </header>
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                <!-- Colonna Input -->
+                <div class="lg:col-span-1 card">
+                    <h2
+                        id="dataInputTitle"
+                        class="text-xl font-semibold text-gray-700 mb-6"
+                    >
+                        Inserisci i Dati
+                    </h2>
 
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
-            <!-- Colonna Input -->
-            <div class="lg:col-span-1 card">
-                <h2 id="dataInputTitle" class="text-xl font-semibold text-gray-700 mb-6">Inserisci i Dati</h2>
-                
-                <div class="space-y-3">
-                    <div>
-                        <label for="power" id="labelDevicePower" class="input-label block">Consumo Medio Dispositivo (Watt)</label>
-                        <input type="number" id="power" class="input-field" placeholder="es. 100" value="100">
-                    </div>
-                    <div class="device-schedule-section">
-                        <label for="deviceStartHour" id="labelDeviceStartHour" class="input-label block">Ora Inizio Funzionamento Dispositivo</label>
-                        <input type="number" id="deviceStartHour" class="input-field" placeholder="0-23 (es. 8)" value="8" min="0" max="23">
-                        
-                        <label for="deviceOperatingHours" id="labelDeviceOpHours" class="input-label block mt-2">Durata Funzionamento Dispositivo (Ore)</label>
-                        <input type="number" id="deviceOperatingHours" class="input-field" placeholder="1-24 (es. 10)" value="10" min="1">
-                    </div>
-
-                    <div>
-                        <label for="cost" id="labelGridCost" class="input-label block mt-3">Costo Energia da Rete (€/kWh)</label>
-                        <input type="number" id="cost" class="input-field" placeholder="es. 0,25" value="0.25" step="0.01">
-                    </div>
-                    <div>
-                        <label for="time" id="labelSimDuration" class="input-label block">Durata Simulazione (Ore)</label>
-                        <input type="number" id="time" class="input-field" placeholder="es. 24" value="24" min="1">
-                    </div>
-
-                    <!-- Sezione Fotovoltaico -->
-                    <div class="optional-section">
-                        <div class="flex items-center mb-2">
-                            <input type="checkbox" id="includePv" class="rounded">
-                            <label for="includePv" id="labelIncludePv" class="checkbox-label">Includi Impianto Fotovoltaico</label>
+                    <div class="space-y-3">
+                        <div>
+                            <label
+                                for="power"
+                                id="labelDevicePower"
+                                class="input-label block"
+                                >Consumo Medio Dispositivo (Watt)</label
+                            >
+                            <input
+                                type="number"
+                                id="power"
+                                class="input-field"
+                                placeholder="es. 100"
+                                value="100"
+                            />
                         </div>
-                        <div id="pvInputs" class="hidden space-y-3 pl-2">
-                            <div>
-                                <label for="pvPeakPower" id="labelPvPeakPower" class="input-label block">Potenza Picco Impianto FV (kWp)</label>
-                                <input type="number" id="pvPeakPower" class="input-field" placeholder="es. 3" value="3" step="0.1">
+                        <div class="device-schedule-section">
+                            <label
+                                for="deviceStartHour"
+                                id="labelDeviceStartHour"
+                                class="input-label block"
+                                >Ora Inizio Funzionamento Dispositivo</label
+                            >
+                            <input
+                                type="number"
+                                id="deviceStartHour"
+                                class="input-field"
+                                placeholder="0-23 (es. 8)"
+                                value="8"
+                                min="0"
+                                max="23"
+                            />
+
+                            <label
+                                for="deviceOperatingHours"
+                                id="labelDeviceOpHours"
+                                class="input-label block mt-2"
+                                >Durata Funzionamento Dispositivo (Ore)</label
+                            >
+                            <input
+                                type="number"
+                                id="deviceOperatingHours"
+                                class="input-field"
+                                placeholder="1-24 (es. 10)"
+                                value="10"
+                                min="1"
+                            />
+                        </div>
+
+                        <div>
+                            <label
+                                for="cost"
+                                id="labelGridCost"
+                                class="input-label block mt-3"
+                                >Costo Energia da Rete (€/kWh)</label
+                            >
+                            <input
+                                type="number"
+                                id="cost"
+                                class="input-field"
+                                placeholder="es. 0,25"
+                                value="0.25"
+                                step="0.01"
+                            />
+                        </div>
+                        <div>
+                            <label
+                                for="time"
+                                id="labelSimDuration"
+                                class="input-label block"
+                                >Durata Simulazione (Ore)</label
+                            >
+                            <input
+                                type="number"
+                                id="time"
+                                class="input-field"
+                                placeholder="es. 24"
+                                value="24"
+                                min="1"
+                            />
+                        </div>
+
+                        <!-- Sezione Fotovoltaico -->
+                        <div class="optional-section">
+                            <div class="flex items-center mb-2">
+                                <input
+                                    type="checkbox"
+                                    id="includePv"
+                                    class="rounded"
+                                />
+                                <label
+                                    for="includePv"
+                                    id="labelIncludePv"
+                                    class="checkbox-label"
+                                    >Includi Impianto Fotovoltaico</label
+                                >
                             </div>
-                            <div>
-                                <label for="geographicZone" id="labelGeoZone" class="input-label block">Paese / Regione</label>
-                                <select id="geographicZone" class="select-field">
-                                     <!-- Options will be populated by JS -->
-                                </select>
+                            <div id="pvInputs" class="hidden space-y-3 pl-2">
+                                <div>
+                                    <label
+                                        for="pvPeakPower"
+                                        id="labelPvPeakPower"
+                                        class="input-label block"
+                                        >Potenza Picco Impianto FV (kWp)</label
+                                    >
+                                    <input
+                                        type="number"
+                                        id="pvPeakPower"
+                                        class="input-field"
+                                        placeholder="es. 3"
+                                        value="3"
+                                        step="0.1"
+                                    />
+                                </div>
+                                <div>
+                                    <label
+                                        for="geographicZone"
+                                        id="labelGeoZone"
+                                        class="input-label block"
+                                        >Paese / Regione</label
+                                    >
+                                    <select
+                                        id="geographicZone"
+                                        class="select-field"
+                                    >
+                                        <!-- Options will be populated by JS -->
+                                    </select>
+                                </div>
+                                <div>
+                                    <label
+                                        for="season"
+                                        id="labelSeason"
+                                        class="input-label block"
+                                        >Stagione</label
+                                    >
+                                    <select id="season" class="select-field">
+                                        <!-- Options will be populated by JS -->
+                                    </select>
+                                </div>
+                                <div>
+                                    <label
+                                        for="dayType"
+                                        id="labelDayType"
+                                        class="input-label block"
+                                        >Tipo di Giornata</label
+                                    >
+                                    <select id="dayType" class="select-field">
+                                        <!-- Options will be populated by JS -->
+                                    </select>
+                                </div>
+                                <div class="flex items-center mt-1">
+                                    <input
+                                        type="checkbox"
+                                        id="useSimulatedWeather"
+                                        class="rounded"
+                                    />
+                                    <label
+                                        for="useSimulatedWeather"
+                                        id="labelUseSimulatedWeather"
+                                        class="checkbox-label text-xs"
+                                        >Usa Meteo Attuale (Simulato)</label
+                                    >
+                                </div>
                             </div>
-                            <div>
-                                <label for="season" id="labelSeason" class="input-label block">Stagione</label>
-                                <select id="season" class="select-field">
-                                    <!-- Options will be populated by JS -->
-                                </select>
+                        </div>
+
+                        <!-- Sezione Batteria -->
+                        <div class="optional-section">
+                            <div class="flex items-center mb-2">
+                                <input
+                                    type="checkbox"
+                                    id="includeBattery"
+                                    class="rounded"
+                                />
+                                <label
+                                    for="includeBattery"
+                                    id="labelIncludeBattery"
+                                    class="checkbox-label"
+                                    >Includi Batteria di Accumulo</label
+                                >
                             </div>
-                             <div>
-                                <label for="dayType" id="labelDayType" class="input-label block">Tipo di Giornata</label>
-                                <select id="dayType" class="select-field">
-                                    <!-- Options will be populated by JS -->
-                                </select>
-                            </div>
-                            <div class="flex items-center mt-1">
-                                <input type="checkbox" id="useSimulatedWeather" class="rounded">
-                                <label for="useSimulatedWeather" id="labelUseSimulatedWeather" class="checkbox-label text-xs">Usa Meteo Attuale (Simulato)</label>
+                            <div
+                                id="batteryInputs"
+                                class="hidden space-y-3 pl-2"
+                            >
+                                <div>
+                                    <label
+                                        for="batteryCapacity"
+                                        id="labelBatteryCapacity"
+                                        class="input-label block"
+                                        >Capacità Batteria (kWh)</label
+                                    >
+                                    <input
+                                        type="number"
+                                        id="batteryCapacity"
+                                        class="input-field"
+                                        placeholder="es. 5"
+                                        value="5"
+                                        step="0.1"
+                                    />
+                                </div>
+                                <div>
+                                    <label
+                                        for="initialBatteryCharge"
+                                        id="labelInitialBattery"
+                                        class="input-label block"
+                                        >Carica Iniziale Batteria (%)</label
+                                    >
+                                    <input
+                                        type="number"
+                                        id="initialBatteryCharge"
+                                        class="input-field"
+                                        placeholder="es. 50"
+                                        value="50"
+                                        min="0"
+                                        max="100"
+                                    />
+                                </div>
                             </div>
                         </div>
                     </div>
 
-                    <!-- Sezione Batteria -->
-                    <div class="optional-section">
-                        <div class="flex items-center mb-2">
-                            <input type="checkbox" id="includeBattery" class="rounded">
-                            <label for="includeBattery" id="labelIncludeBattery" class="checkbox-label">Includi Batteria di Accumulo</label>
-                        </div>
-                        <div id="batteryInputs" class="hidden space-y-3 pl-2">
-                            <div>
-                                <label for="batteryCapacity" id="labelBatteryCapacity" class="input-label block">Capacità Batteria (kWh)</label>
-                                <input type="number" id="batteryCapacity" class="input-field" placeholder="es. 5" value="5" step="0.1">
-                            </div>
-                            <div>
-                                <label for="initialBatteryCharge" id="labelInitialBattery" class="input-label block">Carica Iniziale Batteria (%)</label>
-                                <input type="number" id="initialBatteryCharge" class="input-field" placeholder="es. 50" value="50" min="0" max="100">
-                            </div>
-                        </div>
-                    </div>
+                    <button id="calculateBtn" class="btn-primary w-full mt-6">
+                        Calcola
+                    </button>
+                    <div id="errorMessage" class="hidden mt-4"></div>
                 </div>
 
-                <button id="calculateBtn" class="btn-primary w-full mt-6">Calcola</button>
-                <div id="errorMessage" class="hidden mt-4"></div>
-            </div>
-
-            <!-- Colonna Output e Grafico -->
-            <div class="lg:col-span-2">
-                <div class="card">
-                    <h2 id="resultsTitle" class="text-xl font-semibold text-gray-700 mb-4">Risultati Stimati</h2>
-                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 mb-4">
-                        <div class="text-center p-2 bg-gray-50 rounded-lg">
-                            <p id="energyConsumedDevice" class="output-value">--</p>
-                            <p id="labelDeviceConsumption" class="output-label">Consumo Dispositivo</p>
-                        </div>
-                        <div class="text-center p-2 bg-green-50 rounded-lg">
-                            <p id="energyFromPv" class="output-value">--</p>
-                            <p id="labelEnergyFromPv" class="output-label">Energia da FV</p>
-                        </div>
-                        <div class="text-center p-2 bg-blue-50 rounded-lg">
-                            <p id="energyFromBattery" class="output-value">--</p>
-                            <p id="labelEnergyFromBattery" class="output-label">Energia da Batteria</p>
-                        </div>
-                         <div class="text-center p-2 bg-orange-50 rounded-lg">
-                            <p id="energyToBattery" class="output-value">--</p>
-                            <p id="labelEnergyToBattery" class="output-label">Energia a Batteria</p>
-                        </div>
-                        <div class="text-center p-2 bg-red-50 rounded-lg">
-                            <p id="energyFromGrid" class="output-value">--</p>
-                            <p id="labelEnergyFromGrid" class="output-label">Prelievo da Rete</p>
-                        </div>
-                        <div class="text-center p-2 bg-purple-50 rounded-lg">
-                            <p id="totalCost" class="output-value">--</p>
-                            <p id="labelTotalGridCost" class="output-label">Costo Totale Rete</p>
+                <!-- Colonna Output e Grafico -->
+                <div class="lg:col-span-2">
+                    <div class="card">
+                        <h2
+                            id="resultsTitle"
+                            class="text-xl font-semibold text-gray-700 mb-4"
+                        >
+                            Risultati Stimati
+                        </h2>
+                        <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 mb-4">
+                            <div class="text-center p-2 bg-gray-50 rounded-lg">
+                                <p
+                                    id="energyConsumedDevice"
+                                    class="output-value"
+                                >
+                                    --
+                                </p>
+                                <p
+                                    id="labelDeviceConsumption"
+                                    class="output-label"
+                                >
+                                    Consumo Dispositivo
+                                </p>
+                            </div>
+                            <div class="text-center p-2 bg-green-50 rounded-lg">
+                                <p id="energyFromPv" class="output-value">--</p>
+                                <p id="labelEnergyFromPv" class="output-label">
+                                    Energia da FV
+                                </p>
+                            </div>
+                            <div class="text-center p-2 bg-blue-50 rounded-lg">
+                                <p id="energyFromBattery" class="output-value">
+                                    --
+                                </p>
+                                <p
+                                    id="labelEnergyFromBattery"
+                                    class="output-label"
+                                >
+                                    Energia da Batteria
+                                </p>
+                            </div>
+                            <div
+                                class="text-center p-2 bg-orange-50 rounded-lg"
+                            >
+                                <p id="energyToBattery" class="output-value">
+                                    --
+                                </p>
+                                <p
+                                    id="labelEnergyToBattery"
+                                    class="output-label"
+                                >
+                                    Energia a Batteria
+                                </p>
+                            </div>
+                            <div class="text-center p-2 bg-red-50 rounded-lg">
+                                <p id="energyFromGrid" class="output-value">
+                                    --
+                                </p>
+                                <p
+                                    id="labelEnergyFromGrid"
+                                    class="output-label"
+                                >
+                                    Prelievo da Rete
+                                </p>
+                            </div>
+                            <div
+                                class="text-center p-2 bg-purple-50 rounded-lg"
+                            >
+                                <p id="totalCost" class="output-value">--</p>
+                                <p id="labelTotalGridCost" class="output-label">
+                                    Costo Totale Rete
+                                </p>
+                            </div>
                         </div>
+                        <p
+                            id="simulationNote"
+                            class="text-xs text-gray-500 mt-3 text-center"
+                        >
+                            Nota: il consumo del dispositivo avviene solo nelle
+                            ore specificate e presenta fluttuazioni (5%). La
+                            produzione FV è stimata (con fluttuazioni dinamiche
+                            basate su zona/stagione/tipo giornata) considerando
+                            un ciclo giorno/notte.
+                        </p>
                     </div>
-                     <p id="simulationNote" class="text-xs text-gray-500 mt-3 text-center">
-                        Nota: il consumo del dispositivo avviene solo nelle ore specificate e presenta fluttuazioni (5%). La produzione FV è stimata (con fluttuazioni dinamiche basate su zona/stagione/tipo giornata) considerando un ciclo giorno/notte.
-                    </p>
-                </div>
 
-                <div class="card mt-6 w-full">
-                    <h2 id="chartTitle" class="text-xl font-semibold text-gray-700 mb-4 text-center">Andamento Energetico Simulato</h2>
-                    <div class="relative h-72 sm:h-96">
-                        <canvas id="consumptionChart"></canvas>
+                    <div class="card mt-6 w-full">
+                        <h2
+                            id="chartTitle"
+                            class="text-xl font-semibold text-gray-700 mb-4 text-center"
+                        >
+                            Andamento Energetico Simulato
+                        </h2>
+                        <div class="relative h-72 sm:h-96">
+                            <canvas id="consumptionChart"></canvas>
+                        </div>
+                        <p
+                            id="chartMessage"
+                            class="text-sm text-gray-500 mt-4 text-center"
+                        >
+                            Premi "Calcola" per generare il grafico.
+                        </p>
                     </div>
-                    <p id="chartMessage" class="text-sm text-gray-500 mt-4 text-center">Premi "Calcola" per generare il grafico.</p>
                 </div>
             </div>
+
+            <footer class="text-center mt-8 text-sm text-gray-500">
+                <p id="footerText">
+                    &copy; 2024 Calcolatore Energetico Avanzato. Solo a scopo
+                    illustrativo.
+                </p>
+            </footer>
         </div>
 
-        <footer class="text-center mt-8 text-sm text-gray-500">
-            <p id="footerText">&copy; 2024 Calcolatore Energetico Avanzato. Solo a scopo illustrativo.</p>
-        </footer>
-    </div>
+        <script>
+            // --- DOM Elements ---
+            const languageSelector =
+                document.getElementById("languageSelector");
+            const powerInput = document.getElementById("power");
+            const deviceStartHourInput =
+                document.getElementById("deviceStartHour");
+            const deviceOperatingHoursInput = document.getElementById(
+                "deviceOperatingHours",
+            );
+            const costInput = document.getElementById("cost");
+            const timeInput = document.getElementById("time");
+            const includePvCheckbox = document.getElementById("includePv");
+            const pvInputsDiv = document.getElementById("pvInputs");
+            const pvPeakPowerInput = document.getElementById("pvPeakPower");
+            const seasonSelect = document.getElementById("season");
+            const geographicZoneSelect =
+                document.getElementById("geographicZone");
+            const dayTypeSelect = document.getElementById("dayType");
+            const useSimulatedWeatherCheckbox = document.getElementById(
+                "useSimulatedWeather",
+            );
+            const includeBatteryCheckbox =
+                document.getElementById("includeBattery");
+            const batteryInputsDiv = document.getElementById("batteryInputs");
+            const batteryCapacityInput =
+                document.getElementById("batteryCapacity");
+            const initialBatteryChargeInput = document.getElementById(
+                "initialBatteryCharge",
+            );
+            const calculateBtn = document.getElementById("calculateBtn");
+            const energyConsumedDeviceOutput = document.getElementById(
+                "energyConsumedDevice",
+            );
+            const energyFromPvOutput = document.getElementById("energyFromPv");
+            const energyFromBatteryOutput =
+                document.getElementById("energyFromBattery");
+            const energyToBatteryOutput =
+                document.getElementById("energyToBattery");
+            const energyFromGridOutput =
+                document.getElementById("energyFromGrid");
+            const totalCostOutput = document.getElementById("totalCost");
+            const consumptionChartCanvas =
+                document.getElementById("consumptionChart");
+            const errorMessageDiv = document.getElementById("errorMessage");
+            const chartMessageP = document.getElementById("chartMessage");
 
-    <script>
-        // --- DOM Elements ---
-        const languageSelector = document.getElementById('languageSelector');
-        const powerInput = document.getElementById('power');
-        const deviceStartHourInput = document.getElementById('deviceStartHour');
-        const deviceOperatingHoursInput = document.getElementById('deviceOperatingHours');
-        const costInput = document.getElementById('cost');
-        const timeInput = document.getElementById('time');
-        const includePvCheckbox = document.getElementById('includePv');
-        const pvInputsDiv = document.getElementById('pvInputs');
-        const pvPeakPowerInput = document.getElementById('pvPeakPower');
-        const seasonSelect = document.getElementById('season');
-        const geographicZoneSelect = document.getElementById('geographicZone');
-        const dayTypeSelect = document.getElementById('dayType');
-        const useSimulatedWeatherCheckbox = document.getElementById('useSimulatedWeather');
-        const includeBatteryCheckbox = document.getElementById('includeBattery');
-        const batteryInputsDiv = document.getElementById('batteryInputs');
-        const batteryCapacityInput = document.getElementById('batteryCapacity');
-        const initialBatteryChargeInput = document.getElementById('initialBatteryCharge');
-        const calculateBtn = document.getElementById('calculateBtn');
-        const energyConsumedDeviceOutput = document.getElementById('energyConsumedDevice');
-        const energyFromPvOutput = document.getElementById('energyFromPv');
-        const energyFromBatteryOutput = document.getElementById('energyFromBattery');
-        const energyToBatteryOutput = document.getElementById('energyToBattery');
-        const energyFromGridOutput = document.getElementById('energyFromGrid');
-        const totalCostOutput = document.getElementById('totalCost');
-        const consumptionChartCanvas = document.getElementById('consumptionChart');
-        const errorMessageDiv = document.getElementById('errorMessage');
-        const chartMessageP = document.getElementById('chartMessage');
-        
-        let consumptionChart = null;
-        let currentLang = 'it';
+            let consumptionChart = null;
+            let currentLang = "it";
 
-        const translations = {
-            it: {
-                docTitle: "Calcolatore Costi Elettricità Avanzato",
-                mainTitle: "Calcolo Avanzato Consumi e Costi Elettricità",
-                subTitle: "Includi fotovoltaico e batteria per una stima più completa.",
-                dataInputTitle: "Inserisci i Dati",
-                labelDevicePower: "Consumo Medio Dispositivo (Watt, durante funzionamento)",
-                labelDeviceStartHour: "Ora Inizio Funzionamento Dispositivo (0-23)",
-                labelDeviceOpHours: "Durata Funzionamento Dispositivo (Ore)",
-                labelGridCost: "Costo Energia da Rete (€/kWh)",
-                labelSimDuration: "Durata Intera Simulazione (Ore)",
-                labelIncludePv: "Includi Impianto Fotovoltaico",
-                labelPvPeakPower: "Potenza Picco Impianto FV (kWp)",
-                labelSeason: "Stagione",
-                labelGeoZone: "Paese / Regione",
-                labelDayType: "Tipo di Giornata",
-                labelUseSimulatedWeather: "Usa Meteo Attuale (Simulato)",
-                labelIncludeBattery: "Includi Batteria di Accumulo",
-                labelBatteryCapacity: "Capacità Batteria (kWh)",
-                labelInitialBattery: "Carica Iniziale Batteria (%)",
-                calculateBtn: "Calcola",
-                resultsTitle: "Risultati Stimati",
-                labelDeviceConsumption: "Consumo Dispositivo",
-                labelEnergyFromPv: "Energia da FV",
-                labelEnergyFromBattery: "Energia da Batteria",
-                labelEnergyToBattery: "Energia a Batteria",
-                labelEnergyFromGrid: "Prelievo da Rete",
-                labelTotalGridCost: "Costo Totale Rete",
-                simulationNote: "Nota: il consumo del dispositivo avviene solo nelle ore specificate e presenta fluttuazioni (5%). La produzione FV è stimata (con fluttuazioni dinamiche basate su zona/stagione/tipo giornata) considerando un ciclo giorno/notte.",
-                chartTitle: "Andamento Energetico Simulato",
-                chartMessage: 'Premi "Calcola" per generare il grafico.',
-                footerText: "© 2024 Calcolatore Energetico Avanzato. Solo a scopo illustrativo.",
-                errorDevicePower: "Inserisci una potenza valida per il dispositivo (>0 Watt).",
-                errorDeviceStartHour: "Ora inizio funzionamento dispositivo non valida (0-23).",
-                errorDeviceOpHours: "Durata funzionamento dispositivo non valida (>0 ore).",
-                errorGridCost: "Inserisci un costo per kWh valido (>=0).",
-                errorSimDuration: "Inserisci una durata simulazione valida (>0 ore).",
-                errorPvPeakPower: "Inserisci una potenza di picco FV valida (>0 kWp).",
-                errorPvCombination: "Combinazione zona/stagione/tipo giornata non valida per FV.",
-                errorBatteryCapacity: "Inserisci una capacità batteria valida (>0 kWh).",
-                errorInitialBattery: "Inserisci una carica iniziale batteria valida (0-100%).",
-                chartLabelDeviceConsumption: "Consumo Dispositivo (W)",
-                chartLabelAvgDevicePower: "Potenza Media Dispositivo (W, se attivo)",
-                chartLabelGridDraw: "Prelievo da Rete (W)",
-                chartLabelPvProduction: "Produzione FV (W)",
-                chartLabelAvgPvProduction: "Produzione Media FV Attesa (W, su 24h)",
-                chartLabelBatteryCharge: "Carica Batteria (%)",
-                chartAxisPower: "Potenza (Watt)",
-                chartAxisBattery: "Carica Batteria (%)",
-                chartAxisDuration: "Durata (Ore)",
-                seasons: { inverno: "Inverno", mezzaStagione: "Primavera/Autunno", estate: "Estate" },
-                dayTypes: { sunny: "Soleggiata", partlyCloudy: "Parz. Nuvolosa", cloudy: "Nuvolosa/Pioggia" },
-                geoZones: {
-                    it_north: "Italia - Nord", it_center: "Italia - Centro", it_south: "Italia - Sud/Isole",
-                    de_north: "Germania - Nord", de_south: "Germania - Sud",
-                    es_south: "Spagna - Sud", fr_north: "Francia - Nord",
-                    uk_south: "Regno Unito - Sud",
-                    usa_ca: "USA - California", usa_ny: "USA - New York",
-                    eq_generic: "Zona Equatoriale Generica"
-                }
-            },
-            en: {
-                docTitle: "Advanced Electricity Cost Calculator",
-                mainTitle: "Advanced Electricity Consumption and Cost Calculator",
-                subTitle: "Include photovoltaics and battery for a more complete estimate.",
-                dataInputTitle: "Enter Your Data",
-                labelDevicePower: "Average Device Consumption (Watts, when ON)",
-                labelDeviceStartHour: "Device Operating Start Hour (0-23)",
-                labelDeviceOpHours: "Device Operating Duration (Hours)",
-                labelGridCost: "Grid Energy Cost (€/kWh)",
-                labelSimDuration: "Total Simulation Duration (Hours)",
-                labelIncludePv: "Include Photovoltaic System",
-                labelPvPeakPower: "PV System Peak Power (kWp)",
-                labelSeason: "Season",
-                labelGeoZone: "Country / Region",
-                labelDayType: "Day Type",
-                labelUseSimulatedWeather: "Use Current Weather (Simulated)",
-                labelIncludeBattery: "Include Storage Battery",
-                labelBatteryCapacity: "Battery Capacity (kWh)",
-                labelInitialBattery: "Initial Battery Charge (%)",
-                calculateBtn: "Calculate",
-                resultsTitle: "Estimated Results",
-                labelDeviceConsumption: "Device Consumption",
-                labelEnergyFromPv: "Energy from PV",
-                labelEnergyFromBattery: "Energy from Battery",
-                labelEnergyToBattery: "Energy to Battery",
-                labelEnergyFromGrid: "Grid Draw",
-                labelTotalGridCost: "Total Grid Cost",
-                simulationNote: "Note: Device consumption occurs only during specified hours and includes fluctuations (5%). PV production is estimated (with dynamic fluctuations based on zone/season/day type) considering a day/night cycle.",
-                chartTitle: "Simulated Energy Flow",
-                chartMessage: 'Press "Calculate" to generate the chart.',
-                footerText: "© 2024 Advanced Energy Calculator. For illustrative purposes only.",
-                errorDevicePower: "Enter a valid device power (>0 Watts).",
-                errorDeviceStartHour: "Invalid device start hour (0-23).",
-                errorDeviceOpHours: "Invalid device operating duration (>0 hours).",
-                errorGridCost: "Enter a valid cost per kWh (>=0).",
-                errorSimDuration: "Enter a valid simulation duration (>0 hours).",
-                errorPvPeakPower: "Enter a valid PV peak power (>0 kWp).",
-                errorPvCombination: "Invalid zone/season/day type combination for PV.",
-                errorBatteryCapacity: "Enter a valid battery capacity (>0 kWh).",
-                errorInitialBattery: "Enter a valid initial battery charge (0-100%).",
-                chartLabelDeviceConsumption: "Device Consumption (W)",
-                chartLabelAvgDevicePower: "Avg Device Power (W, if ON)",
-                chartLabelGridDraw: "Grid Draw (W)",
-                chartLabelPvProduction: "PV Production (W)",
-                chartLabelAvgPvProduction: "Avg Expected PV Production (W, 24h avg)",
-                chartLabelBatteryCharge: "Battery Charge (%)",
-                chartAxisPower: "Power (Watts)",
-                chartAxisBattery: "Battery Charge (%)",
-                chartAxisDuration: "Duration (Hours)",
-                seasons: { inverno: "Winter", mezzaStagione: "Spring/Autumn", estate: "Summer" },
-                dayTypes: { sunny: "Sunny", partlyCloudy: "Partly Cloudy", cloudy: "Cloudy/Rainy" },
-                geoZones: {
-                    it_north: "Italy - North", it_center: "Italy - Center", it_south: "Italy - South/Islands",
-                    de_north: "Germany - North", de_south: "Germany - South",
-                    es_south: "Spain - South", fr_north: "France - North",
-                    uk_south: "United Kingdom - South",
-                    usa_ca: "USA - California", usa_ny: "USA - New York",
-                    eq_generic: "Generic Equatorial Zone"
-                }
-            }
-        };
-        
-        // kWh/kWp/day for a TYPICALLY SUNNY DAY
-        const yieldFactors = { 
-            it_north: { inverno: 1.2, mezzaStagione: 3.0, estate: 4.8 },
-            it_center: { inverno: 1.8, mezzaStagione: 4.0, estate: 6.0 }, // User's reference
-            it_south: { inverno: 2.5, mezzaStagione: 4.8, estate: 7.0 },
-            de_north: { inverno: 0.8, mezzaStagione: 2.5, estate: 4.2 },
-            de_south: { inverno: 1.0, mezzaStagione: 3.0, estate: 4.8 },
-            es_south: { inverno: 2.8, mezzaStagione: 5.0, estate: 7.5 },
-            fr_north: { inverno: 1.0, mezzaStagione: 2.9, estate: 4.6 },
-            uk_south: { inverno: 0.9, mezzaStagione: 2.7, estate: 4.3 },
-            usa_ca:   { inverno: 3.0, mezzaStagione: 5.5, estate: 7.8 },
-            usa_ny:   { inverno: 1.5, mezzaStagione: 3.8, estate: 5.2 },
-            eq_generic:{ inverno: 4.2, mezzaStagione: 4.5, estate: 4.8 } // Less seasonal variation, more consistent
-        };
-        
-        // Defines daylight window and reference hours for calculating a higher power base for fluctuations
-        const seasonalDaylightAndPowerRefHours = {
-            inverno:       { start: 8, end: 17, refHoursForPowerCalc: 4 }, // Adjusted refHours
-            mezzaStagione: { start: 7, end: 19, refHoursForPowerCalc: 6 }, 
-            estate:        { start: 6, end: 20, refHoursForPowerCalc: 8 }  // Longer ref for summer
-        };
-
-        // +/- percentage range, relative to the curve generated for the day type
-        const pvBaseFluctuation = 0.10; // Base random noise on top of the shaped curve
-        const dayTypeModifiers = {
-            // Factor to multiply daily energy yield by, and base variability factor
-            sunny:         { yieldFactor: 1.0,  variabilityFactor: 0.15, shapeIntensity: 1.0 }, // Shape intensity for how "peaky"
-            partlyCloudy:  { yieldFactor: 0.6,  variabilityFactor: 0.40, shapeIntensity: 0.7 },
-            cloudy:        { yieldFactor: 0.25, variabilityFactor: 0.65, shapeIntensity: 0.4 }
-        };
-
-
-        function updateUI(lang) {
-            currentLang = lang;
-            document.documentElement.lang = lang;
-            const t = translations[lang];
-
-            document.title = t.docTitle;
-            document.getElementById('mainTitle').textContent = t.mainTitle;
-            document.getElementById('subTitle').textContent = t.subTitle;
-            document.getElementById('dataInputTitle').textContent = t.dataInputTitle;
-            document.getElementById('labelDevicePower').textContent = t.labelDevicePower;
-            document.getElementById('labelDeviceStartHour').textContent = t.labelDeviceStartHour;
-            document.getElementById('labelDeviceOpHours').textContent = t.labelDeviceOpHours;
-            document.getElementById('labelGridCost').textContent = t.labelGridCost;
-            document.getElementById('labelSimDuration').textContent = t.labelSimDuration;
-            document.getElementById('labelIncludePv').textContent = t.labelIncludePv;
-            document.getElementById('labelPvPeakPower').textContent = t.labelPvPeakPower;
-            document.getElementById('labelSeason').textContent = t.labelSeason;
-            document.getElementById('labelGeoZone').textContent = t.labelGeoZone;
-            document.getElementById('labelDayType').textContent = t.labelDayType;
-            document.getElementById('labelUseSimulatedWeather').textContent = t.labelUseSimulatedWeather;
-            document.getElementById('labelIncludeBattery').textContent = t.labelIncludeBattery;
-            document.getElementById('labelBatteryCapacity').textContent = t.labelBatteryCapacity;
-            document.getElementById('labelInitialBattery').textContent = t.labelInitialBattery;
-            calculateBtn.textContent = t.calculateBtn;
-            document.getElementById('resultsTitle').textContent = t.resultsTitle;
-            document.getElementById('labelDeviceConsumption').textContent = t.labelDeviceConsumption;
-            document.getElementById('labelEnergyFromPv').textContent = t.labelEnergyFromPv;
-            document.getElementById('labelEnergyFromBattery').textContent = t.labelEnergyFromBattery;
-            document.getElementById('labelEnergyToBattery').textContent = t.labelEnergyToBattery;
-            document.getElementById('labelEnergyFromGrid').textContent = t.labelEnergyFromGrid;
-            document.getElementById('labelTotalGridCost').textContent = t.labelTotalGridCost;
-            document.getElementById('simulationNote').textContent = t.simulationNote;
-            document.getElementById('chartTitle').textContent = t.chartTitle;
-            chartMessageP.textContent = t.chartMessage;
-            document.getElementById('footerText').textContent = t.footerText;
-
-            seasonSelect.innerHTML = '';
-            for (const key in t.seasons) {
-                const option = document.createElement('option'); option.value = key; option.textContent = t.seasons[key];
-                if (key === 'mezzaStagione') option.selected = true; seasonSelect.appendChild(option);
-            }
-            geographicZoneSelect.innerHTML = '';
-            for (const key in t.geoZones) {
-                const option = document.createElement('option'); option.value = key; option.textContent = t.geoZones[key];
-                // Default to Italy Center if available, else first
-                if (key === 'it_center' || (geographicZoneSelect.options.length === 0 && key === Object.keys(t.geoZones)[0])) option.selected = true;
-                geographicZoneSelect.appendChild(option);
-            }
-            dayTypeSelect.innerHTML = '';
-            for (const key in t.dayTypes) {
-                const option = document.createElement('option'); option.value = key; option.textContent = t.dayTypes[key];
-                if (key === 'sunny') option.selected = true; dayTypeSelect.appendChild(option);
-            }
-            if (consumptionChart) { calculateBtn.click(); }
-        }
-        
-        languageSelector.addEventListener('change', (event) => updateUI(event.target.value));
-        includePvCheckbox.addEventListener('change', () => {
-            pvInputsDiv.classList.toggle('hidden', !includePvCheckbox.checked);
-            if (!includePvCheckbox.checked) {
-                includeBatteryCheckbox.checked = false;
-                batteryInputsDiv.classList.add('hidden');
-            }
-        });
-        includeBatteryCheckbox.addEventListener('change', () => batteryInputsDiv.classList.toggle('hidden', !includeBatteryCheckbox.checked));
-
-        function displayError(messageKey, lang = currentLang) {
-            errorMessageDiv.textContent = translations[lang][messageKey] || messageKey;
-            errorMessageDiv.classList.remove('hidden');
-        }
-        function clearError() { errorMessageDiv.classList.add('hidden'); errorMessageDiv.textContent = ''; }
-        function formatEnergy(wh) {
-            if (wh === null || isNaN(wh)) return '--';
-            if (Math.abs(wh) < 1000) return wh.toFixed(1) + " Wh";
-            if (Math.abs(wh) < 1000000) return (wh / 1000).toFixed(2) + " kWh";
-            return (wh / 1000000).toFixed(3) + " MWh";
-        }
-        
-        calculateBtn.addEventListener('click', () => {
-            clearError();
-            chartMessageP.classList.add('hidden');
-            const t = translations[currentLang];
-
-            const powerDeviceAvgW = parseFloat(powerInput.value);
-            const deviceStartHour = parseInt(deviceStartHourInput.value, 10);
-            const deviceOpHours = parseFloat(deviceOperatingHoursInput.value);
-            const costPerKwh = parseFloat(costInput.value.replace(',', '.'));
-            const totalHours = parseFloat(timeInput.value);
-
-            let errors = [];
-            if (isNaN(powerDeviceAvgW) || powerDeviceAvgW <= 0) errors.push("errorDevicePower");
-            if (isNaN(deviceStartHour) || deviceStartHour < 0 || deviceStartHour > 23) errors.push("errorDeviceStartHour");
-            if (isNaN(deviceOpHours) || deviceOpHours <= 0 ) errors.push("errorDeviceOpHours");
-            if (isNaN(costPerKwh) || costPerKwh < 0) errors.push("errorGridCost");
-            if (isNaN(totalHours) || totalHours <= 0) errors.push("errorSimDuration");
-
-            const usePv = includePvCheckbox.checked;
-            let pvPeakPowerkWp = 0, season = seasonSelect.value, zone = geographicZoneSelect.value, dayType = dayTypeSelect.value;
-            let useSimWeather = useSimulatedWeatherCheckbox.checked;
-
-            let avgDailyPvEnergyWh_target_base = 0; 
-            let pvDaylightConfig = seasonalDaylightAndPowerRefHours[season] || seasonalDaylightAndPowerRefHours.mezzaStagione;
-            let currentDayTypeModifier = dayTypeModifiers[dayType] || dayTypeModifiers.sunny;
-            
-            if (usePv) {
-                pvPeakPowerkWp = parseFloat(pvPeakPowerInput.value);
-                if (isNaN(pvPeakPowerkWp) || pvPeakPowerkWp <= 0) errors.push("errorPvPeakPower");
-                
-                const currentYieldFactors = yieldFactors[zone];
-                if (currentYieldFactors && currentYieldFactors[season] !== undefined) {
-                    const selectedYieldFactor = currentYieldFactors[season];
-                    avgDailyPvEnergyWh_target_base = pvPeakPowerkWp * 1000 * selectedYieldFactor; // Energy for a sunny day
-                } else {
-                    errors.push("errorPvCombination");
-                }
-            }
-
-            const useBattery = includeBatteryCheckbox.checked;
-            let batteryCapacityKWh = 0, currentBatteryChargePercentage = 0;
-            let batteryMaxEnergyWh = 0, currentBatteryEnergyWh = 0;
-            if (useBattery) {
-                batteryCapacityKWh = parseFloat(batteryCapacityInput.value);
-                currentBatteryChargePercentage = parseFloat(initialBatteryChargeInput.value);
-                if (isNaN(batteryCapacityKWh) || batteryCapacityKWh <= 0) errors.push("errorBatteryCapacity");
-                if (isNaN(currentBatteryChargePercentage) || currentBatteryChargePercentage < 0 || currentBatteryChargePercentage > 100) errors.push("errorInitialBattery");
-                batteryMaxEnergyWh = batteryCapacityKWh * 1000;
-                currentBatteryEnergyWh = batteryMaxEnergyWh * (currentBatteryChargePercentage / 100);
-            }
-            
-            if (errors.length > 0) { displayError(errors[0]); return; }
-
-            const numberOfIntervals = Math.max(Math.ceil(totalHours * 4), 96); // Higher resolution for PV curve
-            const timePerIntervalHours = totalHours / numberOfIntervals;
-            const deviceFluctuationPercentage = 0.05; 
-
-            // Apply day type modifier to the target daily energy
-            let avgDailyPvEnergyWh_target_adjusted = avgDailyPvEnergyWh_target_base * currentDayTypeModifier.yieldFactor;
-
-            // Apply simulated weather modifier
-            if (usePv && useSimWeather) {
-                const weatherModifier = 0.8 + Math.random() * 0.4; // Random factor between 0.8 (-20%) and 1.2 (+20%)
-                avgDailyPvEnergyWh_target_adjusted *= weatherModifier;
-            }
-            
-            let pvPowerBaseForCurveShape = 0;
-            if (usePv && pvDaylightConfig.refHoursForPowerCalc > 0) {
-                 pvPowerBaseForCurveShape = avgDailyPvEnergyWh_target_adjusted / pvDaylightConfig.refHoursForPowerCalc;
-            }
-
-
-            let totalDeviceEnergyWh = 0, simulatedTotalPvEnergyWh_beforeScaling = 0, totalEnergyDrawnFromBatteryWh = 0;
-            let totalEnergyChargedToBatteryWh = 0, totalGridEnergyWh = 0;
-
-            const timeLabels = [], deviceConsumptionData = [], pvProductionData_raw = [], batteryChargeData = [], gridConsumptionData = [];
-            
-            // --- Simulation Loop (Phase 1: Calculate Raw PV Production based on curve shape) ---
-            for (let i = 0; i < numberOfIntervals; i++) {
-                const currentIntervalStartSimTime = i * timePerIntervalHours;
-                const currentHourOfDay = currentIntervalStartSimTime % 24; 
-                
-                let intervalPvPowerW_shaped = 0;
-                if (usePv) {
-                    if (currentHourOfDay >= pvDaylightConfig.start && currentHourOfDay < pvDaylightConfig.end) {
-                        // Bell-curve shaping (simplified sinusoidal)
-                        const hoursIntoDaylight = currentHourOfDay - pvDaylightConfig.start;
-                        const daylightDuration = pvDaylightConfig.end - pvDaylightConfig.start;
-                        const peakHour = pvDaylightConfig.start + daylightDuration / 2;
-                        
-                        // More pronounced peak for sunny days, flatter for cloudy
-                        let shapeFactor = Math.sin((Math.PI * hoursIntoDaylight) / daylightDuration);
-                        shapeFactor = Math.pow(shapeFactor, currentDayTypeModifier.shapeIntensity); // Sharpen/flatten peak
-
-                        intervalPvPowerW_shaped = pvPowerBaseForCurveShape * shapeFactor;
-                        
-                        // Add random fluctuation based on day type variability
-                        const randomFluctuation = (Math.random() * 2 - 1) * currentDayTypeModifier.variabilityFactor;
-                        intervalPvPowerW_shaped *= (1 + randomFluctuation);
-                        
-                        intervalPvPowerW_shaped = Math.max(0, Math.min(intervalPvPowerW_shaped, pvPeakPowerkWp * 1000));
-                    } else {
-                        intervalPvPowerW_shaped = 0; // Night time
-                    }
-                    const intervalPvEnergyWh = intervalPvPowerW_shaped * timePerIntervalHours;
-                    simulatedTotalPvEnergyWh_beforeScaling += intervalPvEnergyWh;
-                    pvProductionData_raw.push(intervalPvPowerW_shaped);
-                } else {
-                    pvProductionData_raw.push(0);
-                }
-            }
-
-            // --- PV Energy Reconciliation (Phase 2) ---
-            let pvScalingFactor = 1;
-            if (usePv && simulatedTotalPvEnergyWh_beforeScaling > 0.001) { // Avoid division by zero or tiny numbers
-                const numberOfSimulatedDays = totalHours / 24;
-                const targetTotalPvEnergyWh_forSimDuration = avgDailyPvEnergyWh_target_adjusted * numberOfSimulatedDays;
-                pvScalingFactor = targetTotalPvEnergyWh_forSimDuration / simulatedTotalPvEnergyWh_beforeScaling;
-            } else if (usePv && avgDailyPvEnergyWh_target_adjusted > 0) { // Target was >0 but simulated was 0
-                 pvScalingFactor = 0; 
-            }
-
-
-            const pvProductionData_scaled = pvProductionData_raw.map(p => Math.max(0, p * pvScalingFactor)); // Ensure no negative after scaling
-            let finalTotalPvEnergyWh = 0;
-            if(usePv) {
-                pvProductionData_scaled.forEach(power => {
-                    finalTotalPvEnergyWh += power * timePerIntervalHours;
-                });
-            }
-
-
-            // --- Simulation Loop (Phase 3: Device, Battery, Grid with Scaled PV) ---
-            // Reset totals for the main simulation pass
-            totalDeviceEnergyWh = 0;
-            totalGridEnergyWh = 0;
-            // totalEnergyDrawnFromBatteryWh and totalEnergyChargedToBatteryWh are reset implicitly by not accumulating from prev runs
-            // currentBatteryEnergyWh is reset to initial for each calculation run
-
-            if (useBattery) { // Reset battery for this simulation run
-                currentBatteryEnergyWh = batteryMaxEnergyWh * (currentBatteryChargePercentage / 100);
-                totalEnergyDrawnFromBatteryWh = 0; // Explicitly reset these for clarity
-                totalEnergyChargedToBatteryWh = 0;
-            }
-
-
-            for (let i = 0; i < numberOfIntervals; i++) {
-                const currentIntervalStartSimTime = i * timePerIntervalHours;
-                let intervalDevicePowerW = 0;
-                const intervalMidPoint = currentIntervalStartSimTime + timePerIntervalHours / 2;
-                let deviceIsActiveInThisInterval = false;
-
-                if (currentIntervalStartSimTime < totalHours) {
-                    for (let dayOffset = 0; ; dayOffset++) { // Loop through potential days
-                        const dayStartTimeOffset = dayOffset * 24;
-                        const currentDayDeviceStart = dayStartTimeOffset + deviceStartHour;
-                        const currentDayDeviceEnd = dayStartTimeOffset + deviceStartHour + deviceOpHours;
-
-                        if (currentDayDeviceStart >= totalHours) break; // This device cycle starts after simulation ends
-
-                        if (intervalMidPoint >= currentDayDeviceStart && intervalMidPoint < currentDayDeviceEnd) {
-                            deviceIsActiveInThisInterval = true;
-                            break; 
-                        }
-                        if (currentDayDeviceEnd > currentIntervalStartSimTime + totalHours + 24) break; // Optimization
-                    }
-                }
-
-                if (deviceIsActiveInThisInterval) {
-                     const deviceRandomFluctuation = (Math.random() * 2 - 1) * deviceFluctuationPercentage;
-                     intervalDevicePowerW = powerDeviceAvgW * (1 + deviceRandomFluctuation);
-                     intervalDevicePowerW = Math.max(0, intervalDevicePowerW);
-                }
-                const actualIntervalDeviceEnergyWh = intervalDevicePowerW * timePerIntervalHours;
-                totalDeviceEnergyWh += actualIntervalDeviceEnergyWh;
-                
-                const intervalPvPowerW_final = usePv ? pvProductionData_scaled[i] : 0;
-                const intervalPvEnergyWh_final = intervalPvPowerW_final * timePerIntervalHours;
-
-                let energyFromGridThisInterval = 0, energyFromBatteryThisInterval = 0, energyToBatteryThisInterval = 0;
-                let netAfterPv = actualIntervalDeviceEnergyWh - intervalPvEnergyWh_final; 
-
-                if (useBattery) {
-                    if (netAfterPv > 0) { 
-                        const canDrawFromBattery = Math.min(netAfterPv, currentBatteryEnergyWh);
-                        energyFromBatteryThisInterval = canDrawFromBattery;
-                        currentBatteryEnergyWh -= canDrawFromBattery;
-                        totalEnergyDrawnFromBatteryWh += canDrawFromBattery;
-                        energyFromGridThisInterval = netAfterPv - canDrawFromBattery; 
-                    } else { 
-                        const surplusPv = Math.abs(netAfterPv); 
-                        const canChargeToBattery = Math.min(surplusPv, batteryMaxEnergyWh - currentBatteryEnergyWh);
-                        energyToBatteryThisInterval = canChargeToBattery;
-                        currentBatteryEnergyWh += canChargeToBattery;
-                        totalEnergyChargedToBatteryWh += canChargeToBattery;
-                    }
-                } else { 
-                    if (netAfterPv > 0) energyFromGridThisInterval = netAfterPv;
-                }
-                
-                energyFromGridThisInterval = Math.max(0, energyFromGridThisInterval); 
-                totalGridEnergyWh += energyFromGridThisInterval;
-
-                timeLabels.push((currentIntervalStartSimTime).toFixed(1) + 'h');
-                deviceConsumptionData.push(intervalDevicePowerW.toFixed(1));
-                if(useBattery) batteryChargeData.push((currentBatteryEnergyWh / batteryMaxEnergyWh * 100).toFixed(1));
-                gridConsumptionData.push((energyFromGridThisInterval / timePerIntervalHours).toFixed(1));
-            }
-
-
-            const finalTotalCost = (totalGridEnergyWh / 1000) * costPerKwh;
-
-            energyConsumedDeviceOutput.textContent = formatEnergy(totalDeviceEnergyWh);
-            energyFromPvOutput.textContent = usePv ? formatEnergy(finalTotalPvEnergyWh) : '--'; 
-            energyFromBatteryOutput.textContent = useBattery ? formatEnergy(totalEnergyDrawnFromBatteryWh) : '--';
-            energyToBatteryOutput.textContent = useBattery ? formatEnergy(totalEnergyChargedToBatteryWh) : '--';
-            energyFromGridOutput.textContent = formatEnergy(totalGridEnergyWh);
-            totalCostOutput.textContent = finalTotalCost.toLocaleString(currentLang === 'it' ? 'it-IT' : 'en-US', { style: 'currency', currency: 'EUR' });
-
-            if (consumptionChart) consumptionChart.destroy();
-            const datasets = [
-                { label: t.chartLabelDeviceConsumption, data: deviceConsumptionData, borderColor: 'rgba(255, 99, 132, 1)', backgroundColor: 'rgba(255, 99, 132, 0.1)', tension: 0.3, fill: true, yAxisID: 'yPower' },
-                { label: t.chartLabelGridDraw, data: gridConsumptionData, borderColor: 'rgba(255, 159, 64, 1)', backgroundColor: 'rgba(255, 159, 64, 0.1)', tension: 0.3, fill: true, yAxisID: 'yPower' }
-            ];
-            if (usePv) {
-                datasets.push({ label: t.chartLabelPvProduction, data: pvProductionData_scaled.map(p => p.toFixed(1)), borderColor: 'rgba(75, 192, 192, 1)', backgroundColor: 'rgba(75, 192, 192, 0.1)', tension: 0.3, fill: true, yAxisID: 'yPower' });
-                datasets.push({ label: t.chartLabelAvgPvProduction, data: Array(numberOfIntervals).fill((avgDailyPvEnergyWh_target_adjusted/24).toFixed(1)), borderColor: 'rgba(75, 192, 192, 0.5)', borderDash: [3, 3], tension: 0.1, fill: false, pointRadius: 0, yAxisID: 'yPower' });
-            }
-            if (useBattery) {
-                 datasets.push({ label: t.chartLabelBatteryCharge, data: batteryChargeData, borderColor: 'rgba(54, 162, 235, 1)', backgroundColor: 'rgba(54, 162, 235, 0.1)', tension: 0.3, fill: false, yAxisID: 'yBattery' });
-            }
-
-            consumptionChart = new Chart(consumptionChartCanvas, {
-                type: 'line', data: { labels: timeLabels, datasets: datasets },
-                options: {
-                    responsive: true, maintainAspectRatio: false, interaction: { mode: 'index', intersect: false }, stacked: false,
-                    scales: {
-                        yPower: { type: 'linear', display: true, position: 'left', title: { display: true, text: t.chartAxisPower, font: {size: 12}, color: '#4a5568' }, grid: { color: '#e2e8f0' }, ticks: { color: '#718096'} },
-                        yBattery: { type: 'linear', display: useBattery, position: 'right', min: 0, max: 100, title: { display: true, text: t.chartAxisBattery, font: {size: 12}, color: '#4a5568' }, grid: { drawOnChartArea: false }, ticks: { color: '#718096'} },
-                        x: { title: { display: true, text: t.chartAxisDuration, font: {size: 14, weight: '500'}, color: '#4a5568' }, grid: { display: false }, ticks: { color: '#718096', maxRotation: 45, autoSkip: true, maxTicksLimit: 24 } }
+            const translations = {
+                it: {
+                    docTitle: "Calcolatore Costi Elettricità Avanzato",
+                    mainTitle: "Calcolo Avanzato Consumi e Costi Elettricità",
+                    subTitle:
+                        "Includi fotovoltaico e batteria per una stima più completa.",
+                    dataInputTitle: "Inserisci i Dati",
+                    labelDevicePower:
+                        "Consumo Medio Dispositivo (Watt, durante funzionamento)",
+                    labelDeviceStartHour:
+                        "Ora Inizio Funzionamento Dispositivo (0-23)",
+                    labelDeviceOpHours:
+                        "Durata Funzionamento Dispositivo (Ore)",
+                    labelGridCost: "Costo Energia da Rete (€/kWh)",
+                    labelSimDuration: "Durata Intera Simulazione (Ore)",
+                    labelIncludePv: "Includi Impianto Fotovoltaico",
+                    labelPvPeakPower: "Potenza Picco Impianto FV (kWp)",
+                    labelSeason: "Stagione",
+                    labelGeoZone: "Paese / Regione",
+                    labelDayType: "Tipo di Giornata",
+                    labelUseSimulatedWeather: "Usa Meteo Attuale (Simulato)",
+                    labelIncludeBattery: "Includi Batteria di Accumulo",
+                    labelBatteryCapacity: "Capacità Batteria (kWh)",
+                    labelInitialBattery: "Carica Iniziale Batteria (%)",
+                    calculateBtn: "Calcola",
+                    resultsTitle: "Risultati Stimati",
+                    labelDeviceConsumption: "Consumo Dispositivo",
+                    labelEnergyFromPv: "Energia da FV",
+                    labelEnergyFromBattery: "Energia da Batteria",
+                    labelEnergyToBattery: "Energia a Batteria",
+                    labelEnergyFromGrid: "Prelievo da Rete",
+                    labelTotalGridCost: "Costo Totale Rete",
+                    simulationNote:
+                        "Nota: il consumo del dispositivo avviene solo nelle ore specificate e presenta fluttuazioni (5%). La produzione FV è stimata (con fluttuazioni dinamiche basate su zona/stagione/tipo giornata) considerando un ciclo giorno/notte.",
+                    chartTitle: "Andamento Energetico Simulato",
+                    chartMessage: 'Premi "Calcola" per generare il grafico.',
+                    footerText:
+                        "© 2024 Calcolatore Energetico Avanzato. Solo a scopo illustrativo.",
+                    errorDevicePower:
+                        "Inserisci una potenza valida per il dispositivo (>0 Watt).",
+                    errorDeviceStartHour:
+                        "Ora inizio funzionamento dispositivo non valida (0-23).",
+                    errorDeviceOpHours:
+                        "Durata funzionamento dispositivo non valida (>0 ore).",
+                    errorGridCost: "Inserisci un costo per kWh valido (>=0).",
+                    errorSimDuration:
+                        "Inserisci una durata simulazione valida (>0 ore).",
+                    errorPvPeakPower:
+                        "Inserisci una potenza di picco FV valida (>0 kWp).",
+                    errorPvCombination:
+                        "Combinazione zona/stagione/tipo giornata non valida per FV.",
+                    errorBatteryCapacity:
+                        "Inserisci una capacità batteria valida (>0 kWh).",
+                    errorInitialBattery:
+                        "Inserisci una carica iniziale batteria valida (0-100%).",
+                    chartLabelDeviceConsumption: "Consumo Dispositivo (W)",
+                    chartLabelAvgDevicePower:
+                        "Potenza Media Dispositivo (W, se attivo)",
+                    chartLabelGridDraw: "Prelievo da Rete (W)",
+                    chartLabelPvProduction: "Produzione FV (W)",
+                    chartLabelAvgPvProduction:
+                        "Produzione Media FV Attesa (W, su 24h)",
+                    chartLabelBatteryCharge: "Carica Batteria (%)",
+                    chartAxisPower: "Potenza (Watt)",
+                    chartAxisBattery: "Carica Batteria (%)",
+                    chartAxisDuration: "Durata (Ore)",
+                    seasons: {
+                        inverno: "Inverno",
+                        mezzaStagione: "Primavera/Autunno",
+                        estate: "Estate",
                     },
-                    plugins: {
-                        legend: { position: 'top', labels: { font: {size: 10}, color: '#4a5568'} },
-                        tooltip: {
-                            callbacks: {
-                                label: function(context) {
-                                    let label = context.dataset.label || '';
-                                    if (label) label += ': ';
-                                    if (context.parsed.y !== null) {
-                                        const unit = context.dataset.yAxisID === 'yBattery' ? ' %' : ' W';
-                                        label += parseFloat(context.parsed.y).toLocaleString(currentLang === 'it' ? 'it-IT' : 'en-US', {minimumFractionDigits:1, maximumFractionDigits:1}) + unit;
-                                    }
-                                    return label;
-                                }
-                            }
-                        }
+                    dayTypes: {
+                        sunny: "Soleggiata",
+                        partlyCloudy: "Parz. Nuvolosa",
+                        cloudy: "Nuvolosa/Pioggia",
                     },
-                    animation: { duration: 500, easing: 'easeInOutQuart' }
+                    geoZones: {
+                        it_north: "Italia - Nord",
+                        it_center: "Italia - Centro",
+                        it_south: "Italia - Sud/Isole",
+                        de_north: "Germania - Nord",
+                        de_south: "Germania - Sud",
+                        es_south: "Spagna - Sud",
+                        fr_north: "Francia - Nord",
+                        uk_south: "Regno Unito - Sud",
+                        usa_ca: "USA - California",
+                        usa_ny: "USA - New York",
+                        eq_generic: "Zona Equatoriale Generica",
+                    },
+                },
+                en: {
+                    docTitle: "Advanced Electricity Cost Calculator",
+                    mainTitle:
+                        "Advanced Electricity Consumption and Cost Calculator",
+                    subTitle:
+                        "Include photovoltaics and battery for a more complete estimate.",
+                    dataInputTitle: "Enter Your Data",
+                    labelDevicePower:
+                        "Average Device Consumption (Watts, when ON)",
+                    labelDeviceStartHour: "Device Operating Start Hour (0-23)",
+                    labelDeviceOpHours: "Device Operating Duration (Hours)",
+                    labelGridCost: "Grid Energy Cost (€/kWh)",
+                    labelSimDuration: "Total Simulation Duration (Hours)",
+                    labelIncludePv: "Include Photovoltaic System",
+                    labelPvPeakPower: "PV System Peak Power (kWp)",
+                    labelSeason: "Season",
+                    labelGeoZone: "Country / Region",
+                    labelDayType: "Day Type",
+                    labelUseSimulatedWeather: "Use Current Weather (Simulated)",
+                    labelIncludeBattery: "Include Storage Battery",
+                    labelBatteryCapacity: "Battery Capacity (kWh)",
+                    labelInitialBattery: "Initial Battery Charge (%)",
+                    calculateBtn: "Calculate",
+                    resultsTitle: "Estimated Results",
+                    labelDeviceConsumption: "Device Consumption",
+                    labelEnergyFromPv: "Energy from PV",
+                    labelEnergyFromBattery: "Energy from Battery",
+                    labelEnergyToBattery: "Energy to Battery",
+                    labelEnergyFromGrid: "Grid Draw",
+                    labelTotalGridCost: "Total Grid Cost",
+                    simulationNote:
+                        "Note: Device consumption occurs only during specified hours and includes fluctuations (5%). PV production is estimated (with dynamic fluctuations based on zone/season/day type) considering a day/night cycle.",
+                    chartTitle: "Simulated Energy Flow",
+                    chartMessage: 'Press "Calculate" to generate the chart.',
+                    footerText:
+                        "© 2024 Advanced Energy Calculator. For illustrative purposes only.",
+                    errorDevicePower: "Enter a valid device power (>0 Watts).",
+                    errorDeviceStartHour: "Invalid device start hour (0-23).",
+                    errorDeviceOpHours:
+                        "Invalid device operating duration (>0 hours).",
+                    errorGridCost: "Enter a valid cost per kWh (>=0).",
+                    errorSimDuration:
+                        "Enter a valid simulation duration (>0 hours).",
+                    errorPvPeakPower: "Enter a valid PV peak power (>0 kWp).",
+                    errorPvCombination:
+                        "Invalid zone/season/day type combination for PV.",
+                    errorBatteryCapacity:
+                        "Enter a valid battery capacity (>0 kWh).",
+                    errorInitialBattery:
+                        "Enter a valid initial battery charge (0-100%).",
+                    chartLabelDeviceConsumption: "Device Consumption (W)",
+                    chartLabelAvgDevicePower: "Avg Device Power (W, if ON)",
+                    chartLabelGridDraw: "Grid Draw (W)",
+                    chartLabelPvProduction: "PV Production (W)",
+                    chartLabelAvgPvProduction:
+                        "Avg Expected PV Production (W, 24h avg)",
+                    chartLabelBatteryCharge: "Battery Charge (%)",
+                    chartAxisPower: "Power (Watts)",
+                    chartAxisBattery: "Battery Charge (%)",
+                    chartAxisDuration: "Duration (Hours)",
+                    seasons: {
+                        inverno: "Winter",
+                        mezzaStagione: "Spring/Autumn",
+                        estate: "Summer",
+                    },
+                    dayTypes: {
+                        sunny: "Sunny",
+                        partlyCloudy: "Partly Cloudy",
+                        cloudy: "Cloudy/Rainy",
+                    },
+                    geoZones: {
+                        it_north: "Italy - North",
+                        it_center: "Italy - Center",
+                        it_south: "Italy - South/Islands",
+                        de_north: "Germany - North",
+                        de_south: "Germany - South",
+                        es_south: "Spain - South",
+                        fr_north: "France - North",
+                        uk_south: "United Kingdom - South",
+                        usa_ca: "USA - California",
+                        usa_ny: "USA - New York",
+                        eq_generic: "Generic Equatorial Zone",
+                    },
+                },
+            };
+
+            // kWh/kWp/day for a TYPICALLY SUNNY DAY - Adjusted to more realistic values
+            const yieldFactors = {
+                it_north: { inverno: 1.2, mezzaStagione: 3.0, estate: 4.8 },
+                it_center: { inverno: 1.8, mezzaStagione: 4.0, estate: 6.0 }, // User's reference
+                it_south: { inverno: 2.5, mezzaStagione: 4.8, estate: 6.5 },
+                de_north: { inverno: 0.8, mezzaStagione: 2.5, estate: 4.2 },
+                de_south: { inverno: 1.0, mezzaStagione: 3.0, estate: 4.8 },
+                es_south: { inverno: 2.8, mezzaStagione: 5.0, estate: 6.8 },
+                fr_north: { inverno: 1.0, mezzaStagione: 2.9, estate: 4.6 },
+                uk_south: { inverno: 0.9, mezzaStagione: 2.7, estate: 4.3 },
+                usa_ca: { inverno: 3.0, mezzaStagione: 5.5, estate: 7.0 },
+                usa_ny: { inverno: 1.5, mezzaStagione: 3.8, estate: 5.2 },
+                eq_generic: { inverno: 4.0, mezzaStagione: 4.2, estate: 4.5 }, // Less seasonal variation, more consistent
+            };
+
+            // Defines daylight window and reference hours for calculating a higher power base for fluctuations
+            const seasonalDaylightAndPowerRefHours = {
+                inverno: { start: 8, end: 17, refHoursForPowerCalc: 4 }, // Adjusted refHours
+                mezzaStagione: { start: 7, end: 19, refHoursForPowerCalc: 6 },
+                estate: { start: 6, end: 20, refHoursForPowerCalc: 8 }, // Longer ref for summer
+            };
+
+            // +/- percentage range, relative to the curve generated for the day type
+            const pvBaseFluctuation = 0.1; // Base random noise on top of the shaped curve
+            const dayTypeModifiers = {
+                // Factor to multiply daily energy yield by, and base variability factor
+                sunny: {
+                    yieldFactor: 1.0,
+                    variabilityFactor: 0.15,
+                    shapeIntensity: 1.0,
+                }, // Shape intensity for how "peaky"
+                partlyCloudy: {
+                    yieldFactor: 0.6,
+                    variabilityFactor: 0.4,
+                    shapeIntensity: 0.7,
+                },
+                cloudy: {
+                    yieldFactor: 0.25,
+                    variabilityFactor: 0.65,
+                    shapeIntensity: 0.4,
+                },
+            };
+
+            function updateUI(lang) {
+                currentLang = lang;
+                document.documentElement.lang = lang;
+                const t = translations[lang];
+
+                document.title = t.docTitle;
+                document.getElementById("mainTitle").textContent = t.mainTitle;
+                document.getElementById("subTitle").textContent = t.subTitle;
+                document.getElementById("dataInputTitle").textContent =
+                    t.dataInputTitle;
+                document.getElementById("labelDevicePower").textContent =
+                    t.labelDevicePower;
+                document.getElementById("labelDeviceStartHour").textContent =
+                    t.labelDeviceStartHour;
+                document.getElementById("labelDeviceOpHours").textContent =
+                    t.labelDeviceOpHours;
+                document.getElementById("labelGridCost").textContent =
+                    t.labelGridCost;
+                document.getElementById("labelSimDuration").textContent =
+                    t.labelSimDuration;
+                document.getElementById("labelIncludePv").textContent =
+                    t.labelIncludePv;
+                document.getElementById("labelPvPeakPower").textContent =
+                    t.labelPvPeakPower;
+                document.getElementById("labelSeason").textContent =
+                    t.labelSeason;
+                document.getElementById("labelGeoZone").textContent =
+                    t.labelGeoZone;
+                document.getElementById("labelDayType").textContent =
+                    t.labelDayType;
+                document.getElementById(
+                    "labelUseSimulatedWeather",
+                ).textContent = t.labelUseSimulatedWeather;
+                document.getElementById("labelIncludeBattery").textContent =
+                    t.labelIncludeBattery;
+                document.getElementById("labelBatteryCapacity").textContent =
+                    t.labelBatteryCapacity;
+                document.getElementById("labelInitialBattery").textContent =
+                    t.labelInitialBattery;
+                calculateBtn.textContent = t.calculateBtn;
+                document.getElementById("resultsTitle").textContent =
+                    t.resultsTitle;
+                document.getElementById("labelDeviceConsumption").textContent =
+                    t.labelDeviceConsumption;
+                document.getElementById("labelEnergyFromPv").textContent =
+                    t.labelEnergyFromPv;
+                document.getElementById("labelEnergyFromBattery").textContent =
+                    t.labelEnergyFromBattery;
+                document.getElementById("labelEnergyToBattery").textContent =
+                    t.labelEnergyToBattery;
+                document.getElementById("labelEnergyFromGrid").textContent =
+                    t.labelEnergyFromGrid;
+                document.getElementById("labelTotalGridCost").textContent =
+                    t.labelTotalGridCost;
+                document.getElementById("simulationNote").textContent =
+                    t.simulationNote;
+                document.getElementById("chartTitle").textContent =
+                    t.chartTitle;
+                chartMessageP.textContent = t.chartMessage;
+                document.getElementById("footerText").textContent =
+                    t.footerText;
+
+                seasonSelect.innerHTML = "";
+                for (const key in t.seasons) {
+                    const option = document.createElement("option");
+                    option.value = key;
+                    option.textContent = t.seasons[key];
+                    if (key === "mezzaStagione") option.selected = true;
+                    seasonSelect.appendChild(option);
+                }
+                geographicZoneSelect.innerHTML = "";
+                for (const key in t.geoZones) {
+                    const option = document.createElement("option");
+                    option.value = key;
+                    option.textContent = t.geoZones[key];
+                    // Default to Italy Center if available, else first
+                    if (
+                        key === "it_center" ||
+                        (geographicZoneSelect.options.length === 0 &&
+                            key === Object.keys(t.geoZones)[0])
+                    )
+                        option.selected = true;
+                    geographicZoneSelect.appendChild(option);
+                }
+                dayTypeSelect.innerHTML = "";
+                for (const key in t.dayTypes) {
+                    const option = document.createElement("option");
+                    option.value = key;
+                    option.textContent = t.dayTypes[key];
+                    if (key === "sunny") option.selected = true;
+                    dayTypeSelect.appendChild(option);
+                }
+                if (consumptionChart) {
+                    calculateBtn.click();
+                }
+            }
+
+            languageSelector.addEventListener("change", (event) =>
+                updateUI(event.target.value),
+            );
+            includePvCheckbox.addEventListener("change", () => {
+                pvInputsDiv.classList.toggle(
+                    "hidden",
+                    !includePvCheckbox.checked,
+                );
+                if (!includePvCheckbox.checked) {
+                    includeBatteryCheckbox.checked = false;
+                    batteryInputsDiv.classList.add("hidden");
                 }
             });
-        });
-        
-        updateUI(currentLang); 
-        chartMessageP.classList.remove('hidden');
-    </script>
-</body>
+            includeBatteryCheckbox.addEventListener("change", () =>
+                batteryInputsDiv.classList.toggle(
+                    "hidden",
+                    !includeBatteryCheckbox.checked,
+                ),
+            );
+
+            function displayError(messageKey, lang = currentLang) {
+                errorMessageDiv.textContent =
+                    translations[lang][messageKey] || messageKey;
+                errorMessageDiv.classList.remove("hidden");
+            }
+            function clearError() {
+                errorMessageDiv.classList.add("hidden");
+                errorMessageDiv.textContent = "";
+            }
+            function formatEnergy(wh) {
+                if (wh === null || isNaN(wh)) return "--";
+                if (Math.abs(wh) < 1000) return wh.toFixed(1) + " Wh";
+                if (Math.abs(wh) < 1000000)
+                    return (wh / 1000).toFixed(2) + " kWh";
+                return (wh / 1000000).toFixed(3) + " MWh";
+            }
+
+            calculateBtn.addEventListener("click", () => {
+                clearError();
+                chartMessageP.classList.add("hidden");
+                const t = translations[currentLang];
+
+                const powerDeviceAvgW = parseFloat(powerInput.value);
+                const deviceStartHour = parseInt(
+                    deviceStartHourInput.value,
+                    10,
+                );
+                const deviceOpHours = parseFloat(
+                    deviceOperatingHoursInput.value,
+                );
+                const costPerKwh = parseFloat(
+                    costInput.value.replace(",", "."),
+                );
+                const totalHours = parseFloat(timeInput.value);
+
+                let errors = [];
+                if (isNaN(powerDeviceAvgW) || powerDeviceAvgW <= 0)
+                    errors.push("errorDevicePower");
+                if (
+                    isNaN(deviceStartHour) ||
+                    deviceStartHour < 0 ||
+                    deviceStartHour > 23
+                )
+                    errors.push("errorDeviceStartHour");
+                if (isNaN(deviceOpHours) || deviceOpHours <= 0)
+                    errors.push("errorDeviceOpHours");
+                if (isNaN(costPerKwh) || costPerKwh < 0)
+                    errors.push("errorGridCost");
+                if (isNaN(totalHours) || totalHours <= 0)
+                    errors.push("errorSimDuration");
+
+                const usePv = includePvCheckbox.checked;
+                let pvPeakPowerkWp = 0,
+                    season = seasonSelect.value,
+                    zone = geographicZoneSelect.value,
+                    dayType = dayTypeSelect.value;
+                let useSimWeather = useSimulatedWeatherCheckbox.checked;
+
+                let avgDailyPvEnergyWh_target_base = 0;
+                let pvDaylightConfig =
+                    seasonalDaylightAndPowerRefHours[season] ||
+                    seasonalDaylightAndPowerRefHours.mezzaStagione;
+                let currentDayTypeModifier =
+                    dayTypeModifiers[dayType] || dayTypeModifiers.sunny;
+
+                // Validate pvDaylightConfig exists and has required properties
+                if (
+                    !pvDaylightConfig ||
+                    typeof pvDaylightConfig.refHoursForPowerCalc !== "number" ||
+                    pvDaylightConfig.refHoursForPowerCalc <= 0
+                ) {
+                    pvDaylightConfig =
+                        seasonalDaylightAndPowerRefHours.mezzaStagione;
+                }
+
+                if (usePv) {
+                    pvPeakPowerkWp = parseFloat(pvPeakPowerInput.value);
+                    if (isNaN(pvPeakPowerkWp) || pvPeakPowerkWp <= 0)
+                        errors.push("errorPvPeakPower");
+
+                    const currentYieldFactors = yieldFactors[zone];
+                    if (
+                        currentYieldFactors &&
+                        currentYieldFactors[season] !== undefined
+                    ) {
+                        const selectedYieldFactor = currentYieldFactors[season];
+                        avgDailyPvEnergyWh_target_base =
+                            pvPeakPowerkWp * 1000 * selectedYieldFactor; // Energy for a sunny day
+                    } else {
+                        errors.push("errorPvCombination");
+                    }
+                }
+
+                const useBattery = includeBatteryCheckbox.checked;
+                let batteryCapacityKWh = 0,
+                    currentBatteryChargePercentage = 0;
+                let batteryMaxEnergyWh = 0,
+                    currentBatteryEnergyWh = 0;
+                if (useBattery) {
+                    batteryCapacityKWh = parseFloat(batteryCapacityInput.value);
+                    currentBatteryChargePercentage = parseFloat(
+                        initialBatteryChargeInput.value,
+                    );
+                    if (isNaN(batteryCapacityKWh) || batteryCapacityKWh <= 0)
+                        errors.push("errorBatteryCapacity");
+                    if (
+                        isNaN(currentBatteryChargePercentage) ||
+                        currentBatteryChargePercentage < 0 ||
+                        currentBatteryChargePercentage > 100
+                    )
+                        errors.push("errorInitialBattery");
+                    batteryMaxEnergyWh = batteryCapacityKWh * 1000;
+                    currentBatteryEnergyWh =
+                        batteryMaxEnergyWh *
+                        (currentBatteryChargePercentage / 100);
+                }
+
+                if (errors.length > 0) {
+                    displayError(errors[0]);
+                    return;
+                }
+
+                const numberOfIntervals = Math.max(
+                    Math.ceil(totalHours * 4),
+                    96,
+                ); // Higher resolution for PV curve
+                const timePerIntervalHours = totalHours / numberOfIntervals;
+                const deviceFluctuationPercentage = 0.05;
+
+                // Apply day type modifier to the target daily energy
+                let avgDailyPvEnergyWh_target_adjusted =
+                    avgDailyPvEnergyWh_target_base *
+                    currentDayTypeModifier.yieldFactor;
+
+                // Apply simulated weather modifier
+                if (usePv && useSimWeather) {
+                    const weatherModifier = 0.8 + Math.random() * 0.4; // Random factor between 0.8 (-20%) and 1.2 (+20%)
+                    avgDailyPvEnergyWh_target_adjusted *= weatherModifier;
+                }
+
+                let pvPowerBaseForCurveShape = 0;
+                if (
+                    usePv &&
+                    pvDaylightConfig &&
+                    pvDaylightConfig.refHoursForPowerCalc > 0 &&
+                    avgDailyPvEnergyWh_target_adjusted > 0
+                ) {
+                    pvPowerBaseForCurveShape =
+                        avgDailyPvEnergyWh_target_adjusted /
+                        pvDaylightConfig.refHoursForPowerCalc;
+                }
+
+                let totalDeviceEnergyWh = 0,
+                    simulatedTotalPvEnergyWh_beforeScaling = 0,
+                    totalEnergyDrawnFromBatteryWh = 0;
+                let totalEnergyChargedToBatteryWh = 0,
+                    totalGridEnergyWh = 0;
+
+                const timeLabels = [],
+                    deviceConsumptionData = [],
+                    pvProductionData_raw = [],
+                    batteryChargeData = [],
+                    gridConsumptionData = [];
+
+                // --- Simulation Loop (Phase 1: Calculate Raw PV Production based on curve shape) ---
+                for (let i = 0; i < numberOfIntervals; i++) {
+                    const currentIntervalStartSimTime =
+                        i * timePerIntervalHours;
+                    const currentHourOfDay = currentIntervalStartSimTime % 24;
+
+                    let intervalPvPowerW_shaped = 0;
+                    if (usePv) {
+                        if (
+                            currentHourOfDay >= pvDaylightConfig.start &&
+                            currentHourOfDay < pvDaylightConfig.end
+                        ) {
+                            // Bell-curve shaping (simplified sinusoidal)
+                            const hoursIntoDaylight =
+                                currentHourOfDay - pvDaylightConfig.start;
+                            const daylightDuration =
+                                pvDaylightConfig.end - pvDaylightConfig.start;
+                            const peakHour =
+                                pvDaylightConfig.start + daylightDuration / 2;
+
+                            // More pronounced peak for sunny days, flatter for cloudy
+                            let shapeFactor = Math.sin(
+                                (Math.PI * hoursIntoDaylight) /
+                                    daylightDuration,
+                            );
+                            shapeFactor = Math.pow(
+                                shapeFactor,
+                                currentDayTypeModifier.shapeIntensity,
+                            ); // Sharpen/flatten peak
+
+                            intervalPvPowerW_shaped =
+                                pvPowerBaseForCurveShape * shapeFactor;
+
+                            // Add random fluctuation based on day type variability
+                            const randomFluctuation =
+                                (Math.random() * 2 - 1) *
+                                currentDayTypeModifier.variabilityFactor;
+                            intervalPvPowerW_shaped *= 1 + randomFluctuation;
+
+                            intervalPvPowerW_shaped = Math.max(
+                                0,
+                                Math.min(
+                                    intervalPvPowerW_shaped,
+                                    pvPeakPowerkWp * 1000,
+                                ),
+                            );
+                        } else {
+                            intervalPvPowerW_shaped = 0; // Night time
+                        }
+                        const intervalPvEnergyWh =
+                            intervalPvPowerW_shaped * timePerIntervalHours;
+                        simulatedTotalPvEnergyWh_beforeScaling +=
+                            intervalPvEnergyWh;
+                        pvProductionData_raw.push(intervalPvPowerW_shaped);
+                    } else {
+                        pvProductionData_raw.push(0);
+                    }
+                }
+
+                // --- PV Energy Reconciliation (Phase 2) ---
+                let pvScalingFactor = 1;
+                if (usePv && simulatedTotalPvEnergyWh_beforeScaling > 0.001) {
+                    // Avoid division by zero or tiny numbers
+                    const numberOfSimulatedDays = totalHours / 24;
+                    const targetTotalPvEnergyWh_forSimDuration =
+                        avgDailyPvEnergyWh_target_adjusted *
+                        numberOfSimulatedDays;
+                    pvScalingFactor =
+                        targetTotalPvEnergyWh_forSimDuration /
+                        simulatedTotalPvEnergyWh_beforeScaling;
+                } else if (usePv && avgDailyPvEnergyWh_target_adjusted > 0) {
+                    // If target > 0 but simulated is very small/zero, use a high scaling factor instead of 0
+                    const numberOfSimulatedDays = totalHours / 24;
+                    const targetTotalPvEnergyWh_forSimDuration =
+                        avgDailyPvEnergyWh_target_adjusted *
+                        numberOfSimulatedDays;
+                    pvScalingFactor = Math.min(
+                        targetTotalPvEnergyWh_forSimDuration / 0.001,
+                        1000,
+                    ); // Cap at 1000x scaling
+                }
+
+                const pvProductionData_scaled = pvProductionData_raw.map((p) =>
+                    Math.max(0, p * pvScalingFactor),
+                ); // Ensure no negative after scaling
+                let finalTotalPvEnergyWh = 0;
+                if (usePv) {
+                    pvProductionData_scaled.forEach((power) => {
+                        finalTotalPvEnergyWh += power * timePerIntervalHours;
+                    });
+                }
+
+                // --- Simulation Loop (Phase 3: Device, Battery, Grid with Scaled PV) ---
+                // Reset totals for the main simulation pass
+                totalDeviceEnergyWh = 0;
+                totalGridEnergyWh = 0;
+                // totalEnergyDrawnFromBatteryWh and totalEnergyChargedToBatteryWh are reset implicitly by not accumulating from prev runs
+                // currentBatteryEnergyWh is reset to initial for each calculation run
+
+                if (useBattery) {
+                    // Reset battery for this simulation run
+                    currentBatteryEnergyWh =
+                        batteryMaxEnergyWh *
+                        (currentBatteryChargePercentage / 100);
+                    totalEnergyDrawnFromBatteryWh = 0; // Explicitly reset these for clarity
+                    totalEnergyChargedToBatteryWh = 0;
+                }
+
+                for (let i = 0; i < numberOfIntervals; i++) {
+                    const currentIntervalStartSimTime =
+                        i * timePerIntervalHours;
+                    let intervalDevicePowerW = 0;
+                    const intervalMidPoint =
+                        currentIntervalStartSimTime + timePerIntervalHours / 2;
+                    let deviceIsActiveInThisInterval = false;
+
+                    if (currentIntervalStartSimTime < totalHours) {
+                        for (let dayOffset = 0; ; dayOffset++) {
+                            // Loop through potential days
+                            const dayStartTimeOffset = dayOffset * 24;
+                            const currentDayDeviceStart =
+                                dayStartTimeOffset + deviceStartHour;
+                            const currentDayDeviceEnd =
+                                dayStartTimeOffset +
+                                deviceStartHour +
+                                deviceOpHours;
+
+                            if (currentDayDeviceStart >= totalHours) break; // This device cycle starts after simulation ends
+
+                            if (
+                                intervalMidPoint >= currentDayDeviceStart &&
+                                intervalMidPoint < currentDayDeviceEnd
+                            ) {
+                                deviceIsActiveInThisInterval = true;
+                                break;
+                            }
+                            if (
+                                currentDayDeviceEnd >
+                                currentIntervalStartSimTime + totalHours + 24
+                            )
+                                break; // Optimization
+                        }
+                    }
+
+                    if (deviceIsActiveInThisInterval) {
+                        const deviceRandomFluctuation =
+                            (Math.random() * 2 - 1) *
+                            deviceFluctuationPercentage;
+                        intervalDevicePowerW =
+                            powerDeviceAvgW * (1 + deviceRandomFluctuation);
+                        intervalDevicePowerW = Math.max(
+                            0,
+                            intervalDevicePowerW,
+                        );
+                    }
+                    const actualIntervalDeviceEnergyWh =
+                        intervalDevicePowerW * timePerIntervalHours;
+                    totalDeviceEnergyWh += actualIntervalDeviceEnergyWh;
+
+                    const intervalPvPowerW_final = usePv
+                        ? pvProductionData_scaled[i]
+                        : 0;
+                    const intervalPvEnergyWh_final =
+                        intervalPvPowerW_final * timePerIntervalHours;
+
+                    let energyFromGridThisInterval = 0,
+                        energyFromBatteryThisInterval = 0,
+                        energyToBatteryThisInterval = 0;
+                    let energyToGridThisInterval = 0; // Track energy fed back to grid
+                    let netAfterPv =
+                        actualIntervalDeviceEnergyWh - intervalPvEnergyWh_final;
+
+                    if (useBattery) {
+                        if (netAfterPv > 0) {
+                            // Need more energy than PV provides
+                            const canDrawFromBattery = Math.min(
+                                netAfterPv,
+                                currentBatteryEnergyWh,
+                            );
+                            energyFromBatteryThisInterval = canDrawFromBattery;
+                            currentBatteryEnergyWh -= canDrawFromBattery;
+                            totalEnergyDrawnFromBatteryWh += canDrawFromBattery;
+                            energyFromGridThisInterval =
+                                netAfterPv - canDrawFromBattery;
+                        } else {
+                            // Have surplus PV energy
+                            const surplusPv = Math.abs(netAfterPv);
+                            const canChargeToBattery = Math.min(
+                                surplusPv,
+                                batteryMaxEnergyWh - currentBatteryEnergyWh,
+                            );
+                            energyToBatteryThisInterval = canChargeToBattery;
+                            currentBatteryEnergyWh += canChargeToBattery;
+                            totalEnergyChargedToBatteryWh += canChargeToBattery;
+                            // Remaining surplus goes to grid
+                            energyToGridThisInterval =
+                                surplusPv - canChargeToBattery;
+                        }
+                    } else {
+                        if (netAfterPv > 0) {
+                            energyFromGridThisInterval = netAfterPv;
+                        } else {
+                            // All surplus goes to grid when no battery
+                            energyToGridThisInterval = Math.abs(netAfterPv);
+                        }
+                    }
+
+                    energyFromGridThisInterval = Math.max(
+                        0,
+                        energyFromGridThisInterval,
+                    );
+                    energyToGridThisInterval = Math.max(
+                        0,
+                        energyToGridThisInterval,
+                    );
+                    totalGridEnergyWh += energyFromGridThisInterval;
+
+                    timeLabels.push(
+                        currentIntervalStartSimTime.toFixed(1) + "h",
+                    );
+                    deviceConsumptionData.push(intervalDevicePowerW.toFixed(1));
+                    if (useBattery)
+                        batteryChargeData.push(
+                            (
+                                (currentBatteryEnergyWh / batteryMaxEnergyWh) *
+                                100
+                            ).toFixed(1),
+                        );
+                    gridConsumptionData.push(
+                        (
+                            energyFromGridThisInterval / timePerIntervalHours
+                        ).toFixed(1),
+                    );
+                }
+
+                const finalTotalCost = (totalGridEnergyWh / 1000) * costPerKwh;
+
+                energyConsumedDeviceOutput.textContent =
+                    formatEnergy(totalDeviceEnergyWh);
+                energyFromPvOutput.textContent = usePv
+                    ? formatEnergy(finalTotalPvEnergyWh)
+                    : "--";
+                energyFromBatteryOutput.textContent = useBattery
+                    ? formatEnergy(totalEnergyDrawnFromBatteryWh)
+                    : "--";
+                energyToBatteryOutput.textContent = useBattery
+                    ? formatEnergy(totalEnergyChargedToBatteryWh)
+                    : "--";
+                energyFromGridOutput.textContent =
+                    formatEnergy(totalGridEnergyWh);
+                totalCostOutput.textContent = finalTotalCost.toLocaleString(
+                    currentLang === "it" ? "it-IT" : "en-US",
+                    { style: "currency", currency: "EUR" },
+                );
+
+                if (consumptionChart) consumptionChart.destroy();
+                const datasets = [
+                    {
+                        label: t.chartLabelDeviceConsumption,
+                        data: deviceConsumptionData,
+                        borderColor: "rgba(255, 99, 132, 1)",
+                        backgroundColor: "rgba(255, 99, 132, 0.1)",
+                        tension: 0.3,
+                        fill: true,
+                        yAxisID: "yPower",
+                    },
+                    {
+                        label: t.chartLabelGridDraw,
+                        data: gridConsumptionData,
+                        borderColor: "rgba(255, 159, 64, 1)",
+                        backgroundColor: "rgba(255, 159, 64, 0.1)",
+                        tension: 0.3,
+                        fill: true,
+                        yAxisID: "yPower",
+                    },
+                ];
+                if (usePv) {
+                    datasets.push({
+                        label: t.chartLabelPvProduction,
+                        data: pvProductionData_scaled.map((p) => p.toFixed(1)),
+                        borderColor: "rgba(75, 192, 192, 1)",
+                        backgroundColor: "rgba(75, 192, 192, 0.1)",
+                        tension: 0.3,
+                        fill: true,
+                        yAxisID: "yPower",
+                    });
+                    datasets.push({
+                        label: t.chartLabelAvgPvProduction,
+                        data: Array(numberOfIntervals).fill(
+                            (avgDailyPvEnergyWh_target_adjusted / 24).toFixed(
+                                1,
+                            ),
+                        ),
+                        borderColor: "rgba(75, 192, 192, 0.5)",
+                        borderDash: [3, 3],
+                        tension: 0.1,
+                        fill: false,
+                        pointRadius: 0,
+                        yAxisID: "yPower",
+                    });
+                }
+                if (useBattery) {
+                    datasets.push({
+                        label: t.chartLabelBatteryCharge,
+                        data: batteryChargeData,
+                        borderColor: "rgba(54, 162, 235, 1)",
+                        backgroundColor: "rgba(54, 162, 235, 0.1)",
+                        tension: 0.3,
+                        fill: false,
+                        yAxisID: "yBattery",
+                    });
+                }
+
+                consumptionChart = new Chart(consumptionChartCanvas, {
+                    type: "line",
+                    data: { labels: timeLabels, datasets: datasets },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        interaction: { mode: "index", intersect: false },
+                        stacked: false,
+                        scales: {
+                            yPower: {
+                                type: "linear",
+                                display: true,
+                                position: "left",
+                                title: {
+                                    display: true,
+                                    text: t.chartAxisPower,
+                                    font: { size: 12 },
+                                    color: "#4a5568",
+                                },
+                                grid: { color: "#e2e8f0" },
+                                ticks: { color: "#718096" },
+                            },
+                            yBattery: {
+                                type: "linear",
+                                display: useBattery,
+                                position: "right",
+                                min: 0,
+                                max: 100,
+                                title: {
+                                    display: true,
+                                    text: t.chartAxisBattery,
+                                    font: { size: 12 },
+                                    color: "#4a5568",
+                                },
+                                grid: { drawOnChartArea: false },
+                                ticks: { color: "#718096" },
+                            },
+                            x: {
+                                title: {
+                                    display: true,
+                                    text: t.chartAxisDuration,
+                                    font: { size: 14, weight: "500" },
+                                    color: "#4a5568",
+                                },
+                                grid: { display: false },
+                                ticks: {
+                                    color: "#718096",
+                                    maxRotation: 45,
+                                    autoSkip: true,
+                                    maxTicksLimit: 24,
+                                },
+                            },
+                        },
+                        plugins: {
+                            legend: {
+                                position: "top",
+                                labels: {
+                                    font: { size: 10 },
+                                    color: "#4a5568",
+                                },
+                            },
+                            tooltip: {
+                                callbacks: {
+                                    label: function (context) {
+                                        let label = context.dataset.label || "";
+                                        if (label) label += ": ";
+                                        if (context.parsed.y !== null) {
+                                            const unit =
+                                                context.dataset.yAxisID ===
+                                                "yBattery"
+                                                    ? " %"
+                                                    : " W";
+                                            label +=
+                                                parseFloat(
+                                                    context.parsed.y,
+                                                ).toLocaleString(
+                                                    currentLang === "it"
+                                                        ? "it-IT"
+                                                        : "en-US",
+                                                    {
+                                                        minimumFractionDigits: 1,
+                                                        maximumFractionDigits: 1,
+                                                    },
+                                                ) + unit;
+                                        }
+                                        return label;
+                                    },
+                                },
+                            },
+                        },
+                        animation: { duration: 500, easing: "easeInOutQuart" },
+                    },
+                });
+            });
+
+            updateUI(currentLang);
+            chartMessageP.classList.remove("hidden");
+        </script>
+    </body>
 </html>
diff --git a/pages/savings-calculator.html b/pages/savings-calculator.html
index 26d826b..43b70c1 100644
--- a/pages/savings-calculator.html
+++ b/pages/savings-calculator.html
@@ -1,377 +1,806 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="it">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Calcolatore di Risparmio Fotovoltaico (Completo)</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
-    <style>
-        body {
-            font-family: 'Inter', sans-serif;
-        }
-        .card-shadow {
-            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-        }
-        .action-btn:hover {
-            opacity: 0.8;
-        }
-        .action-btn:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-        }
-        .lang-btn {
-            opacity: 0.6;
-        }
-        .lang-btn.active {
-            opacity: 1;
-            font-weight: 800;
-            text-decoration: underline;
-        }
-    </style>
-</head>
-<body class="bg-gray-100 flex items-center justify-center min-h-screen p-4">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Calcolatore di Risparmio Fotovoltaico (Completo)</title>
+        <script src="https://cdn.tailwindcss.com"></script>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
+            rel="stylesheet"
+        />
+        <style>
+            body {
+                font-family: "Inter", sans-serif;
+            }
+            .card-shadow {
+                box-shadow:
+                    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+                    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+            }
+            .action-btn:hover {
+                opacity: 0.8;
+            }
+            .action-btn:disabled {
+                opacity: 0.5;
+                cursor: not-allowed;
+            }
+            .lang-btn {
+                opacity: 0.6;
+            }
+            .lang-btn.active {
+                opacity: 1;
+                font-weight: 800;
+                text-decoration: underline;
+            }
+        </style>
+    </head>
+    <body class="bg-gray-100 flex items-center justify-center min-h-screen p-4">
+        <div
+            class="w-full max-w-3xl bg-white rounded-2xl card-shadow overflow-hidden"
+        >
+            <div class="p-6 md:p-8">
+                <div class="flex justify-end gap-3 text-sm mb-4">
+                    <button id="lang-it" class="lang-btn">IT</button>
+                    <button id="lang-en" class="lang-btn">EN</button>
+                </div>
 
-    <div class="w-full max-w-3xl bg-white rounded-2xl card-shadow overflow-hidden">
-        <div class="p-6 md:p-8">
-            <div class="flex justify-end gap-3 text-sm mb-4">
-                <button id="lang-it" class="lang-btn">IT</button>
-                <button id="lang-en" class="lang-btn">EN</button>
-            </div>
+                <h1
+                    class="text-2xl md:text-3xl font-bold text-gray-800 text-center mb-2"
+                    data-translate-key="mainTitle"
+                >
+                    Calcolatore Economico Fotovoltaico
+                </h1>
+                <p
+                    class="text-gray-600 text-center mb-6 md:mb-8"
+                    data-translate-key="mainSubtitle"
+                >
+                    Analizza costi, risparmi e guadagni del tuo impianto solare.
+                </p>
 
-            <h1 class="text-2xl md:text-3xl font-bold text-gray-800 text-center mb-2" data-translate-key="mainTitle">Calcolatore Economico Fotovoltaico</h1>
-            <p class="text-gray-600 text-center mb-6 md:mb-8" data-translate-key="mainSubtitle">Analizza costi, risparmi e guadagni del tuo impianto solare.</p>
-
-            <!-- Sezione Input Principali -->
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
-                <div>
-                    <label for="consumoTotale" class="block text-sm font-medium text-gray-700 mb-1" data-translate-key="totalConsumptionLabel">Consumo Totale Casa (kWh)</label>
-                    <input type="number" id="consumoTotale" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition" data-translate-key-placeholder="totalConsumptionPlaceholder">
-                </div>
-                 <div>
-                    <label for="consumoRete" class="block text-sm font-medium text-gray-700 mb-1" data-translate-key="gridConsumptionLabel">Consumo dalla Rete (kWh)</label>
-                    <input type="number" id="consumoRete" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition" data-translate-key-placeholder="gridConsumptionPlaceholder">
-                </div>
-                <div>
-                    <label for="energiaImmessa" class="block text-sm font-medium text-gray-700 mb-1" data-translate-key="feedInEnergyLabel">Energia Immessa in Rete (kWh)</label>
-                    <input type="number" id="energiaImmessa" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition" data-translate-key-placeholder="feedInEnergyPlaceholder">
-                </div>
-                <div>
-                    <label for="costoKwh" class="block text-sm font-medium text-gray-700 mb-1" data-translate-key="purchasePriceLabel">Costo Acquisto kWh (€)</label>
-                    <input type="number" id="costoKwh" step="0.01" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition" data-translate-key-placeholder="purchasePricePlaceholder">
-                </div>
-                <div class="md:col-span-2">
-                    <label for="prezzoVendita" class="block text-sm font-medium text-gray-700 mb-1" data-translate-key="sellPriceLabel">Prezzo Vendita kWh (€)</label>
-                    <input type="number" id="prezzoVendita" step="0.01" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition" data-translate-key-placeholder="sellPricePlaceholder">
-                </div>
-            </div>
-            
-            <!-- Sezione Gestione Gruppi -->
-            <div class="border-t pt-6 mb-6">
-                 <h3 class="text-lg font-semibold text-gray-700 mb-4 text-center" data-translate-key="groupManagementTitle">Gestione Gruppi di Utenze</h3>
-                 <div class="bg-gray-50 p-4 rounded-lg">
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 items-end">
-                        <div>
-                            <label for="groupNameInput" class="block text-sm font-medium text-gray-700 mb-1" data-translate-key="newGroupNameLabel">Nome Nuovo Gruppo</label>
-                            <input type="text" id="groupNameInput" class="w-full px-3 py-2 border border-gray-300 rounded-lg" data-translate-key-placeholder="newGroupNamePlaceholder">
-                        </div>
-                        <button id="saveGroupBtn" class="w-full bg-teal-600 text-white font-semibold py-2 px-4 rounded-lg action-btn transition-colors" data-translate-key="saveGroupBtn">Salva Lista Corrente come Gruppo</button>
+                <!-- Sezione Input Principali -->
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+                    <div>
+                        <label
+                            for="consumoTotale"
+                            class="block text-sm font-medium text-gray-700 mb-1"
+                            data-translate-key="totalConsumptionLabel"
+                            >Consumo Totale Casa (kWh)</label
+                        >
+                        <input
+                            type="number"
+                            id="consumoTotale"
+                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
+                            data-translate-key-placeholder="totalConsumptionPlaceholder"
+                        />
                     </div>
-                    <div class="border-t my-4"></div>
-                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-end">
-                        <div class="md:col-span-2">
-                            <label for="groupSelect" class="block text-sm font-medium text-gray-700 mb-1" data-translate-key="savedGroupsLabel">Gruppi Salvati</label>
-                            <select id="groupSelect" class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white"></select>
+                    <div>
+                        <label
+                            for="consumoRete"
+                            class="block text-sm font-medium text-gray-700 mb-1"
+                            data-translate-key="gridConsumptionLabel"
+                            >Consumo dalla Rete (kWh)</label
+                        >
+                        <input
+                            type="number"
+                            id="consumoRete"
+                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
+                            data-translate-key-placeholder="gridConsumptionPlaceholder"
+                        />
+                    </div>
+                    <div>
+                        <label
+                            for="energiaImmessa"
+                            class="block text-sm font-medium text-gray-700 mb-1"
+                            data-translate-key="feedInEnergyLabel"
+                            >Energia Immessa in Rete (kWh)</label
+                        >
+                        <input
+                            type="number"
+                            id="energiaImmessa"
+                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
+                            data-translate-key-placeholder="feedInEnergyPlaceholder"
+                        />
+                    </div>
+                    <div>
+                        <label
+                            for="costoKwh"
+                            class="block text-sm font-medium text-gray-700 mb-1"
+                            data-translate-key="purchasePriceLabel"
+                            >Costo Acquisto kWh (€)</label
+                        >
+                        <input
+                            type="number"
+                            id="costoKwh"
+                            step="0.01"
+                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
+                            data-translate-key-placeholder="purchasePricePlaceholder"
+                        />
+                    </div>
+                    <div class="md:col-span-2">
+                        <label
+                            for="prezzoVendita"
+                            class="block text-sm font-medium text-gray-700 mb-1"
+                            data-translate-key="sellPriceLabel"
+                            >Prezzo Vendita kWh (€)</label
+                        >
+                        <input
+                            type="number"
+                            id="prezzoVendita"
+                            step="0.01"
+                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
+                            data-translate-key-placeholder="sellPricePlaceholder"
+                        />
+                    </div>
+                </div>
+
+                <!-- Sezione Gestione Gruppi -->
+                <div class="border-t pt-6 mb-6">
+                    <h3
+                        class="text-lg font-semibold text-gray-700 mb-4 text-center"
+                        data-translate-key="groupManagementTitle"
+                    >
+                        Gestione Gruppi di Utenze
+                    </h3>
+                    <div class="bg-gray-50 p-4 rounded-lg">
+                        <div
+                            class="grid grid-cols-1 md:grid-cols-2 gap-4 items-end"
+                        >
+                            <div>
+                                <label
+                                    for="groupNameInput"
+                                    class="block text-sm font-medium text-gray-700 mb-1"
+                                    data-translate-key="newGroupNameLabel"
+                                    >Nome Nuovo Gruppo</label
+                                >
+                                <input
+                                    type="text"
+                                    id="groupNameInput"
+                                    class="w-full px-3 py-2 border border-gray-300 rounded-lg"
+                                    data-translate-key-placeholder="newGroupNamePlaceholder"
+                                />
+                            </div>
+                            <button
+                                id="saveGroupBtn"
+                                class="w-full bg-teal-600 text-white font-semibold py-2 px-4 rounded-lg action-btn transition-colors"
+                                data-translate-key="saveGroupBtn"
+                            >
+                                Salva Lista Corrente come Gruppo
+                            </button>
                         </div>
-                        <div class="flex gap-2">
-                            <button id="loadGroupBtn" class="w-full bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg action-btn transition-colors" data-translate-key="loadBtn">Carica</button>
-                            <button id="deleteGroupBtn" class="w-full bg-red-500 text-white font-semibold py-2 px-4 rounded-lg action-btn transition-colors" data-translate-key="deleteBtn">Elimina</button>
+                        <div class="border-t my-4"></div>
+                        <div
+                            class="grid grid-cols-1 md:grid-cols-3 gap-4 items-end"
+                        >
+                            <div class="md:col-span-2">
+                                <label
+                                    for="groupSelect"
+                                    class="block text-sm font-medium text-gray-700 mb-1"
+                                    data-translate-key="savedGroupsLabel"
+                                    >Gruppi Salvati</label
+                                >
+                                <select
+                                    id="groupSelect"
+                                    class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white"
+                                ></select>
+                            </div>
+                            <div class="flex gap-2">
+                                <button
+                                    id="loadGroupBtn"
+                                    class="w-full bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg action-btn transition-colors"
+                                    data-translate-key="loadBtn"
+                                >
+                                    Carica
+                                </button>
+                                <button
+                                    id="deleteGroupBtn"
+                                    class="w-full bg-red-500 text-white font-semibold py-2 px-4 rounded-lg action-btn transition-colors"
+                                    data-translate-key="deleteBtn"
+                                >
+                                    Elimina
+                                </button>
+                            </div>
                         </div>
                     </div>
-                 </div>
+                </div>
+
+                <!-- Sezione Utenze Specifiche -->
+                <div class="border-t pt-6">
+                    <h3
+                        class="text-lg font-semibold text-gray-700 mb-4 text-center"
+                        data-translate-key="specificUtilitiesTitle"
+                    >
+                        Aggiungi Utenze Specifiche (Opzionale)
+                    </h3>
+                    <div class="flex flex-col md:flex-row gap-4 items-end mb-4">
+                        <div class="flex-grow w-full">
+                            <label
+                                for="nomeUtenza"
+                                class="block text-sm font-medium text-gray-700 mb-1"
+                                data-translate-key="utilityNameLabel"
+                                >Nome Utenza</label
+                            >
+                            <input
+                                type="text"
+                                id="nomeUtenza"
+                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                                data-translate-key-placeholder="utilityNamePlaceholder"
+                            />
+                        </div>
+                        <div class="flex-grow w-full md:w-auto">
+                            <label
+                                for="consumoUtenza"
+                                class="block text-sm font-medium text-gray-700 mb-1"
+                                data-translate-key="consumptionLabel"
+                                >Consumo (kWh)</label
+                            >
+                            <input
+                                type="number"
+                                id="consumoUtenza"
+                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                                data-translate-key-placeholder="consumptionPlaceholder"
+                            />
+                        </div>
+                        <button
+                            id="addUtenzaBtn"
+                            class="w-full md:w-auto bg-gray-700 text-white font-semibold py-2 px-6 rounded-lg hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300 transition-all"
+                            data-translate-key="addBtn"
+                        >
+                            Aggiungi
+                        </button>
+                    </div>
+                    <div id="listaUtenze" class="space-y-2">
+                        <!-- Le utenze aggiunte verranno mostrate qui -->
+                    </div>
+                </div>
+
+                <!-- Pulsante di Calcolo -->
+                <div class="text-center mt-8">
+                    <button
+                        id="calcolaBtn"
+                        class="bg-blue-600 text-white font-bold py-3 px-8 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-300 transition-all duration-300 transform hover:scale-105"
+                        data-translate-key="calculateBtn"
+                    >
+                        Calcola Bilancio
+                    </button>
+                </div>
+                <!-- Messaggio di Errore -->
+                <div
+                    id="error-message"
+                    class="hidden mt-4 text-center text-red-600 font-medium p-3 bg-red-100 rounded-lg"
+                ></div>
             </div>
 
-            <!-- Sezione Utenze Specifiche -->
-            <div class="border-t pt-6">
-                 <h3 class="text-lg font-semibold text-gray-700 mb-4 text-center" data-translate-key="specificUtilitiesTitle">Aggiungi Utenze Specifiche (Opzionale)</h3>
-                 <div class="flex flex-col md:flex-row gap-4 items-end mb-4">
-                     <div class="flex-grow w-full">
-                         <label for="nomeUtenza" class="block text-sm font-medium text-gray-700 mb-1" data-translate-key="utilityNameLabel">Nome Utenza</label>
-                         <input type="text" id="nomeUtenza" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500" data-translate-key-placeholder="utilityNamePlaceholder">
-                     </div>
-                     <div class="flex-grow w-full md:w-auto">
-                         <label for="consumoUtenza" class="block text-sm font-medium text-gray-700 mb-1" data-translate-key="consumptionLabel">Consumo (kWh)</label>
-                         <input type="number" id="consumoUtenza" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500" data-translate-key-placeholder="consumptionPlaceholder">
-                     </div>
-                     <button id="addUtenzaBtn" class="w-full md:w-auto bg-gray-700 text-white font-semibold py-2 px-6 rounded-lg hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300 transition-all" data-translate-key="addBtn">Aggiungi</button>
-                 </div>
-                 <div id="listaUtenze" class="space-y-2">
-                    <!-- Le utenze aggiunte verranno mostrate qui -->
-                 </div>
-            </div>
+            <!-- Sezione Risultati -->
+            <div
+                id="risultati"
+                class="hidden bg-gray-50 p-6 md:p-8 border-t border-gray-200"
+            >
+                <!-- Riepilogo Economico -->
+                <div class="mb-8">
+                    <h2
+                        class="text-xl md:text-2xl font-bold text-gray-800 text-center mb-6"
+                        data-translate-key="economicSummaryTitle"
+                    >
+                        Riepilogo Economico
+                    </h2>
+                    <div
+                        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 text-center"
+                    >
+                        <div
+                            class="bg-white p-4 rounded-lg border border-red-200"
+                        >
+                            <p
+                                class="text-sm text-gray-500"
+                                data-translate-key="costFromGridLabel"
+                            >
+                                Costo dalla Rete
+                            </p>
+                            <p
+                                id="costoRete"
+                                class="text-2xl font-bold text-red-600"
+                            >
+                                -
+                            </p>
+                        </div>
+                        <div
+                            class="bg-white p-4 rounded-lg border border-green-200"
+                        >
+                            <p
+                                class="text-sm text-gray-500"
+                                data-translate-key="savingsFromSelfConsumptionLabel"
+                            >
+                                Risparmio Autoconsumo
+                            </p>
+                            <p
+                                id="risparmioFV"
+                                class="text-2xl font-bold text-green-600"
+                            >
+                                -
+                            </p>
+                        </div>
+                        <div
+                            class="bg-white p-4 rounded-lg border border-yellow-400"
+                        >
+                            <p
+                                class="text-sm text-gray-500"
+                                data-translate-key="feedInRevenueLabel"
+                            >
+                                Guadagno Immissione
+                            </p>
+                            <p
+                                id="guadagnoImmissione"
+                                class="text-2xl font-bold text-yellow-600"
+                            >
+                                -
+                            </p>
+                        </div>
+                        <div
+                            id="bilancioCard"
+                            class="bg-white p-4 rounded-lg border-2"
+                        >
+                            <p
+                                class="text-sm font-semibold"
+                                data-translate-key="finalBalanceLabel"
+                            >
+                                Bilancio Finale
+                            </p>
+                            <p id="bilancioFinale" class="text-2xl font-bold">
+                                -
+                            </p>
+                        </div>
+                    </div>
+                </div>
 
-            <!-- Pulsante di Calcolo -->
-            <div class="text-center mt-8">
-                <button id="calcolaBtn" class="bg-blue-600 text-white font-bold py-3 px-8 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-300 transition-all duration-300 transform hover:scale-105" data-translate-key="calculateBtn">
-                    Calcola Bilancio
-                </button>
+                <!-- Riepilogo Energetico -->
+                <div class="mb-8 pt-6 border-t">
+                    <h2
+                        class="text-xl md:text-2xl font-bold text-gray-800 text-center mb-6"
+                        data-translate-key="energySummaryTitle"
+                    >
+                        Riepilogo Energetico (kWh)
+                    </h2>
+                    <div
+                        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 text-center"
+                    >
+                        <div class="bg-white p-4 rounded-lg border">
+                            <p
+                                class="text-sm text-gray-500"
+                                data-translate-key="selfConsumedEnergyLabel"
+                            >
+                                Energia Autoconsumata
+                            </p>
+                            <p
+                                id="energiaFV"
+                                class="text-2xl font-bold text-blue-600"
+                            >
+                                -
+                            </p>
+                        </div>
+                        <div class="bg-white p-4 rounded-lg border">
+                            <p
+                                class="text-sm text-gray-500"
+                                data-translate-key="energyFromGridLabel"
+                            >
+                                Energia da Rete
+                            </p>
+                            <p
+                                id="energiaRete"
+                                class="text-2xl font-bold text-red-600"
+                            >
+                                -
+                            </p>
+                        </div>
+                        <div class="bg-white p-4 rounded-lg border">
+                            <p
+                                class="text-sm text-gray-500"
+                                data-translate-key="fedInEnergySummaryLabel"
+                            >
+                                Energia Immessa
+                            </p>
+                            <p
+                                id="energiaImmessaOut"
+                                class="text-2xl font-bold text-yellow-600"
+                            >
+                                -
+                            </p>
+                        </div>
+                        <div class="bg-white p-4 rounded-lg border">
+                            <p
+                                class="text-sm text-gray-500"
+                                data-translate-key="totalPVProductionLabel"
+                            >
+                                Totale Prodotto da FV
+                            </p>
+                            <p
+                                id="energiaProdotta"
+                                class="text-2xl font-bold text-green-600"
+                            >
+                                -
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Analisi Costi Utenze Specifiche -->
+                <div
+                    id="analisi-costi-specifica"
+                    class="hidden mb-8 pt-6 border-t"
+                >
+                    <h3
+                        class="text-lg font-semibold text-gray-700 mb-4 text-center"
+                        data-translate-key="specificUtilitiesCostAnalysisTitle"
+                    >
+                        Analisi Costi Utenze Specifiche
+                    </h3>
+                    <div id="lista-costi-utenze" class="space-y-3">
+                        <!-- I costi delle utenze verranno mostrati qui -->
+                    </div>
+                </div>
+
+                <!-- Grafico Ripartizione Fonti -->
+                <div class="pt-6 border-t">
+                    <h3
+                        class="text-lg font-semibold text-gray-700 mb-3 text-center"
+                        data-translate-key="energySourcesBreakdownTitle"
+                    >
+                        Ripartizione Fonti Energetiche (Consumo Casa)
+                    </h3>
+                    <div
+                        class="w-full bg-gray-200 rounded-full h-8 overflow-hidden flex"
+                    >
+                        <div
+                            id="barraRete"
+                            class="bg-red-500 h-full flex items-center justify-center text-white text-sm font-medium transition-all duration-500"
+                            style="width: 0%"
+                        ></div>
+                        <div
+                            id="barraFV"
+                            class="bg-green-500 h-full flex items-center justify-center text-white text-sm font-medium transition-all duration-500"
+                            style="width: 0%"
+                        ></div>
+                    </div>
+                    <div class="flex justify-between mt-2 text-sm">
+                        <div class="flex items-center">
+                            <span
+                                class="w-3 h-3 bg-red-500 rounded-full mr-2"
+                            ></span>
+                            <span id="percentualeRete">Dalla Rete: -%</span>
+                        </div>
+                        <div class="flex items-center">
+                            <span
+                                class="w-3 h-3 bg-green-500 rounded-full mr-2"
+                            ></span>
+                            <span id="percentualeFV">Da Fotovoltaico: -%</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Grafico Incidenza Consumi -->
+                <div id="grafico-specifica" class="hidden mt-8 pt-6 border-t">
+                    <h3
+                        class="text-lg font-semibold text-gray-700 mb-3 text-center"
+                        data-translate-key="utilitiesImpactTitle"
+                    >
+                        Incidenza Utenze sui Consumi Totali
+                    </h3>
+                    <div
+                        class="w-full bg-gray-200 rounded-full h-8 overflow-hidden flex"
+                    >
+                        <div
+                            id="barraSpecifica"
+                            class="bg-purple-600 h-full flex items-center justify-center text-white text-sm font-medium transition-all duration-500"
+                            style="width: 0%"
+                        ></div>
+                        <div
+                            id="barraAltri"
+                            class="bg-gray-400 h-full flex items-center justify-center text-white text-sm font-medium transition-all duration-500"
+                            style="width: 0%"
+                        ></div>
+                    </div>
+                    <div class="flex justify-between mt-2 text-sm">
+                        <div class="flex items-center">
+                            <span
+                                class="w-3 h-3 bg-purple-600 rounded-full mr-2"
+                            ></span>
+                            <span id="percentualeSpecifica"
+                                >Totale Utenze Specifiche: -%</span
+                            >
+                        </div>
+                        <div class="flex items-center">
+                            <span
+                                class="w-3 h-3 bg-gray-400 rounded-full mr-2"
+                            ></span>
+                            <span id="percentualeAltri">Altri Consumi: -%</span>
+                        </div>
+                    </div>
+                </div>
             </div>
-             <!-- Messaggio di Errore -->
-            <div id="error-message" class="hidden mt-4 text-center text-red-600 font-medium p-3 bg-red-100 rounded-lg"></div>
         </div>
 
-        <!-- Sezione Risultati -->
-        <div id="risultati" class="hidden bg-gray-50 p-6 md:p-8 border-t border-gray-200">
-            
-            <!-- Riepilogo Economico -->
-            <div class="mb-8">
-                <h2 class="text-xl md:text-2xl font-bold text-gray-800 text-center mb-6" data-translate-key="economicSummaryTitle">Riepilogo Economico</h2>
-                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 text-center">
-                    <div class="bg-white p-4 rounded-lg border border-red-200">
-                        <p class="text-sm text-gray-500" data-translate-key="costFromGridLabel">Costo dalla Rete</p>
-                        <p id="costoRete" class="text-2xl font-bold text-red-600">-</p>
-                    </div>
-                    <div class="bg-white p-4 rounded-lg border border-green-200">
-                        <p class="text-sm text-gray-500" data-translate-key="savingsFromSelfConsumptionLabel">Risparmio Autoconsumo</p>
-                        <p id="risparmioFV" class="text-2xl font-bold text-green-600">-</p>
-                    </div>
-                    <div class="bg-white p-4 rounded-lg border border-yellow-400">
-                        <p class="text-sm text-gray-500" data-translate-key="feedInRevenueLabel">Guadagno Immissione</p>
-                        <p id="guadagnoImmissione" class="text-2xl font-bold text-yellow-600">-</p>
-                    </div>
-                    <div id="bilancioCard" class="bg-white p-4 rounded-lg border-2">
-                        <p class="text-sm font-semibold" data-translate-key="finalBalanceLabel">Bilancio Finale</p>
-                        <p id="bilancioFinale" class="text-2xl font-bold">-</p>
-                    </div>
-                </div>
-            </div>
+        <script>
+            // --- STATE MANAGEMENT ---
+            let specificUtilities = [];
+            let utilityGroups = [];
+            let currentLanguage = "it";
+            let lastCalculationData = null;
 
-             <!-- Riepilogo Energetico -->
-            <div class="mb-8 pt-6 border-t">
-                <h2 class="text-xl md:text-2xl font-bold text-gray-800 text-center mb-6" data-translate-key="energySummaryTitle">Riepilogo Energetico (kWh)</h2>
-                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 text-center">
-                    <div class="bg-white p-4 rounded-lg border">
-                        <p class="text-sm text-gray-500" data-translate-key="selfConsumedEnergyLabel">Energia Autoconsumata</p>
-                        <p id="energiaFV" class="text-2xl font-bold text-blue-600">-</p>
-                    </div>
-                    <div class="bg-white p-4 rounded-lg border">
-                        <p class="text-sm text-gray-500" data-translate-key="energyFromGridLabel">Energia da Rete</p>
-                        <p id="energiaRete" class="text-2xl font-bold text-red-600">-</p>
-                    </div>
-                    <div class="bg-white p-4 rounded-lg border">
-                        <p class="text-sm text-gray-500" data-translate-key="fedInEnergySummaryLabel">Energia Immessa</p>
-                        <p id="energiaImmessaOut" class="text-2xl font-bold text-yellow-600">-</p>
-                    </div>
-                    <div class="bg-white p-4 rounded-lg border">
-                        <p class="text-sm text-gray-500" data-translate-key="totalPVProductionLabel">Totale Prodotto da FV</p>
-                        <p id="energiaProdotta" class="text-2xl font-bold text-green-600">-</p>
-                    </div>
-                </div>
-            </div>
+            // --- TRANSLATIONS ---
+            const translations = {
+                mainTitle: {
+                    it: "Calcolatore Economico Fotovoltaico",
+                    en: "Economic Photovoltaic Calculator",
+                },
+                mainSubtitle: {
+                    it: "Analizza costi, risparmi e guadagni del tuo impianto solare.",
+                    en: "Analyze costs, savings, and earnings of your solar system.",
+                },
+                totalConsumptionLabel: {
+                    it: "Consumo Totale Casa (kWh)",
+                    en: "Total Home Consumption (kWh)",
+                },
+                totalConsumptionPlaceholder: { it: "Es. 450", en: "E.g. 450" },
+                gridConsumptionLabel: {
+                    it: "Consumo dalla Rete (kWh)",
+                    en: "Consumption from Grid (kWh)",
+                },
+                gridConsumptionPlaceholder: { it: "Es. 150", en: "E.g. 150" },
+                feedInEnergyLabel: {
+                    it: "Energia Immessa in Rete (kWh)",
+                    en: "Energy Fed into Grid (kWh)",
+                },
+                feedInEnergyPlaceholder: { it: "Es. 100", en: "E.g. 100" },
+                purchasePriceLabel: {
+                    it: "Costo Acquisto kWh (€)",
+                    en: "Purchase Price per kWh (€)",
+                },
+                purchasePricePlaceholder: { it: "Es. 0.25", en: "E.g. 0.25" },
+                sellPriceLabel: {
+                    it: "Prezzo Vendita kWh (€)",
+                    en: "Selling Price per kWh (€)",
+                },
+                sellPricePlaceholder: { it: "Es. 0.10", en: "E.g. 0.10" },
+                groupManagementTitle: {
+                    it: "Gestione Gruppi di Utenze",
+                    en: "Utility Groups Management",
+                },
+                newGroupNameLabel: {
+                    it: "Nome Nuovo Gruppo",
+                    en: "New Group Name",
+                },
+                newGroupNamePlaceholder: {
+                    it: "Es. Utenze Notturne",
+                    en: "E.g. Night Utilities",
+                },
+                saveGroupBtn: {
+                    it: "Salva Lista Corrente come Gruppo",
+                    en: "Save Current List as Group",
+                },
+                savedGroupsLabel: { it: "Gruppi Salvati", en: "Saved Groups" },
+                loadBtn: { it: "Carica", en: "Load" },
+                deleteBtn: { it: "Elimina", en: "Delete" },
+                specificUtilitiesTitle: {
+                    it: "Aggiungi Utenze Specifiche (Opzionale)",
+                    en: "Add Specific Utilities (Optional)",
+                },
+                utilityNameLabel: { it: "Nome Utenza", en: "Utility Name" },
+                utilityNamePlaceholder: {
+                    it: "Es. Auto Elettrica",
+                    en: "E.g. Electric Car",
+                },
+                consumptionLabel: {
+                    it: "Consumo (kWh)",
+                    en: "Consumption (kWh)",
+                },
+                consumptionPlaceholder: { it: "100", en: "100" },
+                addBtn: { it: "Aggiungi", en: "Add" },
+                calculateBtn: {
+                    it: "Calcola Bilancio",
+                    en: "Calculate Balance",
+                },
+                economicSummaryTitle: {
+                    it: "Riepilogo Economico",
+                    en: "Economic Summary",
+                },
+                costFromGridLabel: {
+                    it: "Costo dalla Rete",
+                    en: "Cost from Grid",
+                },
+                savingsFromSelfConsumptionLabel: {
+                    it: "Risparmio Autoconsumo",
+                    en: "Self-Consumption Savings",
+                },
+                feedInRevenueLabel: {
+                    it: "Guadagno Immissione",
+                    en: "Feed-in Revenue",
+                },
+                finalBalanceLabel: {
+                    it: "Bilancio Finale",
+                    en: "Final Balance",
+                },
+                energySummaryTitle: {
+                    it: "Riepilogo Energetico (kWh)",
+                    en: "Energy Summary (kWh)",
+                },
+                selfConsumedEnergyLabel: {
+                    it: "Energia Autoconsumata",
+                    en: "Self-Consumed Energy",
+                },
+                energyFromGridLabel: {
+                    it: "Energia da Rete",
+                    en: "Energy from Grid",
+                },
+                fedInEnergySummaryLabel: {
+                    it: "Energia Immessa",
+                    en: "Fed-in Energy",
+                },
+                totalPVProductionLabel: {
+                    it: "Totale Prodotto da FV",
+                    en: "Total PV Production",
+                },
+                specificUtilitiesCostAnalysisTitle: {
+                    it: "Analisi Costi Utenze Specifiche",
+                    en: "Specific Utilities Cost Analysis",
+                },
+                energySourcesBreakdownTitle: {
+                    it: "Ripartizione Fonti Energetiche (Consumo Casa)",
+                    en: "Energy Sources Breakdown (Home Consumption)",
+                },
+                utilitiesImpactTitle: {
+                    it: "Incidenza Utenze sui Consumi Totali",
+                    en: "Utilities Impact on Total Consumption",
+                },
+                noUtilitiesAdded: {
+                    it: "Nessuna utenza specifica aggiunta.",
+                    en: "No specific utilities added.",
+                },
+                utilityNamePlaceholderEdit: {
+                    it: "Nome Utenza",
+                    en: "Utility Name",
+                },
+                saveBtn: { it: "Salva", en: "Save" },
+                cancelBtn: { it: "Annulla", en: "Cancel" },
+                editBtn: { it: "Modifica", en: "Edit" },
+                removeBtn: { it: "Rimuovi", en: "Remove" },
+                fromGridLabel: { it: "Dalla Rete", en: "From Grid" },
+                fromPVLabel: { it: "Da Fotovoltaico", en: "From PV" },
+                totalSpecificUtilitiesLabel: {
+                    it: "Totale Utenze Specifiche",
+                    en: "Total Specific Utilities",
+                },
+                otherConsumptionsLabel: {
+                    it: "Altri Consumi",
+                    en: "Other Consumptions",
+                },
+                totalUtilitiesCostLabel: {
+                    it: "Costo Totale Utenze",
+                    en: "Total Utilities Cost",
+                },
+                selectGroupOption: {
+                    it: "-- Seleziona un gruppo --",
+                    en: "-- Select a group --",
+                },
+            };
 
-            <!-- Analisi Costi Utenze Specifiche -->
-            <div id="analisi-costi-specifica" class="hidden mb-8 pt-6 border-t">
-                 <h3 class="text-lg font-semibold text-gray-700 mb-4 text-center" data-translate-key="specificUtilitiesCostAnalysisTitle">Analisi Costi Utenze Specifiche</h3>
-                 <div id="lista-costi-utenze" class="space-y-3">
-                    <!-- I costi delle utenze verranno mostrati qui -->
-                 </div>
-            </div>
+            // --- DOM REFERENCES ---
+            const allDomRefs = {
+                consumoTotaleInput: document.getElementById("consumoTotale"),
+                consumoReteInput: document.getElementById("consumoRete"),
+                energiaImmessaInput: document.getElementById("energiaImmessa"),
+                costoKwhInput: document.getElementById("costoKwh"),
+                prezzoVenditaInput: document.getElementById("prezzoVendita"),
+                nomeUtenzaInput: document.getElementById("nomeUtenza"),
+                consumoUtenzaInput: document.getElementById("consumoUtenza"),
+                addUtenzaBtn: document.getElementById("addUtenzaBtn"),
+                listaUtenzeDiv: document.getElementById("listaUtenze"),
+                groupNameInput: document.getElementById("groupNameInput"),
+                saveGroupBtn: document.getElementById("saveGroupBtn"),
+                groupSelect: document.getElementById("groupSelect"),
+                loadGroupBtn: document.getElementById("loadGroupBtn"),
+                deleteGroupBtn: document.getElementById("deleteGroupBtn"),
+                calcolaBtn: document.getElementById("calcolaBtn"),
+                risultatiDiv: document.getElementById("risultati"),
+                errorMessageDiv: document.getElementById("error-message"),
+                costoReteEl: document.getElementById("costoRete"),
+                risparmioFVEl: document.getElementById("risparmioFV"),
+                guadagnoImmissioneEl:
+                    document.getElementById("guadagnoImmissione"),
+                bilancioFinaleEl: document.getElementById("bilancioFinale"),
+                bilancioCardEl: document.getElementById("bilancioCard"),
+                energiaFVEl: document.getElementById("energiaFV"),
+                energiaReteEl: document.getElementById("energiaRete"),
+                energiaImmessaOutEl:
+                    document.getElementById("energiaImmessaOut"),
+                energiaProdottaEl: document.getElementById("energiaProdotta"),
+                analisiCostiSpecificaDiv: document.getElementById(
+                    "analisi-costi-specifica",
+                ),
+                listaCostiUtenzeDiv:
+                    document.getElementById("lista-costi-utenze"),
+                barraReteEl: document.getElementById("barraRete"),
+                barraFVEl: document.getElementById("barraFV"),
+                percentualeReteEl: document.getElementById("percentualeRete"),
+                percentualeFVEl: document.getElementById("percentualeFV"),
+                graficoSpecificaDiv:
+                    document.getElementById("grafico-specifica"),
+                barraSpecificaEl: document.getElementById("barraSpecifica"),
+                barraAltriEl: document.getElementById("barraAltri"),
+                percentualeSpecificaEl: document.getElementById(
+                    "percentualeSpecifica",
+                ),
+                percentualeAltriEl: document.getElementById("percentualeAltri"),
+                langItBtn: document.getElementById("lang-it"),
+                langEnBtn: document.getElementById("lang-en"),
+            };
 
-            <!-- Grafico Ripartizione Fonti -->
-            <div class="pt-6 border-t">
-                <h3 class="text-lg font-semibold text-gray-700 mb-3 text-center" data-translate-key="energySourcesBreakdownTitle">Ripartizione Fonti Energetiche (Consumo Casa)</h3>
-                <div class="w-full bg-gray-200 rounded-full h-8 overflow-hidden flex">
-                    <div id="barraRete" class="bg-red-500 h-full flex items-center justify-center text-white text-sm font-medium transition-all duration-500" style="width: 0%;"></div>
-                    <div id="barraFV" class="bg-green-500 h-full flex items-center justify-center text-white text-sm font-medium transition-all duration-500" style="width: 0%;"></div>
-                </div>
-                <div class="flex justify-between mt-2 text-sm">
-                    <div class="flex items-center">
-                        <span class="w-3 h-3 bg-red-500 rounded-full mr-2"></span>
-                        <span id="percentualeRete">Dalla Rete: -%</span>
-                    </div>
-                    <div class="flex items-center">
-                        <span class="w-3 h-3 bg-green-500 rounded-full mr-2"></span>
-                        <span id="percentualeFV">Da Fotovoltaico: -%</span>
-                    </div>
-                </div>
-            </div>
-            
-            <!-- Grafico Incidenza Consumi -->
-            <div id="grafico-specifica" class="hidden mt-8 pt-6 border-t">
-                <h3 class="text-lg font-semibold text-gray-700 mb-3 text-center" data-translate-key="utilitiesImpactTitle">Incidenza Utenze sui Consumi Totali</h3>
-                <div class="w-full bg-gray-200 rounded-full h-8 overflow-hidden flex">
-                    <div id="barraSpecifica" class="bg-purple-600 h-full flex items-center justify-center text-white text-sm font-medium transition-all duration-500" style="width: 0%;"></div>
-                    <div id="barraAltri" class="bg-gray-400 h-full flex items-center justify-center text-white text-sm font-medium transition-all duration-500" style="width: 0%;"></div>
-                </div>
-                <div class="flex justify-between mt-2 text-sm">
-                    <div class="flex items-center">
-                        <span class="w-3 h-3 bg-purple-600 rounded-full mr-2"></span>
-                        <span id="percentualeSpecifica">Totale Utenze Specifiche: -%</span>
-                    </div>
-                    <div class="flex items-center">
-                        <span class="w-3 h-3 bg-gray-400 rounded-full mr-2"></span>
-                        <span id="percentualeAltri">Altri Consumi: -%</span>
-                    </div>
-                </div>
-            </div>
-
-        </div>
-    </div>
-
-    <script>
-        // --- STATE MANAGEMENT ---
-        let specificUtilities = [];
-        let utilityGroups = [];
-        let currentLanguage = 'it';
-        let lastCalculationData = null;
-
-        // --- TRANSLATIONS ---
-        const translations = {
-            mainTitle: { it: 'Calcolatore Economico Fotovoltaico', en: 'Economic Photovoltaic Calculator' },
-            mainSubtitle: { it: 'Analizza costi, risparmi e guadagni del tuo impianto solare.', en: 'Analyze costs, savings, and earnings of your solar system.' },
-            totalConsumptionLabel: { it: 'Consumo Totale Casa (kWh)', en: 'Total Home Consumption (kWh)' },
-            totalConsumptionPlaceholder: { it: 'Es. 450', en: 'E.g. 450' },
-            gridConsumptionLabel: { it: 'Consumo dalla Rete (kWh)', en: 'Consumption from Grid (kWh)' },
-            gridConsumptionPlaceholder: { it: 'Es. 150', en: 'E.g. 150' },
-            feedInEnergyLabel: { it: 'Energia Immessa in Rete (kWh)', en: 'Energy Fed into Grid (kWh)' },
-            feedInEnergyPlaceholder: { it: 'Es. 100', en: 'E.g. 100' },
-            purchasePriceLabel: { it: 'Costo Acquisto kWh (€)', en: 'Purchase Price per kWh (€)' },
-            purchasePricePlaceholder: { it: 'Es. 0.25', en: 'E.g. 0.25' },
-            sellPriceLabel: { it: 'Prezzo Vendita kWh (€)', en: 'Selling Price per kWh (€)' },
-            sellPricePlaceholder: { it: 'Es. 0.10', en: 'E.g. 0.10' },
-            groupManagementTitle: { it: 'Gestione Gruppi di Utenze', en: 'Utility Groups Management' },
-            newGroupNameLabel: { it: 'Nome Nuovo Gruppo', en: 'New Group Name' },
-            newGroupNamePlaceholder: { it: 'Es. Utenze Notturne', en: 'E.g. Night Utilities' },
-            saveGroupBtn: { it: 'Salva Lista Corrente come Gruppo', en: 'Save Current List as Group' },
-            savedGroupsLabel: { it: 'Gruppi Salvati', en: 'Saved Groups' },
-            loadBtn: { it: 'Carica', en: 'Load' },
-            deleteBtn: { it: 'Elimina', en: 'Delete' },
-            specificUtilitiesTitle: { it: 'Aggiungi Utenze Specifiche (Opzionale)', en: 'Add Specific Utilities (Optional)' },
-            utilityNameLabel: { it: 'Nome Utenza', en: 'Utility Name' },
-            utilityNamePlaceholder: { it: 'Es. Auto Elettrica', en: 'E.g. Electric Car' },
-            consumptionLabel: { it: 'Consumo (kWh)', en: 'Consumption (kWh)' },
-            consumptionPlaceholder: { it: '100', en: '100' },
-            addBtn: { it: 'Aggiungi', en: 'Add' },
-            calculateBtn: { it: 'Calcola Bilancio', en: 'Calculate Balance' },
-            economicSummaryTitle: { it: 'Riepilogo Economico', en: 'Economic Summary' },
-            costFromGridLabel: { it: 'Costo dalla Rete', en: 'Cost from Grid' },
-            savingsFromSelfConsumptionLabel: { it: 'Risparmio Autoconsumo', en: 'Self-Consumption Savings' },
-            feedInRevenueLabel: { it: 'Guadagno Immissione', en: 'Feed-in Revenue' },
-            finalBalanceLabel: { it: 'Bilancio Finale', en: 'Final Balance' },
-            energySummaryTitle: { it: 'Riepilogo Energetico (kWh)', en: 'Energy Summary (kWh)' },
-            selfConsumedEnergyLabel: { it: 'Energia Autoconsumata', en: 'Self-Consumed Energy' },
-            energyFromGridLabel: { it: 'Energia da Rete', en: 'Energy from Grid' },
-            fedInEnergySummaryLabel: { it: 'Energia Immessa', en: 'Fed-in Energy' },
-            totalPVProductionLabel: { it: 'Totale Prodotto da FV', en: 'Total PV Production' },
-            specificUtilitiesCostAnalysisTitle: { it: 'Analisi Costi Utenze Specifiche', en: 'Specific Utilities Cost Analysis' },
-            energySourcesBreakdownTitle: { it: 'Ripartizione Fonti Energetiche (Consumo Casa)', en: 'Energy Sources Breakdown (Home Consumption)' },
-            utilitiesImpactTitle: { it: 'Incidenza Utenze sui Consumi Totali', en: 'Utilities Impact on Total Consumption' },
-            noUtilitiesAdded: { it: 'Nessuna utenza specifica aggiunta.', en: 'No specific utilities added.' },
-            utilityNamePlaceholderEdit: { it: 'Nome Utenza', en: 'Utility Name' },
-            saveBtn: { it: 'Salva', en: 'Save' },
-            cancelBtn: { it: 'Annulla', en: 'Cancel' },
-            editBtn: { it: 'Modifica', en: 'Edit' },
-            removeBtn: { it: 'Rimuovi', en: 'Remove' },
-            fromGridLabel: { it: 'Dalla Rete', en: 'From Grid' },
-            fromPVLabel: { it: 'Da Fotovoltaico', en: 'From PV' },
-            totalSpecificUtilitiesLabel: { it: 'Totale Utenze Specifiche', en: 'Total Specific Utilities' },
-            otherConsumptionsLabel: { it: 'Altri Consumi', en: 'Other Consumptions' },
-            totalUtilitiesCostLabel: { it: 'Costo Totale Utenze', en: 'Total Utilities Cost' },
-            selectGroupOption: { it: '-- Seleziona un gruppo --', en: '-- Select a group --' },
-        };
-
-        // --- DOM REFERENCES ---
-        const allDomRefs = {
-            consumoTotaleInput: document.getElementById('consumoTotale'),
-            consumoReteInput: document.getElementById('consumoRete'),
-            energiaImmessaInput: document.getElementById('energiaImmessa'),
-            costoKwhInput: document.getElementById('costoKwh'),
-            prezzoVenditaInput: document.getElementById('prezzoVendita'),
-            nomeUtenzaInput: document.getElementById('nomeUtenza'),
-            consumoUtenzaInput: document.getElementById('consumoUtenza'),
-            addUtenzaBtn: document.getElementById('addUtenzaBtn'),
-            listaUtenzeDiv: document.getElementById('listaUtenze'),
-            groupNameInput: document.getElementById('groupNameInput'),
-            saveGroupBtn: document.getElementById('saveGroupBtn'),
-            groupSelect: document.getElementById('groupSelect'),
-            loadGroupBtn: document.getElementById('loadGroupBtn'),
-            deleteGroupBtn: document.getElementById('deleteGroupBtn'),
-            calcolaBtn: document.getElementById('calcolaBtn'),
-            risultatiDiv: document.getElementById('risultati'),
-            errorMessageDiv: document.getElementById('error-message'),
-            costoReteEl: document.getElementById('costoRete'),
-            risparmioFVEl: document.getElementById('risparmioFV'),
-            guadagnoImmissioneEl: document.getElementById('guadagnoImmissione'),
-            bilancioFinaleEl: document.getElementById('bilancioFinale'),
-            bilancioCardEl: document.getElementById('bilancioCard'),
-            energiaFVEl: document.getElementById('energiaFV'),
-            energiaReteEl: document.getElementById('energiaRete'),
-            energiaImmessaOutEl: document.getElementById('energiaImmessaOut'),
-            energiaProdottaEl: document.getElementById('energiaProdotta'),
-            analisiCostiSpecificaDiv: document.getElementById('analisi-costi-specifica'),
-            listaCostiUtenzeDiv: document.getElementById('lista-costi-utenze'),
-            barraReteEl: document.getElementById('barraRete'),
-            barraFVEl: document.getElementById('barraFV'),
-            percentualeReteEl: document.getElementById('percentualeRete'),
-            percentualeFVEl: document.getElementById('percentualeFV'),
-            graficoSpecificaDiv: document.getElementById('grafico-specifica'),
-            barraSpecificaEl: document.getElementById('barraSpecifica'),
-            barraAltriEl: document.getElementById('barraAltri'),
-            percentualeSpecificaEl: document.getElementById('percentualeSpecifica'),
-            percentualeAltriEl: document.getElementById('percentualeAltri'),
-            langItBtn: document.getElementById('lang-it'),
-            langEnBtn: document.getElementById('lang-en'),
-        };
-
-        // --- FUNCTIONS ---
-        const setLanguage = (lang) => {
-            if (lang !== 'it' && lang !== 'en') {
-                lang = 'en'; // Default to English
-            }
-            currentLanguage = lang;
-            localStorage.setItem('photovoltaicCalculator_language', lang);
-
-            document.documentElement.lang = lang;
-            allDomRefs.langItBtn.classList.toggle('active', lang === 'it');
-            allDomRefs.langEnBtn.classList.toggle('active', lang === 'en');
-
-            document.querySelectorAll('[data-translate-key]').forEach(el => {
-                const key = el.dataset.translateKey;
-                if (translations[key] && translations[key][lang]) {
-                    el.textContent = translations[key][lang];
+            // Check for missing DOM elements
+            const missingElements = [];
+            for (const [key, element] of Object.entries(allDomRefs)) {
+                if (!element) {
+                    missingElements.push(key);
                 }
-            });
+            }
+            if (missingElements.length > 0) {
+                console.warn("Missing DOM elements:", missingElements);
+            }
 
-            document.querySelectorAll('[data-translate-key-placeholder]').forEach(el => {
-                const key = el.dataset.translateKeyPlaceholder;
-                if (translations[key] && translations[key][lang]) {
-                    el.placeholder = translations[key][lang];
+            // --- FUNCTIONS ---
+            const setLanguage = (lang) => {
+                if (lang !== "it" && lang !== "en") {
+                    lang = "en"; // Default to English
                 }
-            });
-            
-            renderUtilitiesList();
-            populateGroupSelect();
-            if (allDomRefs.risultatiDiv.classList.contains('hidden') === false && lastCalculationData) {
-                renderResults(lastCalculationData);
-            }
-        };
+                currentLanguage = lang;
+                localStorage.setItem("photovoltaicCalculator_language", lang);
 
-        const renderUtilitiesList = () => {
-            const { listaUtenzeDiv } = allDomRefs;
-            listaUtenzeDiv.innerHTML = '';
-            if (specificUtilities.length === 0) {
-                listaUtenzeDiv.innerHTML = `<p class="text-center text-gray-500 text-sm">${translations.noUtilitiesAdded[currentLanguage]}</p>`;
-                return;
-            }
-            
-            specificUtilities.forEach((utenza, index) => {
-                const utenzaEl = document.createElement('div');
-                utenzaEl.className = 'bg-gray-100 p-3 rounded-lg';
-                
-                if (utenza.isEditing) {
-                    utenzaEl.innerHTML = `
+                document.documentElement.lang = lang;
+                allDomRefs.langItBtn.classList.toggle("active", lang === "it");
+                allDomRefs.langEnBtn.classList.toggle("active", lang === "en");
+
+                document
+                    .querySelectorAll("[data-translate-key]")
+                    .forEach((el) => {
+                        const key = el.dataset.translateKey;
+                        if (translations[key] && translations[key][lang]) {
+                            el.textContent = translations[key][lang];
+                        }
+                    });
+
+                document
+                    .querySelectorAll("[data-translate-key-placeholder]")
+                    .forEach((el) => {
+                        const key = el.dataset.translateKeyPlaceholder;
+                        if (translations[key] && translations[key][lang]) {
+                            el.placeholder = translations[key][lang];
+                        }
+                    });
+
+                renderUtilitiesList();
+                populateGroupSelect();
+                if (
+                    allDomRefs.risultatiDiv.classList.contains("hidden") ===
+                        false &&
+                    lastCalculationData
+                ) {
+                    renderResults(lastCalculationData);
+                }
+            };
+
+            const renderUtilitiesList = () => {
+                const { listaUtenzeDiv } = allDomRefs;
+                listaUtenzeDiv.innerHTML = "";
+                if (specificUtilities.length === 0) {
+                    listaUtenzeDiv.innerHTML = `<p class="text-center text-gray-500 text-sm">${translations.noUtilitiesAdded[currentLanguage]}</p>`;
+                    return;
+                }
+
+                specificUtilities.forEach((utenza, index) => {
+                    const utenzaEl = document.createElement("div");
+                    utenzaEl.className = "bg-gray-100 p-3 rounded-lg";
+
+                    if (utenza.isEditing) {
+                        utenzaEl.innerHTML = `
                         <div class="flex flex-col sm:flex-row gap-2">
                             <input type="text" value="${utenza.name}" data-type="name" data-index="${index}" class="edit-input-name w-full px-2 py-1 border border-gray-300 rounded-md" placeholder="${translations.utilityNamePlaceholderEdit[currentLanguage]}">
                             <input type="number" value="${utenza.consumption}" data-type="consumption" data-index="${index}" class="edit-input-consumption w-full sm:w-32 px-2 py-1 border border-gray-300 rounded-md" placeholder="kWh">
@@ -381,8 +810,8 @@
                             </div>
                         </div>
                     `;
-                } else {
-                    utenzaEl.innerHTML = `
+                    } else {
+                        utenzaEl.innerHTML = `
                         <div class="flex justify-between items-center">
                             <div>
                                 <span class="font-semibold text-gray-800">${utenza.name}</span>:
@@ -394,329 +823,531 @@
                             </div>
                         </div>
                     `;
-                }
-                listaUtenzeDiv.appendChild(utenzaEl);
-            });
-        };
-
-        const addUtenza = () => {
-            const { nomeUtenzaInput, consumoUtenzaInput } = allDomRefs;
-            const name = nomeUtenzaInput.value.trim();
-            const consumption = parseFloat(consumoUtenzaInput.value);
-
-            if (!name || isNaN(consumption) || consumption <= 0) {
-                alert('Per favore, inserisci un nome valido e un consumo positivo per l\'utenza.');
-                return;
-            }
-
-            specificUtilities.push({ name, consumption, isEditing: false });
-            nomeUtenzaInput.value = '';
-            consumoUtenzaInput.value = '';
-            nomeUtenzaInput.focus();
-            renderUtilitiesList();
-        };
-
-        const mostraErrore = (messaggio) => {
-            allDomRefs.errorMessageDiv.textContent = messaggio;
-            allDomRefs.errorMessageDiv.classList.remove('hidden');
-            allDomRefs.risultatiDiv.classList.add('hidden');
-        };
-
-        const nascondiErrore = () => {
-            allDomRefs.errorMessageDiv.classList.add('hidden');
-        };
-        
-        // --- STORAGE FUNCTIONS ---
-        const savePricesToStorage = () => {
-            localStorage.setItem('photovoltaicCalculator_costoKwh', allDomRefs.costoKwhInput.value);
-            localStorage.setItem('photovoltaicCalculator_prezzoVendita', allDomRefs.prezzoVenditaInput.value);
-        };
-
-        const loadPricesFromStorage = () => {
-            const storedCosto = localStorage.getItem('photovoltaicCalculator_costoKwh');
-            const storedPrezzo = localStorage.getItem('photovoltaicCalculator_prezzoVendita');
-            if (storedCosto) {
-                allDomRefs.costoKwhInput.value = storedCosto;
-            }
-            if (storedPrezzo) {
-                allDomRefs.prezzoVenditaInput.value = storedPrezzo;
-            }
-        };
-
-        const saveGroupsToStorage = () => {
-            localStorage.setItem('photovoltaicCalculatorGroups', JSON.stringify(utilityGroups));
-        };
-
-        const populateGroupSelect = () => {
-            const { groupSelect } = allDomRefs;
-            groupSelect.innerHTML = `<option value="">${translations.selectGroupOption[currentLanguage]}</option>`;
-            utilityGroups.forEach(group => {
-                const option = document.createElement('option');
-                option.value = group.groupName;
-                option.textContent = group.groupName;
-                groupSelect.appendChild(option);
-            });
-        };
-
-        const loadGroupsFromStorage = () => {
-            try {
-                const storedGroups = localStorage.getItem('photovoltaicCalculatorGroups');
-                if (storedGroups) {
-                    utilityGroups = JSON.parse(storedGroups);
-                }
-            } catch (error) {
-                console.error("Errore nel caricamento dei gruppi dal localStorage:", error);
-                utilityGroups = [];
-            }
-        };
-
-        const renderResults = (data) => {
-            const {
-                costoReteEl, risparmioFVEl, guadagnoImmissioneEl, bilancioFinaleEl, bilancioCardEl,
-                energiaFVEl, energiaReteEl, energiaImmessaOutEl, energiaProdottaEl,
-                listaCostiUtenzeDiv, analisiCostiSpecificaDiv,
-                barraReteEl, barraFVEl, percentualeReteEl, percentualeFVEl,
-                graficoSpecificaDiv, barraSpecificaEl, barraAltriEl, percentualeSpecificaEl, percentualeAltriEl
-            } = allDomRefs;
-            
-            const {
-                costoDaRete, risparmioDaFV, guadagnoDaImmissione, bilancioFinale,
-                energiaAutoconsumata, consumoRete, energiaImmessa, energiaProdottaTotale,
-                costoMedioKwhConsumato, totalSpecificConsumption, altriConsumi
-            } = data;
-            
-            const locale = currentLanguage === 'it' ? 'it-IT' : 'en-US';
-
-            costoReteEl.textContent = `${costoDaRete.toLocaleString(locale, { style: 'currency', currency: 'EUR' })}`;
-            risparmioFVEl.textContent = `${risparmioDaFV.toLocaleString(locale, { style: 'currency', currency: 'EUR' })}`;
-            guadagnoImmissioneEl.textContent = `${guadagnoDaImmissione.toLocaleString(locale, { style: 'currency', currency: 'EUR' })}`;
-            bilancioFinaleEl.textContent = `${bilancioFinale.toLocaleString(locale, { style: 'currency', currency: 'EUR' })}`;
-            
-            bilancioCardEl.classList.toggle('border-green-400', bilancioFinale >= 0);
-            bilancioCardEl.classList.toggle('border-red-400', bilancioFinale < 0);
-            bilancioFinaleEl.classList.toggle('text-green-600', bilancioFinale >= 0);
-            bilancioFinaleEl.classList.toggle('text-red-600', bilancioFinale < 0);
-
-            energiaFVEl.textContent = `${energiaAutoconsumata.toFixed(2)} kWh`;
-            energiaReteEl.textContent = `${consumoRete.toFixed(2)} kWh`;
-            energiaImmessaOutEl.textContent = `${energiaImmessa.toFixed(2)} kWh`;
-            energiaProdottaEl.textContent = `${energiaProdottaTotale.toFixed(2)} kWh`;
-
-            if (specificUtilities.length > 0) {
-                listaCostiUtenzeDiv.innerHTML = '';
-                let costoTotaleUtenzeSpecifiche = 0;
-
-                specificUtilities.forEach(utenza => {
-                    const costoUtenza = utenza.consumption * costoMedioKwhConsumato;
-                    costoTotaleUtenzeSpecifiche += costoUtenza;
-                    const costoEl = document.createElement('div');
-                    costoEl.className = 'flex justify-between items-center bg-white p-3 rounded-lg border';
-                    costoEl.innerHTML = `
-                        <span class="font-medium text-gray-800">${utenza.name}</span>
-                        <span class="font-bold text-purple-700">${costoUtenza.toLocaleString(locale, { style: 'currency', currency: 'EUR' })}</span>
-                    `;
-                    listaCostiUtenzeDiv.appendChild(costoEl);
+                    }
+                    listaUtenzeDiv.appendChild(utenzaEl);
                 });
-                
-                const totaleCostoEl = document.createElement('div');
-                totaleCostoEl.className = 'flex justify-between items-center bg-gray-200 p-3 rounded-lg border-t-2 border-gray-300 mt-3';
-                totaleCostoEl.innerHTML = `
-                    <span class="font-bold text-gray-800">${translations.totalUtilitiesCostLabel[currentLanguage]}</span>
-                    <span class="font-extrabold text-purple-800">${costoTotaleUtenzeSpecifiche.toLocaleString(locale, { style: 'currency', currency: 'EUR' })}</span>
-                `;
-                listaCostiUtenzeDiv.appendChild(totaleCostoEl);
-
-                analisiCostiSpecificaDiv.classList.remove('hidden');
-            } else {
-                analisiCostiSpecificaDiv.classList.add('hidden');
-            }
-
-            const percRete = data.consumoTotale > 0 ? (consumoRete / data.consumoTotale) * 100 : 0;
-            const percFV = data.consumoTotale > 0 ? (energiaAutoconsumata / data.consumoTotale) * 100 : 0;
-            barraReteEl.style.width = `${percRete}%`;
-            barraFVEl.style.width = `${percFV}%`;
-            barraReteEl.textContent = percRete > 10 ? `${percRete.toFixed(1)}%` : '';
-            barraFVEl.textContent = percFV > 10 ? `${percFV.toFixed(1)}%` : '';
-            percentualeReteEl.textContent = `${translations.fromGridLabel[currentLanguage]}: ${percRete.toFixed(1)}%`;
-            percentualeFVEl.textContent = `${translations.fromPVLabel[currentLanguage]}: ${percFV.toFixed(1)}%`;
-
-            if (totalSpecificConsumption > 0) {
-                graficoSpecificaDiv.classList.remove('hidden');
-                const percSpecifica = (totalSpecificConsumption / data.consumoTotale) * 100;
-                const percAltri = (altriConsumi / data.consumoTotale) * 100;
-
-                barraSpecificaEl.style.width = `${percSpecifica}%`;
-                barraAltriEl.style.width = `${percAltri}%`;
-                barraSpecificaEl.textContent = percSpecifica > 10 ? `${percSpecifica.toFixed(1)}%` : '';
-                barraAltriEl.textContent = percAltri > 10 ? `${percAltri.toFixed(1)}%` : '';
-                percentualeSpecificaEl.textContent = `${translations.totalSpecificUtilitiesLabel[currentLanguage]}: ${percSpecifica.toFixed(1)}% (${totalSpecificConsumption.toFixed(1)} kWh)`;
-                percentualeAltriEl.textContent = `${translations.otherConsumptionsLabel[currentLanguage]}: ${percAltri.toFixed(1)}% (${altriConsumi.toFixed(1)} kWh)`;
-            } else {
-                graficoSpecificaDiv.classList.add('hidden');
-            }
-        };
-
-        // --- EVENT LISTENERS ---
-        allDomRefs.addUtenzaBtn.addEventListener('click', addUtenza);
-        allDomRefs.costoKwhInput.addEventListener('input', savePricesToStorage);
-        allDomRefs.prezzoVenditaInput.addEventListener('input', savePricesToStorage);
-        allDomRefs.langItBtn.addEventListener('click', () => setLanguage('it'));
-        allDomRefs.langEnBtn.addEventListener('click', () => setLanguage('en'));
-
-        allDomRefs.listaUtenzeDiv.addEventListener('click', (e) => {
-            const button = e.target.closest('button');
-            if (!button) return;
-
-            const index = parseInt(button.dataset.index, 10);
-
-            if (button.classList.contains('remove-btn')) {
-                specificUtilities.splice(index, 1);
-            } else if (button.classList.contains('edit-btn')) {
-                specificUtilities.forEach((u, i) => u.isEditing = (i === index));
-            } else if (button.classList.contains('cancel-btn')) {
-                specificUtilities[index].isEditing = false;
-            } else if (button.classList.contains('save-btn')) {
-                const parentDiv = button.closest('.flex-col, .flex-row');
-                const newName = parentDiv.querySelector('.edit-input-name').value.trim();
-                const newConsumption = parseFloat(parentDiv.querySelector('.edit-input-consumption').value);
-                
-                if (newName && !isNaN(newConsumption) && newConsumption > 0) {
-                    specificUtilities[index].name = newName;
-                    specificUtilities[index].consumption = newConsumption;
-                    specificUtilities[index].isEditing = false;
-                } else {
-                    alert('Per favore, inserisci dati validi prima di salvare.');
-                }
-            }
-            renderUtilitiesList();
-        });
-
-        // Group Event Listeners
-        allDomRefs.saveGroupBtn.addEventListener('click', () => {
-            const groupName = allDomRefs.groupNameInput.value.trim();
-            if (!groupName) {
-                alert('Per favore, inserisci un nome per il gruppo.');
-                return;
-            }
-            if (specificUtilities.length === 0) {
-                alert('Aggiungi almeno un\'utenza alla lista prima di salvare un gruppo.');
-                return;
-            }
-
-            const existingGroupIndex = utilityGroups.findIndex(g => g.groupName === groupName);
-            if (existingGroupIndex !== -1) {
-                if (!confirm(`Un gruppo con nome "${groupName}" esiste già. Vuoi sovrascriverlo?`)) {
-                    return;
-                }
-            }
-
-            const cleanUtilities = specificUtilities.map(({ name, consumption }) => ({ name, consumption }));
-            const newGroup = { groupName, utilities: cleanUtilities };
-
-            if (existingGroupIndex !== -1) {
-                utilityGroups[existingGroupIndex] = newGroup;
-            } else {
-                utilityGroups.push(newGroup);
-            }
-
-            saveGroupsToStorage();
-            populateGroupSelect();
-            allDomRefs.groupSelect.value = groupName;
-            allDomRefs.groupNameInput.value = '';
-            alert(`Gruppo "${groupName}" salvato con successo!`);
-        });
-
-        allDomRefs.loadGroupBtn.addEventListener('click', () => {
-            const selectedGroupName = allDomRefs.groupSelect.value;
-            if (!selectedGroupName) {
-                alert('Per favore, seleziona un gruppo da caricare.');
-                return;
-            }
-            
-            const groupToLoad = utilityGroups.find(g => g.groupName === selectedGroupName);
-            if (groupToLoad) {
-                specificUtilities = groupToLoad.utilities.map(u => ({ ...u, isEditing: false }));
-                renderUtilitiesList();
-            }
-        });
-
-        allDomRefs.deleteGroupBtn.addEventListener('click', () => {
-            const selectedGroupName = allDomRefs.groupSelect.value;
-            if (!selectedGroupName) {
-                alert('Per favore, seleziona un gruppo da eliminare.');
-                return;
-            }
-
-            if (confirm(`Sei sicuro di voler eliminare il gruppo "${selectedGroupName}"?`)) {
-                utilityGroups = utilityGroups.filter(g => g.groupName !== selectedGroupName);
-                saveGroupsToStorage();
-                populateGroupSelect();
-            }
-        });
-
-
-        allDomRefs.calcolaBtn.addEventListener('click', () => {
-            // 1. Read and Validate Inputs
-            const consumoTotale = parseFloat(allDomRefs.consumoTotaleInput.value);
-            const consumoRete = parseFloat(allDomRefs.consumoReteInput.value);
-            const energiaImmessa = parseFloat(allDomRefs.energiaImmessaInput.value);
-            const costoKwh = parseFloat(allDomRefs.costoKwhInput.value);
-            const prezzoVendita = parseFloat(allDomRefs.prezzoVenditaInput.value);
-
-            if ([consumoTotale, consumoRete, energiaImmessa, costoKwh, prezzoVendita].some(isNaN) || consumoTotale <= 0 || costoKwh < 0 || prezzoVendita < 0) {
-                mostraErrore("Inserire valori validi. I consumi totali devono essere > 0. I prezzi non possono essere negativi.");
-                return;
-            }
-            if (consumoRete < 0 || energiaImmessa < 0) {
-                mostraErrore("I valori di consumo/immissione non possono essere negativi.");
-                return;
-            }
-            if (consumoRete > consumoTotale) {
-                mostraErrore("Il consumo dalla rete non può superare il consumo totale della casa.");
-                return;
-            }
-            const totalSpecificConsumption = specificUtilities.reduce((sum, u) => sum + u.consumption, 0);
-            if (totalSpecificConsumption > consumoTotale) {
-                mostraErrore("La somma dei consumi delle utenze specifiche non può superare il consumo totale della casa.");
-                return;
-            }
-            
-            nascondiErrore();
-
-            // 2. Core Calculations
-            const energiaAutoconsumata = consumoTotale - consumoRete;
-            const energiaProdottaTotale = energiaAutoconsumata + energiaImmessa;
-            const costoDaRete = consumoRete * costoKwh;
-            const risparmioDaFV = energiaAutoconsumata * costoKwh;
-            const guadagnoDaImmissione = energiaImmessa * prezzoVendita;
-            const bilancioFinale = risparmioDaFV + guadagnoDaImmissione - costoDaRete;
-            const costoMedioKwhConsumato = consumoTotale > 0 ? costoDaRete / consumoTotale : 0;
-            const altriConsumi = consumoTotale - totalSpecificConsumption;
-            
-            lastCalculationData = {
-                consumoTotale, consumoRete, energiaImmessa, costoKwh, prezzoVendita,
-                energiaAutoconsumata, energiaProdottaTotale, costoDaRete, risparmioDaFV,
-                guadagnoDaImmissione, bilancioFinale, costoMedioKwhConsumato,
-                totalSpecificConsumption, altriConsumi
             };
 
-            // 3. Render Results
-            renderResults(lastCalculationData);
-            allDomRefs.risultatiDiv.classList.remove('hidden');
-        });
-        
-        // --- INITIAL RENDER ---
-        document.addEventListener('DOMContentLoaded', () => {
+            const addUtenza = () => {
+                const { nomeUtenzaInput, consumoUtenzaInput } = allDomRefs;
+                const name = nomeUtenzaInput.value.trim();
+                const consumption = parseFloat(consumoUtenzaInput.value);
+
+                if (!name || isNaN(consumption) || consumption <= 0) {
+                    alert(
+                        "Per favore, inserisci un nome valido e un consumo positivo per l'utenza.",
+                    );
+                    return;
+                }
+
+                specificUtilities.push({ name, consumption, isEditing: false });
+                nomeUtenzaInput.value = "";
+                consumoUtenzaInput.value = "";
+                nomeUtenzaInput.focus();
+                renderUtilitiesList();
+            };
+
+            const mostraErrore = (messaggio) => {
+                allDomRefs.errorMessageDiv.textContent = messaggio;
+                allDomRefs.errorMessageDiv.classList.remove("hidden");
+                allDomRefs.risultatiDiv.classList.add("hidden");
+            };
+
+            const nascondiErrore = () => {
+                allDomRefs.errorMessageDiv.classList.add("hidden");
+            };
+
+            // --- STORAGE FUNCTIONS ---
+            const savePricesToStorage = () => {
+                if (allDomRefs.costoKwhInput) {
+                    localStorage.setItem(
+                        "photovoltaicCalculator_costoKwh",
+                        allDomRefs.costoKwhInput.value,
+                    );
+                }
+                if (allDomRefs.prezzoVenditaInput) {
+                    localStorage.setItem(
+                        "photovoltaicCalculator_prezzoVendita",
+                        allDomRefs.prezzoVenditaInput.value,
+                    );
+                }
+            };
+
+            const loadPricesFromStorage = () => {
+                const storedCosto = localStorage.getItem(
+                    "photovoltaicCalculator_costoKwh",
+                );
+                const storedPrezzo = localStorage.getItem(
+                    "photovoltaicCalculator_prezzoVendita",
+                );
+                if (storedCosto && allDomRefs.costoKwhInput) {
+                    allDomRefs.costoKwhInput.value = storedCosto;
+                }
+                if (storedPrezzo && allDomRefs.prezzoVenditaInput) {
+                    allDomRefs.prezzoVenditaInput.value = storedPrezzo;
+                }
+            };
+
+            const saveGroupsToStorage = () => {
+                localStorage.setItem(
+                    "photovoltaicCalculatorGroups",
+                    JSON.stringify(utilityGroups),
+                );
+            };
+
+            const populateGroupSelect = () => {
+                const { groupSelect } = allDomRefs;
+                groupSelect.innerHTML = `<option value="">${translations.selectGroupOption[currentLanguage]}</option>`;
+                utilityGroups.forEach((group) => {
+                    const option = document.createElement("option");
+                    option.value = group.groupName;
+                    option.textContent = group.groupName;
+                    groupSelect.appendChild(option);
+                });
+            };
+
+            const loadGroupsFromStorage = () => {
+                try {
+                    const storedGroups = localStorage.getItem(
+                        "photovoltaicCalculatorGroups",
+                    );
+                    if (storedGroups) {
+                        utilityGroups = JSON.parse(storedGroups);
+                    }
+                } catch (error) {
+                    console.error(
+                        "Errore nel caricamento dei gruppi dal localStorage:",
+                        error,
+                    );
+                    utilityGroups = [];
+                }
+            };
+
+            const renderResults = (data) => {
+                const {
+                    costoReteEl,
+                    risparmioFVEl,
+                    guadagnoImmissioneEl,
+                    bilancioFinaleEl,
+                    bilancioCardEl,
+                    energiaFVEl,
+                    energiaReteEl,
+                    energiaImmessaOutEl,
+                    energiaProdottaEl,
+                    listaCostiUtenzeDiv,
+                    analisiCostiSpecificaDiv,
+                    barraReteEl,
+                    barraFVEl,
+                    percentualeReteEl,
+                    percentualeFVEl,
+                    graficoSpecificaDiv,
+                    barraSpecificaEl,
+                    barraAltriEl,
+                    percentualeSpecificaEl,
+                    percentualeAltriEl,
+                } = allDomRefs;
+
+                const {
+                    costoDaRete,
+                    risparmioDaFV,
+                    guadagnoDaImmissione,
+                    bilancioFinale,
+                    energiaAutoconsumata,
+                    consumoRete,
+                    energiaImmessa,
+                    energiaProdottaTotale,
+                    costoMedioKwhConsumato,
+                    totalSpecificConsumption,
+                    altriConsumi,
+                } = data;
+
+                const locale = currentLanguage === "it" ? "it-IT" : "en-US";
+
+                costoReteEl.textContent = `${costoDaRete.toLocaleString(locale, { style: "currency", currency: "EUR" })}`;
+                risparmioFVEl.textContent = `${risparmioDaFV.toLocaleString(locale, { style: "currency", currency: "EUR" })}`;
+                guadagnoImmissioneEl.textContent = `${guadagnoDaImmissione.toLocaleString(locale, { style: "currency", currency: "EUR" })}`;
+                bilancioFinaleEl.textContent = `${bilancioFinale.toLocaleString(locale, { style: "currency", currency: "EUR" })}`;
+
+                bilancioCardEl.classList.toggle(
+                    "border-green-400",
+                    bilancioFinale >= 0,
+                );
+                bilancioCardEl.classList.toggle(
+                    "border-red-400",
+                    bilancioFinale < 0,
+                );
+                bilancioFinaleEl.classList.toggle(
+                    "text-green-600",
+                    bilancioFinale >= 0,
+                );
+                bilancioFinaleEl.classList.toggle(
+                    "text-red-600",
+                    bilancioFinale < 0,
+                );
+
+                energiaFVEl.textContent = `${energiaAutoconsumata.toFixed(2)} kWh`;
+                energiaReteEl.textContent = `${consumoRete.toFixed(2)} kWh`;
+                energiaImmessaOutEl.textContent = `${energiaImmessa.toFixed(2)} kWh`;
+                energiaProdottaEl.textContent = `${energiaProdottaTotale.toFixed(2)} kWh`;
+
+                if (specificUtilities.length > 0) {
+                    listaCostiUtenzeDiv.innerHTML = "";
+                    let costoTotaleUtenzeSpecifiche = 0;
+
+                    specificUtilities.forEach((utenza) => {
+                        const costoUtenza =
+                            utenza.consumption * costoMedioKwhConsumato;
+                        costoTotaleUtenzeSpecifiche += costoUtenza;
+                        const costoEl = document.createElement("div");
+                        costoEl.className =
+                            "flex justify-between items-center bg-white p-3 rounded-lg border";
+                        costoEl.innerHTML = `
+                        <span class="font-medium text-gray-800">${utenza.name}</span>
+                        <span class="font-bold text-purple-700">${costoUtenza.toLocaleString(locale, { style: "currency", currency: "EUR" })}</span>
+                    `;
+                        listaCostiUtenzeDiv.appendChild(costoEl);
+                    });
+
+                    const totaleCostoEl = document.createElement("div");
+                    totaleCostoEl.className =
+                        "flex justify-between items-center bg-gray-200 p-3 rounded-lg border-t-2 border-gray-300 mt-3";
+                    totaleCostoEl.innerHTML = `
+                    <span class="font-bold text-gray-800">${translations.totalUtilitiesCostLabel[currentLanguage]}</span>
+                    <span class="font-extrabold text-purple-800">${costoTotaleUtenzeSpecifiche.toLocaleString(locale, { style: "currency", currency: "EUR" })}</span>
+                `;
+                    listaCostiUtenzeDiv.appendChild(totaleCostoEl);
+
+                    analisiCostiSpecificaDiv.classList.remove("hidden");
+                } else {
+                    analisiCostiSpecificaDiv.classList.add("hidden");
+                }
+
+                const percRete =
+                    data.consumoTotale > 0
+                        ? (consumoRete / data.consumoTotale) * 100
+                        : 0;
+                const percFV =
+                    data.consumoTotale > 0
+                        ? (energiaAutoconsumata / data.consumoTotale) * 100
+                        : 0;
+                barraReteEl.style.width = `${percRete}%`;
+                barraFVEl.style.width = `${percFV}%`;
+                barraReteEl.textContent =
+                    percRete > 10 ? `${percRete.toFixed(1)}%` : "";
+                barraFVEl.textContent =
+                    percFV > 10 ? `${percFV.toFixed(1)}%` : "";
+                percentualeReteEl.textContent = `${translations.fromGridLabel[currentLanguage]}: ${percRete.toFixed(1)}%`;
+                percentualeFVEl.textContent = `${translations.fromPVLabel[currentLanguage]}: ${percFV.toFixed(1)}%`;
+
+                if (totalSpecificConsumption > 0) {
+                    graficoSpecificaDiv.classList.remove("hidden");
+                    const percSpecifica =
+                        (totalSpecificConsumption / data.consumoTotale) * 100;
+                    const percAltri = (altriConsumi / data.consumoTotale) * 100;
+
+                    barraSpecificaEl.style.width = `${percSpecifica}%`;
+                    barraAltriEl.style.width = `${percAltri}%`;
+                    barraSpecificaEl.textContent =
+                        percSpecifica > 10
+                            ? `${percSpecifica.toFixed(1)}%`
+                            : "";
+                    barraAltriEl.textContent =
+                        percAltri > 10 ? `${percAltri.toFixed(1)}%` : "";
+                    percentualeSpecificaEl.textContent = `${translations.totalSpecificUtilitiesLabel[currentLanguage]}: ${percSpecifica.toFixed(1)}% (${totalSpecificConsumption.toFixed(1)} kWh)`;
+                    percentualeAltriEl.textContent = `${translations.otherConsumptionsLabel[currentLanguage]}: ${percAltri.toFixed(1)}% (${altriConsumi.toFixed(1)} kWh)`;
+                } else {
+                    graficoSpecificaDiv.classList.add("hidden");
+                }
+            };
+
+            // --- EVENT LISTENERS ---
+            if (allDomRefs.addUtenzaBtn) {
+                allDomRefs.addUtenzaBtn.addEventListener("click", addUtenza);
+            }
+            if (allDomRefs.costoKwhInput) {
+                allDomRefs.costoKwhInput.addEventListener(
+                    "input",
+                    savePricesToStorage,
+                );
+            }
+            if (allDomRefs.prezzoVenditaInput) {
+                allDomRefs.prezzoVenditaInput.addEventListener(
+                    "input",
+                    savePricesToStorage,
+                );
+            }
+            if (allDomRefs.langItBtn) {
+                allDomRefs.langItBtn.addEventListener("click", () =>
+                    setLanguage("it"),
+                );
+            }
+            if (allDomRefs.langEnBtn) {
+                allDomRefs.langEnBtn.addEventListener("click", () =>
+                    setLanguage("en"),
+                );
+            }
+
+            if (allDomRefs.listaUtenzeDiv) {
+                allDomRefs.listaUtenzeDiv.addEventListener("click", (e) => {
+                    const button = e.target.closest("button");
+                    if (!button) return;
+
+                    const index = parseInt(button.dataset.index, 10);
+
+                    if (button.classList.contains("remove-btn")) {
+                        specificUtilities.splice(index, 1);
+                    } else if (button.classList.contains("edit-btn")) {
+                        specificUtilities.forEach(
+                            (u, i) => (u.isEditing = i === index),
+                        );
+                    } else if (button.classList.contains("cancel-btn")) {
+                        specificUtilities[index].isEditing = false;
+                    } else if (button.classList.contains("save-btn")) {
+                        const parentDiv = button.closest(
+                            ".flex-col, .flex-row",
+                        );
+                        const newName = parentDiv
+                            .querySelector(".edit-input-name")
+                            .value.trim();
+                        const newConsumption = parseFloat(
+                            parentDiv.querySelector(".edit-input-consumption")
+                                .value,
+                        );
+
+                        if (
+                            newName &&
+                            !isNaN(newConsumption) &&
+                            newConsumption > 0
+                        ) {
+                            specificUtilities[index].name = newName;
+                            specificUtilities[index].consumption =
+                                newConsumption;
+                            specificUtilities[index].isEditing = false;
+                        } else {
+                            alert(
+                                "Per favore, inserisci dati validi prima di salvare.",
+                            );
+                        }
+                    }
+                    renderUtilitiesList();
+                });
+            }
+
+            // Group Event Listeners
+            if (allDomRefs.saveGroupBtn) {
+                allDomRefs.saveGroupBtn.addEventListener("click", () => {
+                    const groupName = allDomRefs.groupNameInput.value.trim();
+                    if (!groupName) {
+                        alert("Per favore, inserisci un nome per il gruppo.");
+                        return;
+                    }
+                    if (specificUtilities.length === 0) {
+                        alert(
+                            "Aggiungi almeno un'utenza alla lista prima di salvare un gruppo.",
+                        );
+                        return;
+                    }
+
+                    const existingGroupIndex = utilityGroups.findIndex(
+                        (g) => g.groupName === groupName,
+                    );
+                    if (existingGroupIndex !== -1) {
+                        if (
+                            !confirm(
+                                `Un gruppo con nome "${groupName}" esiste già. Vuoi sovrascriverlo?`,
+                            )
+                        ) {
+                            return;
+                        }
+                    }
+
+                    const cleanUtilities = specificUtilities.map(
+                        ({ name, consumption }) => ({ name, consumption }),
+                    );
+                    const newGroup = { groupName, utilities: cleanUtilities };
+
+                    if (existingGroupIndex !== -1) {
+                        utilityGroups[existingGroupIndex] = newGroup;
+                    } else {
+                        utilityGroups.push(newGroup);
+                    }
+
+                    saveGroupsToStorage();
+                    populateGroupSelect();
+                    allDomRefs.groupSelect.value = groupName;
+                    allDomRefs.groupNameInput.value = "";
+                    alert(`Gruppo "${groupName}" salvato con successo!`);
+                });
+            }
+
+            if (allDomRefs.loadGroupBtn) {
+                allDomRefs.loadGroupBtn.addEventListener("click", () => {
+                    const selectedGroupName = allDomRefs.groupSelect.value;
+                    if (!selectedGroupName) {
+                        alert("Per favore, seleziona un gruppo da caricare.");
+                        return;
+                    }
+
+                    const groupToLoad = utilityGroups.find(
+                        (g) => g.groupName === selectedGroupName,
+                    );
+                    if (groupToLoad) {
+                        specificUtilities = groupToLoad.utilities.map((u) => ({
+                            ...u,
+                            isEditing: false,
+                        }));
+                        renderUtilitiesList();
+                    }
+                });
+            }
+
+            if (allDomRefs.deleteGroupBtn) {
+                allDomRefs.deleteGroupBtn.addEventListener("click", () => {
+                    const selectedGroupName = allDomRefs.groupSelect.value;
+                    if (!selectedGroupName) {
+                        alert("Per favore, seleziona un gruppo da eliminare.");
+                        return;
+                    }
+
+                    if (
+                        confirm(
+                            `Sei sicuro di voler eliminare il gruppo "${selectedGroupName}"?`,
+                        )
+                    ) {
+                        utilityGroups = utilityGroups.filter(
+                            (g) => g.groupName !== selectedGroupName,
+                        );
+                        saveGroupsToStorage();
+                        populateGroupSelect();
+                    }
+                });
+            }
+
+            if (allDomRefs.calcolaBtn) {
+                allDomRefs.calcolaBtn.addEventListener("click", () => {
+                    // 1. Read and Validate Inputs
+                    const consumoTotale = parseFloat(
+                        allDomRefs.consumoTotaleInput.value,
+                    );
+                    const consumoRete = parseFloat(
+                        allDomRefs.consumoReteInput.value,
+                    );
+                    const energiaImmessa = parseFloat(
+                        allDomRefs.energiaImmessaInput.value,
+                    );
+                    const costoKwh = parseFloat(allDomRefs.costoKwhInput.value);
+                    const costoFisso = 0; // Fixed costs not implemented in this version
+                    const prezzoVendita = parseFloat(
+                        allDomRefs.prezzoVenditaInput.value,
+                    );
+
+                    if (
+                        [
+                            consumoTotale,
+                            consumoRete,
+                            energiaImmessa,
+                            costoKwh,
+                            prezzoVendita,
+                        ].some(isNaN) ||
+                        consumoTotale <= 0 ||
+                        costoKwh < 0 ||
+                        prezzoVendita < 0
+                    ) {
+                        mostraErrore(
+                            "Inserire valori validi. I consumi totali devono essere > 0. I prezzi non possono essere negativi.",
+                        );
+                        return;
+                    }
+                    if (consumoRete < 0 || energiaImmessa < 0) {
+                        mostraErrore(
+                            "I valori di consumo/immissione non possono essere negativi.",
+                        );
+                        return;
+                    }
+                    if (consumoRete > consumoTotale) {
+                        mostraErrore(
+                            "Il consumo dalla rete non può superare il consumo totale della casa.",
+                        );
+                        return;
+                    }
+                    const totalSpecificConsumption = specificUtilities.reduce(
+                        (sum, u) => sum + u.consumption,
+                        0,
+                    );
+                    if (totalSpecificConsumption > consumoTotale) {
+                        mostraErrore(
+                            "La somma dei consumi delle utenze specifiche non può superare il consumo totale della casa.",
+                        );
+                        return;
+                    }
+
+                    nascondiErrore();
+
+                    // 2. Core Calculations
+                    const energiaAutoconsumata = consumoTotale - consumoRete;
+                    const energiaProdottaTotale =
+                        energiaAutoconsumata + energiaImmessa;
+
+                    // Variable costs only (excluding fixed costs for savings calculation)
+                    const costoDaRete = consumoRete * costoKwh;
+                    const risparmioDaFV = energiaAutoconsumata * costoKwh; // Only variable cost savings
+                    const guadagnoDaImmissione = energiaImmessa * prezzoVendita;
+
+                    // Net financial benefit (excluding fixed costs which don't change)
+                    const bilancioFinale =
+                        risparmioDaFV + guadagnoDaImmissione - costoDaRete;
+
+                    // Total cost without PV (for comparison)
+                    const costoTotaleSenzaFV =
+                        consumoTotale * costoKwh + costoFisso;
+
+                    // Average cost per kWh including fixed costs proportionally
+                    const costoMedioKwhConsumato =
+                        consumoTotale > 0
+                            ? (costoDaRete + costoFisso) / consumoTotale
+                            : 0;
+                    const altriConsumi =
+                        consumoTotale - totalSpecificConsumption;
+
+                    lastCalculationData = {
+                        consumoTotale,
+                        consumoRete,
+                        energiaImmessa,
+                        costoKwh,
+                        costoFisso,
+                        prezzoVendita,
+                        energiaAutoconsumata,
+                        energiaProdottaTotale,
+                        costoDaRete,
+                        risparmioDaFV,
+                        guadagnoDaImmissione,
+                        bilancioFinale,
+                        costoMedioKwhConsumato,
+                        costoTotaleSenzaFV,
+                        totalSpecificConsumption,
+                        altriConsumi,
+                    };
+
+                    // 3. Render Results
+                    renderResults(lastCalculationData);
+                    if (allDomRefs.risultatiDiv) {
+                        allDomRefs.risultatiDiv.classList.remove("hidden");
+                    }
+                });
+            }
+
+            // --- INITIAL RENDER ---
+            // Script is at bottom of body, so DOM is already loaded
             loadGroupsFromStorage();
             loadPricesFromStorage();
-            
-            const savedLang = localStorage.getItem('photovoltaicCalculator_language');
-            const browserLang = navigator.language.split('-')[0];
+
+            const savedLang = localStorage.getItem(
+                "photovoltaicCalculator_language",
+            );
+            const browserLang = navigator.language.split("-")[0];
             setLanguage(savedLang || browserLang);
 
             renderUtilitiesList();
-        });
-
-    </script>
-</body>
+        </script>
+    </body>
 </html>
