myio-js-library 0.1.197 → 0.1.199

package/dist/myio-js-library.umd.js

@@ -8863,8 +8863,8 @@
         return "dot--offline";
     }
   }
-  function buildDOM(state5) {
-    const { entityObject, i18n, enableSelection, enableDragDrop } = state5;
+  function buildDOM(state6) {
+    const { entityObject, i18n, enableSelection, enableDragDrop } = state6;
     const root = document.createElement("div");
     root.className = "myio-ho-card";
     root.setAttribute("role", "group");
@@ -9020,7 +9020,7 @@
     return root;
   }
   function buildDebugTooltipInfo(entityObject, statusInfo, stateClass, statusDecisionSource, delayTimeConnectionInMins) {
-    const formatTimestamp5 = (ts) => {
+    const formatTimestamp6 = (ts) => {
       if (!ts) return "N/A";
       const d = new Date(ts);
       return d.toLocaleString("pt-BR", {
@@ -9047,8 +9047,8 @@
       chipClass: statusInfo.chipClass,
       chipLabel: statusInfo.label,
       // Connection timestamps
-      lastConnectTime: formatTimestamp5(entityObject.lastConnectTime),
-      lastDisconnectTime: formatTimestamp5(entityObject.lastDisconnectTime),
+      lastConnectTime: formatTimestamp6(entityObject.lastConnectTime),
+      lastDisconnectTime: formatTimestamp6(entityObject.lastDisconnectTime),
       delayTimeConnectionInMins,
       // Raw values
       val: entityObject.val,
@@ -9190,8 +9190,8 @@
     }
     return isOffline;
   }
-  function paint(root, state5) {
-    const { entityObject, i18n, delayTimeConnectionInMins, isSelected, LogHelper: LogHelper2, activeTooltipDebug } = state5;
+  function paint(root, state6) {
+    const { entityObject, i18n, delayTimeConnectionInMins, isSelected, LogHelper: LogHelper2, activeTooltipDebug } = state6;
     let statusDecisionSource = "unknown";
     if (entityObject.connectionStatus) {
       if (entityObject.connectionStatus === "offline") {
@@ -9243,7 +9243,7 @@
     numSpan.textContent = primaryValue;
     const barContainer = root.querySelector(".bar");
     const effContainer = root.querySelector(".myio-ho-card__eff");
-    if (state5.enableSelection) {
+    if (state6.enableSelection) {
       const checkbox = root.querySelector('.myio-ho-card__select input[type="checkbox"]');
       if (checkbox) {
         checkbox.checked = !!isSelected;
@@ -9291,8 +9291,8 @@
       statusDot.className = `status-dot ${dotClass}`;
     }
   }
-  function bindEvents(root, state5, callbacks) {
-    const { entityObject } = state5;
+  function bindEvents(root, state6, callbacks) {
+    const { entityObject } = state6;
     const kebabBtn = root.querySelector(".myio-ho-card__kebab");
     const menu = root.querySelector(".myio-ho-card__menu");
     function toggleMenu() {
@@ -9348,9 +9348,9 @@
       const onSelectionChange = () => {
         const selectedIds = MyIOSelectionStore2.getSelectedIds();
         const isSelected = selectedIds.includes(entityObject.entityId);
-        if (state5.isSelected !== isSelected) {
-          state5.isSelected = isSelected;
-          paint(root, state5);
+        if (state6.isSelected !== isSelected) {
+          state6.isSelected = isSelected;
+          paint(root, state6);
         }
       };
       MyIOSelectionStore2.on("selection:change", onSelectionChange);
@@ -9363,7 +9363,7 @@
           clearTimeout(TempRangeTooltip._hideTimer);
           TempRangeTooltip._hideTimer = null;
         }
-        TempRangeTooltip.show(root, state5.entityObject, e);
+        TempRangeTooltip.show(root, state6.entityObject, e);
       };
       const hideTooltip = () => {
         TempRangeTooltip._startDelayedHide();
@@ -9381,7 +9381,7 @@
           clearTimeout(EnergyRangeTooltip._hideTimer);
           EnergyRangeTooltip._hideTimer = null;
         }
-        EnergyRangeTooltip.show(root, state5.entityObject, e);
+        EnergyRangeTooltip.show(root, state6.entityObject, e);
       };
       const hideEnergyTooltip = () => {
         EnergyRangeTooltip._startDelayedHide();
@@ -9433,7 +9433,7 @@
         }
       });
     }
-    if (state5.enableDragDrop) {
+    if (state6.enableDragDrop) {
       root.addEventListener("dragstart", (e) => {
         root.classList.add("is-dragging");
         e.dataTransfer.setData("text/plain", entityObject.entityId);
@@ -9475,17 +9475,17 @@
       throw new Error("renderCardComponentHeadOffice: containerEl is required");
     }
     ensureCss();
-    const state5 = normalizeParams(params);
-    const root = buildDOM(state5);
-    state5.isSelected = params.isSelected || false;
+    const state6 = normalizeParams(params);
+    const root = buildDOM(state6);
+    state6.isSelected = params.isSelected || false;
     containerEl.appendChild(root);
-    bindEvents(root, state5, state5.callbacks);
-    paint(root, state5);
+    bindEvents(root, state6, state6.callbacks);
+    paint(root, state6);
     return {
       update(next) {
         if (next) {
-          Object.assign(state5.entityObject, next);
-          paint(root, state5);
+          Object.assign(state6.entityObject, next);
+          paint(root, state6);
         }
       },
       destroy() {
@@ -11215,6 +11215,15 @@
       return { deviation: absDeviation, sign: "-", status: "below", statusText: "Abaixo da media", statusIcon: "\u{1F53B}" };
     }
   }
+  function calculateRangeStatus(currentTemp, minTemp, maxTemp) {
+    if (currentTemp >= minTemp && currentTemp <= maxTemp) {
+      return { status: "ok", statusText: "Dentro da faixa", statusIcon: "\u2713" };
+    } else if (currentTemp > maxTemp) {
+      return { status: "above", statusText: "Acima da faixa", statusIcon: "\u{1F53A}" };
+    } else {
+      return { status: "below", statusText: "Abaixo da faixa", statusIcon: "\u{1F53B}" };
+    }
+  }
   function calcTempBarPosition(temp, minRange, maxRange) {
     const rangeSize = maxRange - minRange;
     const extendedMin = minRange - rangeSize * 0.3;
@@ -11257,8 +11266,10 @@
     const { device, average, lastUpdated } = data;
     const timestamp = formatTimestamp2(lastUpdated);
     const tempStatus = calculateTempStatus(device.currentTemp, average.value);
+    const rangeStatus = calculateRangeStatus(device.currentTemp, device.minTemp, device.maxTemp);
     const deviceBarPos = calcTempBarPosition(device.currentTemp, device.minTemp, device.maxTemp);
     const avgBarPos = calcTempBarPosition(average.value, device.minTemp, device.maxTemp);
+    const rangeStatusClass = rangeStatus.status === "ok" ? "normal" : rangeStatus.status;
     return `
     <div class="myio-temp-comparison-tooltip__body">
       <!-- Main Stats -->
@@ -11273,12 +11284,18 @@
         </div>
       </div>
 
-      <!-- Configured Range -->
+      <!-- Configured Range with Status -->
       <div class="myio-temp-comparison-tooltip__range">
         <span class="myio-temp-comparison-tooltip__range-label">Faixa Ideal:</span>
         <span class="myio-temp-comparison-tooltip__range-value">${formatTemp(device.minTemp)} - ${formatTemp(device.maxTemp)}</span>
       </div>
 
+      <!-- Range Status Indicator -->
+      <div class="myio-temp-comparison-tooltip__status ${rangeStatusClass}">
+        <span class="myio-temp-comparison-tooltip__status-icon">${rangeStatus.statusIcon}</span>
+        <span>${rangeStatus.statusText}</span>
+      </div>
+
       <!-- Section: Average Comparison -->
       <div class="myio-temp-comparison-tooltip__section-title">
         <span class="myio-temp-comparison-tooltip__section-icon">\u{1F4CA}</span>
@@ -30614,7 +30631,7 @@
     const defaultDateRange = getTodaySoFar();
     const startTs = params.startDate ? new Date(params.startDate).getTime() : defaultDateRange.startTs;
     const endTs = params.endDate ? new Date(params.endDate).getTime() : defaultDateRange.endTs;
-    const state5 = {
+    const state6 = {
       token: params.token,
       deviceId: params.deviceId,
       label: params.label || "Sensor de Temperatura",
@@ -30637,58 +30654,58 @@
     };
     const savedGranularity = localStorage.getItem("myio-temp-modal-granularity");
     const savedTheme = localStorage.getItem("myio-temp-modal-theme");
-    if (savedGranularity) state5.granularity = savedGranularity;
-    if (savedTheme) state5.theme = savedTheme;
+    if (savedGranularity) state6.granularity = savedGranularity;
+    if (savedTheme) state6.theme = savedTheme;
     const modalContainer = document.createElement("div");
     modalContainer.id = modalId;
     document.body.appendChild(modalContainer);
-    renderModal(modalContainer, state5, modalId);
+    renderModal(modalContainer, state6, modalId);
     try {
-      state5.data = await fetchTemperatureData(state5.token, state5.deviceId, state5.startTs, state5.endTs);
-      state5.stats = calculateStats(state5.data, state5.clampRange);
-      state5.isLoading = false;
-      renderModal(modalContainer, state5, modalId);
-      drawChart(modalId, state5);
+      state6.data = await fetchTemperatureData(state6.token, state6.deviceId, state6.startTs, state6.endTs);
+      state6.stats = calculateStats(state6.data, state6.clampRange);
+      state6.isLoading = false;
+      renderModal(modalContainer, state6, modalId);
+      drawChart(modalId, state6);
     } catch (error) {
       console.error("[TemperatureModal] Error fetching data:", error);
-      state5.isLoading = false;
-      renderModal(modalContainer, state5, modalId, error);
+      state6.isLoading = false;
+      renderModal(modalContainer, state6, modalId, error);
     }
-    await setupEventListeners(modalContainer, state5, modalId, params.onClose);
+    await setupEventListeners(modalContainer, state6, modalId, params.onClose);
     return {
       destroy: () => {
         modalContainer.remove();
         params.onClose?.();
       },
       updateData: async (startDate, endDate, granularity) => {
-        state5.startTs = new Date(startDate).getTime();
-        state5.endTs = new Date(endDate).getTime();
-        if (granularity) state5.granularity = granularity;
-        state5.isLoading = true;
-        renderModal(modalContainer, state5, modalId);
+        state6.startTs = new Date(startDate).getTime();
+        state6.endTs = new Date(endDate).getTime();
+        if (granularity) state6.granularity = granularity;
+        state6.isLoading = true;
+        renderModal(modalContainer, state6, modalId);
         try {
-          state5.data = await fetchTemperatureData(state5.token, state5.deviceId, state5.startTs, state5.endTs);
-          state5.stats = calculateStats(state5.data, state5.clampRange);
-          state5.isLoading = false;
-          renderModal(modalContainer, state5, modalId);
-          drawChart(modalId, state5);
+          state6.data = await fetchTemperatureData(state6.token, state6.deviceId, state6.startTs, state6.endTs);
+          state6.stats = calculateStats(state6.data, state6.clampRange);
+          state6.isLoading = false;
+          renderModal(modalContainer, state6, modalId);
+          drawChart(modalId, state6);
         } catch (error) {
           console.error("[TemperatureModal] Error updating data:", error);
-          state5.isLoading = false;
-          renderModal(modalContainer, state5, modalId, error);
+          state6.isLoading = false;
+          renderModal(modalContainer, state6, modalId, error);
         }
       }
     };
   }
-  function renderModal(container, state5, modalId, error) {
-    const colors = getThemeColors(state5.theme);
-    const startDateStr = new Date(state5.startTs).toLocaleDateString(state5.locale);
-    const endDateStr = new Date(state5.endTs).toLocaleDateString(state5.locale);
-    const statusText = state5.temperatureStatus === "ok" ? "Dentro da faixa" : state5.temperatureStatus === "above" ? "Acima do limite" : state5.temperatureStatus === "below" ? "Abaixo do limite" : "N/A";
-    const statusColor = state5.temperatureStatus === "ok" ? colors.success : state5.temperatureStatus === "above" ? colors.danger : state5.temperatureStatus === "below" ? colors.primary : colors.textMuted;
-    const rangeText = state5.temperatureMin !== null && state5.temperatureMax !== null ? `${state5.temperatureMin}\xB0C - ${state5.temperatureMax}\xB0C` : "N\xE3o definida";
-    new Date(state5.startTs).toISOString().slice(0, 16);
-    new Date(state5.endTs).toISOString().slice(0, 16);
+  function renderModal(container, state6, modalId, error) {
+    const colors = getThemeColors(state6.theme);
+    const startDateStr = new Date(state6.startTs).toLocaleDateString(state6.locale);
+    const endDateStr = new Date(state6.endTs).toLocaleDateString(state6.locale);
+    const statusText = state6.temperatureStatus === "ok" ? "Dentro da faixa" : state6.temperatureStatus === "above" ? "Acima do limite" : state6.temperatureStatus === "below" ? "Abaixo do limite" : "N/A";
+    const statusColor = state6.temperatureStatus === "ok" ? colors.success : state6.temperatureStatus === "above" ? colors.danger : state6.temperatureStatus === "below" ? colors.primary : colors.textMuted;
+    const rangeText = state6.temperatureMin !== null && state6.temperatureMax !== null ? `${state6.temperatureMin}\xB0C - ${state6.temperatureMax}\xB0C` : "N\xE3o definida";
+    new Date(state6.startTs).toISOString().slice(0, 16);
+    new Date(state6.endTs).toISOString().slice(0, 16);
     const isMaximized = container.__isMaximized || false;
     const contentMaxWidth = isMaximized ? "100%" : "900px";
     const contentMaxHeight = isMaximized ? "100vh" : "95vh";
@@ -30715,7 +30732,7 @@
           min-height: 20px;
         ">
           <h2 style="margin: 6px; font-size: 18px; font-weight: 600; color: white; line-height: 2;">
-            \u{1F321}\uFE0F ${state5.label} - Hist\xF3rico de Temperatura
+            \u{1F321}\uFE0F ${state6.label} - Hist\xF3rico de Temperatura
           </h2>
           <div style="display: flex; gap: 4px; align-items: center;">
             <!-- Theme Toggle -->
@@ -30723,7 +30740,7 @@
               background: none; border: none; font-size: 16px; cursor: pointer;
               padding: 4px 8px; border-radius: 6px; color: rgba(255,255,255,0.8);
               transition: background-color 0.2s;
-            ">${state5.theme === "dark" ? "\u2600\uFE0F" : "\u{1F319}"}</button>
+            ">${state6.theme === "dark" ? "\u2600\uFE0F" : "\u{1F319}"}</button>
             <!-- Maximize Button -->
             <button id="${modalId}-maximize" title="${isMaximized ? "Restaurar" : "Maximizar"}" style="
               background: none; border: none; font-size: 16px; cursor: pointer;
@@ -30745,7 +30762,7 @@
         <!-- Controls Row -->
         <div style="
           display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end;
-          margin-bottom: 16px; padding: 16px; background: ${state5.theme === "dark" ? "rgba(255,255,255,0.05)" : "#f7f7f7"};
+          margin-bottom: 16px; padding: 16px; background: ${state6.theme === "dark" ? "rgba(255,255,255,0.05)" : "#f7f7f7"};
           border-radius: 6px; border: 1px solid ${colors.border};
         ">
           <!-- Granularity Select -->
@@ -30758,8 +30775,8 @@
               font-size: 14px; color: ${colors.text}; background: ${colors.surface};
               cursor: pointer; min-width: 130px;
             ">
-              <option value="hour" ${state5.granularity === "hour" ? "selected" : ""}>Hora (30 min)</option>
-              <option value="day" ${state5.granularity === "day" ? "selected" : ""}>Dia (m\xE9dia)</option>
+              <option value="hour" ${state6.granularity === "hour" ? "selected" : ""}>Hora (30 min)</option>
+              <option value="day" ${state6.granularity === "day" ? "selected" : ""}>Dia (m\xE9dia)</option>
             </select>
           </div>
           <!-- Day Period Filter (Multiselect) -->
@@ -30773,7 +30790,7 @@
               cursor: pointer; min-width: 180px; text-align: left;
               display: flex; align-items: center; justify-content: space-between; gap: 8px;
             ">
-              <span>${getSelectedPeriodsLabel(state5.selectedPeriods)}</span>
+              <span>${getSelectedPeriodsLabel(state6.selectedPeriods)}</span>
               <span style="font-size: 10px;">\u25BC</span>
             </button>
             <div id="${modalId}-period-dropdown" style="
@@ -30786,12 +30803,12 @@
                 <label style="
                   display: flex; align-items: center; gap: 8px; padding: 8px 12px;
                   cursor: pointer; font-size: 13px; color: ${colors.text};
-                " onmouseover="this.style.background='${state5.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"}'"
+                " onmouseover="this.style.background='${state6.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"}'"
                    onmouseout="this.style.background='transparent'">
                   <input type="checkbox"
                     name="${modalId}-period"
                     value="${period.id}"
-                    ${state5.selectedPeriods.includes(period.id) ? "checked" : ""}
+                    ${state6.selectedPeriods.includes(period.id) ? "checked" : ""}
                     style="width: 16px; height: 16px; cursor: pointer; accent-color: #3e1a7d;">
                   ${period.label}
                 </label>
@@ -30799,13 +30816,13 @@
               <div style="border-top: 1px solid ${colors.border}; margin-top: 8px; padding-top: 8px;">
                 <button id="${modalId}-period-select-all" type="button" style="
                   width: calc(100% - 16px); margin: 0 8px 4px; padding: 6px;
-                  background: ${state5.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"};
+                  background: ${state6.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"};
                   border: none; border-radius: 4px; cursor: pointer;
                   font-size: 12px; color: ${colors.text};
                 ">Selecionar Todos</button>
                 <button id="${modalId}-period-clear" type="button" style="
                   width: calc(100% - 16px); margin: 0 8px; padding: 6px;
-                  background: ${state5.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"};
+                  background: ${state6.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"};
                   border: none; border-radius: 4px; cursor: pointer;
                   font-size: 12px; color: ${colors.text};
                 ">Limpar Sele\xE7\xE3o</button>
@@ -30830,8 +30847,8 @@
             font-size: 14px; font-weight: 500; height: 38px;
             display: flex; align-items: center; gap: 8px;
             font-family: 'Roboto', Arial, sans-serif;
-          " ${state5.isLoading ? "disabled" : ""}>
-            ${state5.isLoading ? '<span style="animation: spin 1s linear infinite; display: inline-block;">\u21BB</span> Carregando...' : "Carregar"}
+          " ${state6.isLoading ? "disabled" : ""}>
+            ${state6.isLoading ? '<span style="animation: spin 1s linear infinite; display: inline-block;">\u21BB</span> Carregando...' : "Carregar"}
           </button>
         </div>
 
@@ -30842,40 +30859,40 @@
         ">
           <!-- Current Temperature -->
           <div style="
-            padding: 16px; background: ${state5.theme === "dark" ? "rgba(255,255,255,0.05)" : "#fafafa"};
+            padding: 16px; background: ${state6.theme === "dark" ? "rgba(255,255,255,0.05)" : "#fafafa"};
             border-radius: 12px; border: 1px solid ${colors.border};
           ">
             <span style="color: ${colors.textMuted}; font-size: 12px; font-weight: 500;">Temperatura Atual</span>
             <div style="font-weight: 700; font-size: 24px; color: ${statusColor}; margin-top: 4px;">
-              ${state5.currentTemperature !== null ? formatTemperature(state5.currentTemperature) : "N/A"}
+              ${state6.currentTemperature !== null ? formatTemperature(state6.currentTemperature) : "N/A"}
             </div>
             <div style="font-size: 11px; color: ${statusColor}; margin-top: 2px;">${statusText}</div>
           </div>
           <!-- Average -->
           <div style="
-            padding: 16px; background: ${state5.theme === "dark" ? "rgba(255,255,255,0.05)" : "#fafafa"};
+            padding: 16px; background: ${state6.theme === "dark" ? "rgba(255,255,255,0.05)" : "#fafafa"};
             border-radius: 12px; border: 1px solid ${colors.border};
           ">
             <span style="color: ${colors.textMuted}; font-size: 12px; font-weight: 500;">M\xE9dia do Per\xEDodo</span>
             <div id="${modalId}-avg" style="font-weight: 600; font-size: 20px; color: ${colors.text}; margin-top: 4px;">
-              ${state5.stats.count > 0 ? formatTemperature(state5.stats.avg) : "N/A"}
+              ${state6.stats.count > 0 ? formatTemperature(state6.stats.avg) : "N/A"}
             </div>
             <div style="font-size: 11px; color: ${colors.textMuted}; margin-top: 2px;">${startDateStr} - ${endDateStr}</div>
           </div>
           <!-- Min/Max -->
           <div style="
-            padding: 16px; background: ${state5.theme === "dark" ? "rgba(255,255,255,0.05)" : "#fafafa"};
+            padding: 16px; background: ${state6.theme === "dark" ? "rgba(255,255,255,0.05)" : "#fafafa"};
             border-radius: 12px; border: 1px solid ${colors.border};
           ">
             <span style="color: ${colors.textMuted}; font-size: 12px; font-weight: 500;">Min / Max</span>
             <div id="${modalId}-minmax" style="font-weight: 600; font-size: 20px; color: ${colors.text}; margin-top: 4px;">
-              ${state5.stats.count > 0 ? `${formatTemperature(state5.stats.min)} / ${formatTemperature(state5.stats.max)}` : "N/A"}
+              ${state6.stats.count > 0 ? `${formatTemperature(state6.stats.min)} / ${formatTemperature(state6.stats.max)}` : "N/A"}
             </div>
-            <div style="font-size: 11px; color: ${colors.textMuted}; margin-top: 2px;">${state5.stats.count} leituras</div>
+            <div style="font-size: 11px; color: ${colors.textMuted}; margin-top: 2px;">${state6.stats.count} leituras</div>
           </div>
           <!-- Ideal Range -->
           <div style="
-            padding: 16px; background: ${state5.theme === "dark" ? "rgba(255,255,255,0.05)" : "#fafafa"};
+            padding: 16px; background: ${state6.theme === "dark" ? "rgba(255,255,255,0.05)" : "#fafafa"};
             border-radius: 12px; border: 1px solid ${colors.border};
           ">
             <span style="color: ${colors.textMuted}; font-size: 12px; font-weight: 500;">Faixa Ideal</span>
@@ -30891,18 +30908,18 @@
             Hist\xF3rico de Temperatura
           </h3>
           <div id="${modalId}-chart" style="
-            height: 320px; background: ${state5.theme === "dark" ? "rgba(255,255,255,0.03)" : "#fafafa"};
+            height: 320px; background: ${state6.theme === "dark" ? "rgba(255,255,255,0.03)" : "#fafafa"};
             border-radius: 12px; display: flex; justify-content: center; align-items: center;
             border: 1px solid ${colors.border}; position: relative;
           ">
-            ${state5.isLoading ? `<div style="text-align: center; color: ${colors.textMuted};">
+            ${state6.isLoading ? `<div style="text-align: center; color: ${colors.textMuted};">
                    <div style="animation: spin 1s linear infinite; font-size: 32px; margin-bottom: 8px;">\u21BB</div>
                    <div>Carregando dados...</div>
                  </div>` : error ? `<div style="text-align: center; color: ${colors.danger};">
                      <div style="font-size: 32px; margin-bottom: 8px;">\u26A0\uFE0F</div>
                      <div>Erro ao carregar dados</div>
                      <div style="font-size: 12px; margin-top: 4px;">${error.message}</div>
-                   </div>` : state5.data.length === 0 ? `<div style="text-align: center; color: ${colors.textMuted};">
+                   </div>` : state6.data.length === 0 ? `<div style="text-align: center; color: ${colors.textMuted};">
                        <div style="font-size: 32px; margin-bottom: 8px;">\u{1F4ED}</div>
                        <div>Sem dados para o per\xEDodo selecionado</div>
                      </div>` : `<canvas id="${modalId}-canvas" style="width: 100%; height: 100%;"></canvas>`}
@@ -30912,12 +30929,12 @@
         <!-- Actions -->
         <div style="display: flex; justify-content: flex-end; gap: 12px;">
           <button id="${modalId}-export" style="
-            background: ${state5.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f7f7f7"};
+            background: ${state6.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f7f7f7"};
             color: ${colors.text}; border: 1px solid ${colors.border};
             padding: 8px 16px; border-radius: 6px; cursor: pointer;
             font-size: 14px; display: flex; align-items: center; gap: 8px;
             font-family: 'Roboto', Arial, sans-serif;
-          " ${state5.data.length === 0 ? "disabled" : ""}>
+          " ${state6.data.length === 0 ? "disabled" : ""}>
             \u{1F4E5} Exportar CSV
           </button>
           <button id="${modalId}-close-btn" style="
@@ -30968,14 +30985,14 @@
     </style>
   `;
   }
-  function drawChart(modalId, state5) {
+  function drawChart(modalId, state6) {
     const chartContainer = document.getElementById(`${modalId}-chart`);
     const canvas = document.getElementById(`${modalId}-canvas`);
-    if (!chartContainer || !canvas || state5.data.length === 0) return;
+    if (!chartContainer || !canvas || state6.data.length === 0) return;
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
-    const colors = getThemeColors(state5.theme);
-    const filteredData = filterByDayPeriods(state5.data, state5.selectedPeriods);
+    const colors = getThemeColors(state6.theme);
+    const filteredData = filterByDayPeriods(state6.data, state6.selectedPeriods);
     if (filteredData.length === 0) {
       canvas.width = chartContainer.clientWidth;
       canvas.height = chartContainer.clientHeight;
@@ -30986,14 +31003,14 @@
       return;
     }
     let chartData;
-    if (state5.granularity === "hour") {
+    if (state6.granularity === "hour") {
       const interpolated = interpolateTemperature(filteredData, {
         intervalMinutes: 30,
-        startTs: state5.startTs,
-        endTs: state5.endTs,
-        clampRange: state5.clampRange
+        startTs: state6.startTs,
+        endTs: state6.endTs,
+        clampRange: state6.clampRange
       });
-      const filteredInterpolated = filterByDayPeriods(interpolated, state5.selectedPeriods);
+      const filteredInterpolated = filterByDayPeriods(interpolated, state6.selectedPeriods);
       chartData = filteredInterpolated.map((item) => ({
         x: item.ts,
         y: Number(item.value),
@@ -31001,7 +31018,7 @@
         screenY: 0
       }));
     } else {
-      const daily = aggregateByDay(filteredData, state5.clampRange);
+      const daily = aggregateByDay(filteredData, state6.clampRange);
       chartData = daily.map((item) => ({
         x: item.dateTs,
         y: item.avg,
@@ -31019,12 +31036,12 @@
     const paddingRight = 20;
     const paddingTop = 20;
     const paddingBottom = 55;
-    const isPeriodsFiltered = state5.selectedPeriods.length < 4 && state5.selectedPeriods.length > 0;
+    const isPeriodsFiltered = state6.selectedPeriods.length < 4 && state6.selectedPeriods.length > 0;
     const values = chartData.map((d) => d.y);
     const dataMin = Math.min(...values);
     const dataMax = Math.max(...values);
-    const thresholdMin = state5.temperatureMin !== null ? state5.temperatureMin : dataMin;
-    const thresholdMax = state5.temperatureMax !== null ? state5.temperatureMax : dataMax;
+    const thresholdMin = state6.temperatureMin !== null ? state6.temperatureMin : dataMin;
+    const thresholdMax = state6.temperatureMax !== null ? state6.temperatureMax : dataMax;
     const minY = Math.min(dataMin, thresholdMin) - 1;
     const maxY = Math.max(dataMax, thresholdMax) + 1;
     const chartWidth = width - paddingLeft - paddingRight;
@@ -31056,9 +31073,9 @@
       ctx.lineTo(width - paddingRight, y);
       ctx.stroke();
     }
-    if (state5.temperatureMin !== null && state5.temperatureMax !== null) {
-      const rangeMinY = height - paddingBottom - (state5.temperatureMin - minY) * scaleY;
-      const rangeMaxY = height - paddingBottom - (state5.temperatureMax - minY) * scaleY;
+    if (state6.temperatureMin !== null && state6.temperatureMax !== null) {
+      const rangeMinY = height - paddingBottom - (state6.temperatureMin - minY) * scaleY;
+      const rangeMaxY = height - paddingBottom - (state6.temperatureMax - minY) * scaleY;
       ctx.fillStyle = "rgba(76, 175, 80, 0.1)";
       ctx.fillRect(paddingLeft, rangeMaxY, chartWidth, rangeMinY - rangeMaxY);
       ctx.strokeStyle = colors.success;
@@ -31100,10 +31117,10 @@
       const point = chartData[i];
       const date = new Date(point.x);
       let label;
-      if (state5.granularity === "hour") {
-        label = date.toLocaleTimeString(state5.locale, { hour: "2-digit", minute: "2-digit" });
+      if (state6.granularity === "hour") {
+        label = date.toLocaleTimeString(state6.locale, { hour: "2-digit", minute: "2-digit" });
       } else {
-        label = date.toLocaleDateString(state5.locale, { day: "2-digit", month: "2-digit" });
+        label = date.toLocaleDateString(state6.locale, { day: "2-digit", month: "2-digit" });
       }
       ctx.strokeStyle = colors.chartGrid;
       ctx.lineWidth = 1;
@@ -31121,16 +31138,16 @@
     ctx.lineTo(paddingLeft, height - paddingBottom);
     ctx.lineTo(width - paddingRight, height - paddingBottom);
     ctx.stroke();
-    setupChartTooltip(canvas, chartContainer, chartData, state5, colors);
+    setupChartTooltip(canvas, chartContainer, chartData, state6, colors);
   }
-  function setupChartTooltip(canvas, container, chartData, state5, colors) {
+  function setupChartTooltip(canvas, container, chartData, state6, colors) {
     const existingTooltip = container.querySelector(".myio-chart-tooltip");
     if (existingTooltip) existingTooltip.remove();
     const tooltip = document.createElement("div");
     tooltip.className = "myio-chart-tooltip";
     tooltip.style.cssText = `
     position: absolute;
-    background: ${state5.theme === "dark" ? "rgba(30, 30, 40, 0.95)" : "rgba(255, 255, 255, 0.98)"};
+    background: ${state6.theme === "dark" ? "rgba(30, 30, 40, 0.95)" : "rgba(255, 255, 255, 0.98)"};
     border: 1px solid ${colors.border};
     border-radius: 8px;
     padding: 10px 14px;
@@ -31167,17 +31184,17 @@
       if (point) {
         const date = new Date(point.x);
         let dateStr;
-        if (state5.granularity === "hour") {
-          dateStr = date.toLocaleDateString(state5.locale, {
+        if (state6.granularity === "hour") {
+          dateStr = date.toLocaleDateString(state6.locale, {
             day: "2-digit",
             month: "2-digit",
             year: "numeric"
-          }) + " " + date.toLocaleTimeString(state5.locale, {
+          }) + " " + date.toLocaleTimeString(state6.locale, {
             hour: "2-digit",
             minute: "2-digit"
           });
         } else {
-          dateStr = date.toLocaleDateString(state5.locale, {
+          dateStr = date.toLocaleDateString(state6.locale, {
             day: "2-digit",
             month: "2-digit",
             year: "numeric"
@@ -31215,7 +31232,7 @@
       canvas.style.cursor = "default";
     });
   }
-  async function setupEventListeners(container, state5, modalId, onClose) {
+  async function setupEventListeners(container, state6, modalId, onClose) {
     const closeModal = () => {
       container.remove();
       onClose?.();
@@ -31226,19 +31243,19 @@
     document.getElementById(`${modalId}-close`)?.addEventListener("click", closeModal);
     document.getElementById(`${modalId}-close-btn`)?.addEventListener("click", closeModal);
     const dateRangeInput = document.getElementById(`${modalId}-date-range`);
-    if (dateRangeInput && !state5.dateRangePicker) {
+    if (dateRangeInput && !state6.dateRangePicker) {
       try {
-        state5.dateRangePicker = await createDateRangePicker2(dateRangeInput, {
-          presetStart: new Date(state5.startTs).toISOString(),
-          presetEnd: new Date(state5.endTs).toISOString(),
+        state6.dateRangePicker = await createDateRangePicker2(dateRangeInput, {
+          presetStart: new Date(state6.startTs).toISOString(),
+          presetEnd: new Date(state6.endTs).toISOString(),
           includeTime: true,
           timePrecision: "minute",
           maxRangeDays: 90,
-          locale: state5.locale,
+          locale: state6.locale,
           parentEl: container.querySelector(".myio-temp-modal-content"),
           onApply: (result) => {
-            state5.startTs = new Date(result.startISO).getTime();
-            state5.endTs = new Date(result.endISO).getTime();
+            state6.startTs = new Date(result.startISO).getTime();
+            state6.endTs = new Date(result.endISO).getTime();
             console.log("[TemperatureModal] Date range applied:", result);
           }
         });
@@ -31247,19 +31264,19 @@
       }
     }
     document.getElementById(`${modalId}-theme-toggle`)?.addEventListener("click", async () => {
-      state5.theme = state5.theme === "dark" ? "light" : "dark";
-      localStorage.setItem("myio-temp-modal-theme", state5.theme);
-      state5.dateRangePicker = null;
-      renderModal(container, state5, modalId);
-      if (state5.data.length > 0) drawChart(modalId, state5);
-      await setupEventListeners(container, state5, modalId, onClose);
+      state6.theme = state6.theme === "dark" ? "light" : "dark";
+      localStorage.setItem("myio-temp-modal-theme", state6.theme);
+      state6.dateRangePicker = null;
+      renderModal(container, state6, modalId);
+      if (state6.data.length > 0) drawChart(modalId, state6);
+      await setupEventListeners(container, state6, modalId, onClose);
     });
     document.getElementById(`${modalId}-maximize`)?.addEventListener("click", async () => {
       container.__isMaximized = !container.__isMaximized;
-      state5.dateRangePicker = null;
-      renderModal(container, state5, modalId);
-      if (state5.data.length > 0) drawChart(modalId, state5);
-      await setupEventListeners(container, state5, modalId, onClose);
+      state6.dateRangePicker = null;
+      renderModal(container, state6, modalId);
+      if (state6.data.length > 0) drawChart(modalId, state6);
+      await setupEventListeners(container, state6, modalId, onClose);
     });
     const periodBtn = document.getElementById(`${modalId}-period-btn`);
     const periodDropdown = document.getElementById(`${modalId}-period-dropdown`);
@@ -31278,71 +31295,71 @@
     periodCheckboxes.forEach((checkbox) => {
       checkbox.addEventListener("change", () => {
         const checked = Array.from(periodCheckboxes).filter((cb) => cb.checked).map((cb) => cb.value);
-        state5.selectedPeriods = checked;
+        state6.selectedPeriods = checked;
         const btnLabel = periodBtn?.querySelector("span:first-child");
         if (btnLabel) {
-          btnLabel.textContent = getSelectedPeriodsLabel(state5.selectedPeriods);
+          btnLabel.textContent = getSelectedPeriodsLabel(state6.selectedPeriods);
         }
-        if (state5.data.length > 0) drawChart(modalId, state5);
+        if (state6.data.length > 0) drawChart(modalId, state6);
       });
     });
     document.getElementById(`${modalId}-period-select-all`)?.addEventListener("click", () => {
       periodCheckboxes.forEach((cb) => {
         cb.checked = true;
       });
-      state5.selectedPeriods = ["madrugada", "manha", "tarde", "noite"];
+      state6.selectedPeriods = ["madrugada", "manha", "tarde", "noite"];
       const btnLabel = periodBtn?.querySelector("span:first-child");
       if (btnLabel) {
-        btnLabel.textContent = getSelectedPeriodsLabel(state5.selectedPeriods);
+        btnLabel.textContent = getSelectedPeriodsLabel(state6.selectedPeriods);
       }
-      if (state5.data.length > 0) drawChart(modalId, state5);
+      if (state6.data.length > 0) drawChart(modalId, state6);
     });
     document.getElementById(`${modalId}-period-clear`)?.addEventListener("click", () => {
       periodCheckboxes.forEach((cb) => {
         cb.checked = false;
       });
-      state5.selectedPeriods = [];
+      state6.selectedPeriods = [];
       const btnLabel = periodBtn?.querySelector("span:first-child");
       if (btnLabel) {
-        btnLabel.textContent = getSelectedPeriodsLabel(state5.selectedPeriods);
+        btnLabel.textContent = getSelectedPeriodsLabel(state6.selectedPeriods);
       }
-      if (state5.data.length > 0) drawChart(modalId, state5);
+      if (state6.data.length > 0) drawChart(modalId, state6);
     });
     document.getElementById(`${modalId}-granularity`)?.addEventListener("change", (e) => {
-      state5.granularity = e.target.value;
-      localStorage.setItem("myio-temp-modal-granularity", state5.granularity);
-      if (state5.data.length > 0) drawChart(modalId, state5);
+      state6.granularity = e.target.value;
+      localStorage.setItem("myio-temp-modal-granularity", state6.granularity);
+      if (state6.data.length > 0) drawChart(modalId, state6);
     });
     document.getElementById(`${modalId}-query`)?.addEventListener("click", async () => {
-      if (state5.startTs >= state5.endTs) {
+      if (state6.startTs >= state6.endTs) {
         alert("Por favor, selecione um per\xEDodo v\xE1lido");
         return;
       }
-      state5.isLoading = true;
-      state5.dateRangePicker = null;
-      renderModal(container, state5, modalId);
+      state6.isLoading = true;
+      state6.dateRangePicker = null;
+      renderModal(container, state6, modalId);
       try {
-        state5.data = await fetchTemperatureData(state5.token, state5.deviceId, state5.startTs, state5.endTs);
-        state5.stats = calculateStats(state5.data, state5.clampRange);
-        state5.isLoading = false;
-        renderModal(container, state5, modalId);
-        drawChart(modalId, state5);
-        await setupEventListeners(container, state5, modalId, onClose);
+        state6.data = await fetchTemperatureData(state6.token, state6.deviceId, state6.startTs, state6.endTs);
+        state6.stats = calculateStats(state6.data, state6.clampRange);
+        state6.isLoading = false;
+        renderModal(container, state6, modalId);
+        drawChart(modalId, state6);
+        await setupEventListeners(container, state6, modalId, onClose);
       } catch (error) {
         console.error("[TemperatureModal] Error fetching data:", error);
-        state5.isLoading = false;
-        renderModal(container, state5, modalId, error);
-        await setupEventListeners(container, state5, modalId, onClose);
+        state6.isLoading = false;
+        renderModal(container, state6, modalId, error);
+        await setupEventListeners(container, state6, modalId, onClose);
       }
     });
     document.getElementById(`${modalId}-export`)?.addEventListener("click", () => {
-      if (state5.data.length === 0) return;
-      const startDateStr = new Date(state5.startTs).toLocaleDateString(state5.locale).replace(/\//g, "-");
-      const endDateStr = new Date(state5.endTs).toLocaleDateString(state5.locale).replace(/\//g, "-");
+      if (state6.data.length === 0) return;
+      const startDateStr = new Date(state6.startTs).toLocaleDateString(state6.locale).replace(/\//g, "-");
+      const endDateStr = new Date(state6.endTs).toLocaleDateString(state6.locale).replace(/\//g, "-");
       exportTemperatureCSV(
-        state5.data,
-        state5.label,
-        state5.stats,
+        state6.data,
+        state6.label,
+        state6.stats,
         startDateStr,
         endDateStr
       );
@@ -31355,7 +31372,7 @@
     const defaultDateRange = getTodaySoFar();
     const startTs = params.startDate ? new Date(params.startDate).getTime() : defaultDateRange.startTs;
     const endTs = params.endDate ? new Date(params.endDate).getTime() : defaultDateRange.endTs;
-    const state5 = {
+    const state6 = {
       token: params.token,
       devices: params.devices,
       startTs,
@@ -31374,44 +31391,44 @@
     };
     const savedGranularity = localStorage.getItem("myio-temp-comparison-granularity");
     const savedTheme = localStorage.getItem("myio-temp-comparison-theme");
-    if (savedGranularity) state5.granularity = savedGranularity;
-    if (savedTheme) state5.theme = savedTheme;
+    if (savedGranularity) state6.granularity = savedGranularity;
+    if (savedTheme) state6.theme = savedTheme;
     const modalContainer = document.createElement("div");
     modalContainer.id = modalId;
     document.body.appendChild(modalContainer);
-    renderModal2(modalContainer, state5, modalId);
-    await fetchAllDevicesData(state5);
-    renderModal2(modalContainer, state5, modalId);
-    drawComparisonChart(modalId, state5);
-    await setupEventListeners2(modalContainer, state5, modalId, params.onClose);
+    renderModal2(modalContainer, state6, modalId);
+    await fetchAllDevicesData(state6);
+    renderModal2(modalContainer, state6, modalId);
+    drawComparisonChart(modalId, state6);
+    await setupEventListeners2(modalContainer, state6, modalId, params.onClose);
     return {
       destroy: () => {
         modalContainer.remove();
         params.onClose?.();
       },
       updateData: async (startDate, endDate, granularity) => {
-        state5.startTs = new Date(startDate).getTime();
-        state5.endTs = new Date(endDate).getTime();
-        if (granularity) state5.granularity = granularity;
-        state5.isLoading = true;
-        renderModal2(modalContainer, state5, modalId);
-        await fetchAllDevicesData(state5);
-        renderModal2(modalContainer, state5, modalId);
-        drawComparisonChart(modalId, state5);
-        setupEventListeners2(modalContainer, state5, modalId, params.onClose);
+        state6.startTs = new Date(startDate).getTime();
+        state6.endTs = new Date(endDate).getTime();
+        if (granularity) state6.granularity = granularity;
+        state6.isLoading = true;
+        renderModal2(modalContainer, state6, modalId);
+        await fetchAllDevicesData(state6);
+        renderModal2(modalContainer, state6, modalId);
+        drawComparisonChart(modalId, state6);
+        setupEventListeners2(modalContainer, state6, modalId, params.onClose);
       }
     };
   }
-  async function fetchAllDevicesData(state5) {
-    state5.isLoading = true;
-    state5.deviceData = [];
+  async function fetchAllDevicesData(state6) {
+    state6.isLoading = true;
+    state6.deviceData = [];
     try {
       const results = await Promise.all(
-        state5.devices.map(async (device, index) => {
+        state6.devices.map(async (device, index) => {
           const deviceId = device.tbId || device.id;
           try {
-            const data = await fetchTemperatureData(state5.token, deviceId, state5.startTs, state5.endTs);
-            const stats = calculateStats(data, state5.clampRange);
+            const data = await fetchTemperatureData(state6.token, deviceId, state6.startTs, state6.endTs);
+            const stats = calculateStats(data, state6.clampRange);
             return {
               device,
               data,
@@ -31429,21 +31446,21 @@
           }
         })
       );
-      state5.deviceData = results;
+      state6.deviceData = results;
     } catch (error) {
       console.error("[TemperatureComparisonModal] Error fetching data:", error);
     }
-    state5.isLoading = false;
+    state6.isLoading = false;
   }
-  function renderModal2(container, state5, modalId) {
-    const colors = getThemeColors(state5.theme);
-    new Date(state5.startTs).toLocaleDateString(state5.locale);
-    new Date(state5.endTs).toLocaleDateString(state5.locale);
-    new Date(state5.startTs).toISOString().slice(0, 16);
-    new Date(state5.endTs).toISOString().slice(0, 16);
-    const legendHTML = state5.deviceData.map((dd) => `
+  function renderModal2(container, state6, modalId) {
+    const colors = getThemeColors(state6.theme);
+    new Date(state6.startTs).toLocaleDateString(state6.locale);
+    new Date(state6.endTs).toLocaleDateString(state6.locale);
+    new Date(state6.startTs).toISOString().slice(0, 16);
+    new Date(state6.endTs).toISOString().slice(0, 16);
+    const legendHTML = state6.deviceData.map((dd) => `
     <div style="display: flex; align-items: center; gap: 8px; padding: 8px 12px;
-      background: ${state5.theme === "dark" ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.03)"};
+      background: ${state6.theme === "dark" ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.03)"};
       border-radius: 8px;">
       <span style="width: 12px; height: 12px; border-radius: 50%; background: ${dd.color};"></span>
       <span style="color: ${colors.text}; font-size: 13px;">${dd.device.label}</span>
@@ -31452,9 +31469,9 @@
       </span>
     </div>
   `).join("");
-    const statsHTML = state5.deviceData.map((dd) => `
+    const statsHTML = state6.deviceData.map((dd) => `
     <div style="
-      padding: 12px; background: ${state5.theme === "dark" ? "rgba(255,255,255,0.05)" : "#fafafa"};
+      padding: 12px; background: ${state6.theme === "dark" ? "rgba(255,255,255,0.05)" : "#fafafa"};
       border-radius: 10px; border-left: 4px solid ${dd.color};
       min-width: 150px;
     ">
@@ -31505,7 +31522,7 @@
           min-height: 20px;
         ">
           <h2 style="margin: 6px; font-size: 18px; font-weight: 600; color: white; line-height: 2;">
-            \u{1F321}\uFE0F Compara\xE7\xE3o de Temperatura - ${state5.devices.length} sensores
+            \u{1F321}\uFE0F Compara\xE7\xE3o de Temperatura - ${state6.devices.length} sensores
           </h2>
           <div style="display: flex; gap: 4px; align-items: center;">
             <!-- Theme Toggle -->
@@ -31513,7 +31530,7 @@
               background: none; border: none; font-size: 16px; cursor: pointer;
               padding: 4px 8px; border-radius: 6px; color: rgba(255,255,255,0.8);
               transition: background-color 0.2s;
-            ">${state5.theme === "dark" ? "\u2600\uFE0F" : "\u{1F319}"}</button>
+            ">${state6.theme === "dark" ? "\u2600\uFE0F" : "\u{1F319}"}</button>
             <!-- Maximize Button -->
             <button id="${modalId}-maximize" title="${isMaximized ? "Restaurar" : "Maximizar"}" style="
               background: none; border: none; font-size: 16px; cursor: pointer;
@@ -31536,7 +31553,7 @@
         <div style="
           display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end;
           margin-bottom: 16px; padding: 16px;
-          background: ${state5.theme === "dark" ? "rgba(255,255,255,0.05)" : "#f7f7f7"};
+          background: ${state6.theme === "dark" ? "rgba(255,255,255,0.05)" : "#f7f7f7"};
           border-radius: 6px; border: 1px solid ${colors.border};
         ">
           <!-- Granularity Select -->
@@ -31549,8 +31566,8 @@
               font-size: 14px; color: ${colors.text}; background: ${colors.surface};
               cursor: pointer; min-width: 130px;
             ">
-              <option value="hour" ${state5.granularity === "hour" ? "selected" : ""}>Hora (30 min)</option>
-              <option value="day" ${state5.granularity === "day" ? "selected" : ""}>Dia (m\xE9dia)</option>
+              <option value="hour" ${state6.granularity === "hour" ? "selected" : ""}>Hora (30 min)</option>
+              <option value="day" ${state6.granularity === "day" ? "selected" : ""}>Dia (m\xE9dia)</option>
             </select>
           </div>
           <!-- Day Period Filter (Multiselect) -->
@@ -31564,7 +31581,7 @@
               cursor: pointer; min-width: 180px; text-align: left;
               display: flex; align-items: center; justify-content: space-between; gap: 8px;
             ">
-              <span>${getSelectedPeriodsLabel(state5.selectedPeriods)}</span>
+              <span>${getSelectedPeriodsLabel(state6.selectedPeriods)}</span>
               <span style="font-size: 10px;">\u25BC</span>
             </button>
             <div id="${modalId}-period-dropdown" style="
@@ -31577,12 +31594,12 @@
                 <label style="
                   display: flex; align-items: center; gap: 8px; padding: 8px 12px;
                   cursor: pointer; font-size: 13px; color: ${colors.text};
-                " onmouseover="this.style.background='${state5.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"}'"
+                " onmouseover="this.style.background='${state6.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"}'"
                    onmouseout="this.style.background='transparent'">
                   <input type="checkbox"
                     name="${modalId}-period"
                     value="${period.id}"
-                    ${state5.selectedPeriods.includes(period.id) ? "checked" : ""}
+                    ${state6.selectedPeriods.includes(period.id) ? "checked" : ""}
                     style="width: 16px; height: 16px; cursor: pointer; accent-color: #3e1a7d;">
                   ${period.label}
                 </label>
@@ -31590,13 +31607,13 @@
               <div style="border-top: 1px solid ${colors.border}; margin-top: 8px; padding-top: 8px;">
                 <button id="${modalId}-period-select-all" type="button" style="
                   width: calc(100% - 16px); margin: 0 8px 4px; padding: 6px;
-                  background: ${state5.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"};
+                  background: ${state6.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"};
                   border: none; border-radius: 4px; cursor: pointer;
                   font-size: 12px; color: ${colors.text};
                 ">Selecionar Todos</button>
                 <button id="${modalId}-period-clear" type="button" style="
                   width: calc(100% - 16px); margin: 0 8px; padding: 6px;
-                  background: ${state5.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"};
+                  background: ${state6.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"};
                   border: none; border-radius: 4px; cursor: pointer;
                   font-size: 12px; color: ${colors.text};
                 ">Limpar Sele\xE7\xE3o</button>
@@ -31621,8 +31638,8 @@
             font-size: 14px; font-weight: 500; height: 38px;
             display: flex; align-items: center; gap: 8px;
             font-family: 'Roboto', Arial, sans-serif;
-          " ${state5.isLoading ? "disabled" : ""}>
-            ${state5.isLoading ? '<span style="animation: spin 1s linear infinite; display: inline-block;">\u21BB</span> Carregando...' : "Carregar"}
+          " ${state6.isLoading ? "disabled" : ""}>
+            ${state6.isLoading ? '<span style="animation: spin 1s linear infinite; display: inline-block;">\u21BB</span> Carregando...' : "Carregar"}
           </button>
         </div>
 
@@ -31638,14 +31655,14 @@
         <div style="margin-bottom: 24px;">
           <div id="${modalId}-chart" style="
             height: 380px;
-            background: ${state5.theme === "dark" ? "rgba(255,255,255,0.03)" : "#fafafa"};
+            background: ${state6.theme === "dark" ? "rgba(255,255,255,0.03)" : "#fafafa"};
             border-radius: 14px; display: flex; justify-content: center; align-items: center;
             border: 1px solid ${colors.border}; position: relative;
           ">
-            ${state5.isLoading ? `<div style="text-align: center; color: ${colors.textMuted};">
+            ${state6.isLoading ? `<div style="text-align: center; color: ${colors.textMuted};">
                    <div style="animation: spin 1s linear infinite; font-size: 36px; margin-bottom: 12px;">\u21BB</div>
-                   <div style="font-size: 15px;">Carregando dados de ${state5.devices.length} sensores...</div>
-                 </div>` : state5.deviceData.every((dd) => dd.data.length === 0) ? `<div style="text-align: center; color: ${colors.textMuted};">
+                   <div style="font-size: 15px;">Carregando dados de ${state6.devices.length} sensores...</div>
+                 </div>` : state6.deviceData.every((dd) => dd.data.length === 0) ? `<div style="text-align: center; color: ${colors.textMuted};">
                      <div style="font-size: 48px; margin-bottom: 12px;">\u{1F4ED}</div>
                      <div style="font-size: 16px;">Sem dados para o per\xEDodo selecionado</div>
                    </div>` : `<canvas id="${modalId}-canvas" style="width: 100%; height: 100%;"></canvas>`}
@@ -31663,12 +31680,12 @@
         <!-- Actions -->
         <div style="display: flex; justify-content: flex-end; gap: 12px;">
           <button id="${modalId}-export" style="
-            background: ${state5.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f7f7f7"};
+            background: ${state6.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f7f7f7"};
             color: ${colors.text}; border: 1px solid ${colors.border};
             padding: 8px 16px; border-radius: 6px; cursor: pointer;
             font-size: 14px; display: flex; align-items: center; gap: 8px;
             font-family: 'Roboto', Arial, sans-serif;
-          " ${state5.deviceData.every((dd) => dd.data.length === 0) ? "disabled" : ""}>
+          " ${state6.deviceData.every((dd) => dd.data.length === 0) ? "disabled" : ""}>
             \u{1F4E5} Exportar CSV
           </button>
           <button id="${modalId}-close-btn" style="
@@ -31703,15 +31720,15 @@
     </style>
   `;
   }
-  function drawComparisonChart(modalId, state5) {
+  function drawComparisonChart(modalId, state6) {
     const chartContainer = document.getElementById(`${modalId}-chart`);
     const canvas = document.getElementById(`${modalId}-canvas`);
     if (!chartContainer || !canvas) return;
-    const hasData = state5.deviceData.some((dd) => dd.data.length > 0);
+    const hasData = state6.deviceData.some((dd) => dd.data.length > 0);
     if (!hasData) return;
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
-    const colors = getThemeColors(state5.theme);
+    const colors = getThemeColors(state6.theme);
     const width = chartContainer.clientWidth - 2;
     const height = 380;
     canvas.width = width;
@@ -31722,19 +31739,19 @@
     const paddingBottom = 55;
     ctx.clearRect(0, 0, width, height);
     const processedData = [];
-    state5.deviceData.forEach((dd) => {
+    state6.deviceData.forEach((dd) => {
       if (dd.data.length === 0) return;
-      const filteredData = filterByDayPeriods(dd.data, state5.selectedPeriods);
+      const filteredData = filterByDayPeriods(dd.data, state6.selectedPeriods);
       if (filteredData.length === 0) return;
       let points;
-      if (state5.granularity === "hour") {
+      if (state6.granularity === "hour") {
         const interpolated = interpolateTemperature(filteredData, {
           intervalMinutes: 30,
-          startTs: state5.startTs,
-          endTs: state5.endTs,
-          clampRange: state5.clampRange
+          startTs: state6.startTs,
+          endTs: state6.endTs,
+          clampRange: state6.clampRange
         });
-        const filteredInterpolated = filterByDayPeriods(interpolated, state5.selectedPeriods);
+        const filteredInterpolated = filterByDayPeriods(interpolated, state6.selectedPeriods);
         points = filteredInterpolated.map((item) => ({
           x: item.ts,
           y: Number(item.value),
@@ -31744,7 +31761,7 @@
           deviceColor: dd.color
         }));
       } else {
-        const daily = aggregateByDay(filteredData, state5.clampRange);
+        const daily = aggregateByDay(filteredData, state6.clampRange);
         points = daily.map((item) => ({
           x: item.dateTs,
           y: item.avg,
@@ -31765,7 +31782,7 @@
       ctx.fillText("Nenhum dado para os per\xEDodos selecionados", width / 2, height / 2);
       return;
     }
-    const isPeriodsFiltered = state5.selectedPeriods.length < 4 && state5.selectedPeriods.length > 0;
+    const isPeriodsFiltered = state6.selectedPeriods.length < 4 && state6.selectedPeriods.length > 0;
     let dataMinY = Infinity;
     let dataMaxY = -Infinity;
     processedData.forEach(({ points }) => {
@@ -31775,7 +31792,7 @@
       });
     });
     const rangeMap = /* @__PURE__ */ new Map();
-    state5.deviceData.forEach((dd, index) => {
+    state6.deviceData.forEach((dd, index) => {
       const device = dd.device;
       const min = device.temperatureMin;
       const max = device.temperatureMax;
@@ -31794,10 +31811,10 @@
         }
       }
     });
-    if (rangeMap.size === 0 && state5.temperatureMin !== null && state5.temperatureMax !== null) {
+    if (rangeMap.size === 0 && state6.temperatureMin !== null && state6.temperatureMax !== null) {
       rangeMap.set("global", {
-        min: state5.temperatureMin,
-        max: state5.temperatureMax,
+        min: state6.temperatureMin,
+        max: state6.temperatureMax,
         customerName: "Global",
         color: colors.success,
         deviceLabels: []
@@ -31918,10 +31935,10 @@
       const point = xAxisPoints[i];
       const date = new Date(point.x);
       let label;
-      if (state5.granularity === "hour") {
-        label = date.toLocaleTimeString(state5.locale, { hour: "2-digit", minute: "2-digit" });
+      if (state6.granularity === "hour") {
+        label = date.toLocaleTimeString(state6.locale, { hour: "2-digit", minute: "2-digit" });
       } else {
-        label = date.toLocaleDateString(state5.locale, { day: "2-digit", month: "2-digit" });
+        label = date.toLocaleDateString(state6.locale, { day: "2-digit", month: "2-digit" });
       }
       ctx.strokeStyle = colors.chartGrid;
       ctx.lineWidth = 1;
@@ -31940,16 +31957,16 @@
     ctx.lineTo(width - paddingRight, height - paddingBottom);
     ctx.stroke();
     const allChartPoints = processedData.flatMap((pd) => pd.points);
-    setupComparisonChartTooltip(canvas, chartContainer, allChartPoints, state5, colors);
+    setupComparisonChartTooltip(canvas, chartContainer, allChartPoints, state6, colors);
   }
-  function setupComparisonChartTooltip(canvas, container, chartData, state5, colors) {
+  function setupComparisonChartTooltip(canvas, container, chartData, state6, colors) {
     const existingTooltip = container.querySelector(".myio-chart-tooltip");
     if (existingTooltip) existingTooltip.remove();
     const tooltip = document.createElement("div");
     tooltip.className = "myio-chart-tooltip";
     tooltip.style.cssText = `
     position: absolute;
-    background: ${state5.theme === "dark" ? "rgba(30, 30, 40, 0.95)" : "rgba(255, 255, 255, 0.98)"};
+    background: ${state6.theme === "dark" ? "rgba(30, 30, 40, 0.95)" : "rgba(255, 255, 255, 0.98)"};
     border: 1px solid ${colors.border};
     border-radius: 8px;
     padding: 10px 14px;
@@ -31986,17 +32003,17 @@
       if (point) {
         const date = new Date(point.x);
         let dateStr;
-        if (state5.granularity === "hour") {
-          dateStr = date.toLocaleDateString(state5.locale, {
+        if (state6.granularity === "hour") {
+          dateStr = date.toLocaleDateString(state6.locale, {
             day: "2-digit",
             month: "2-digit",
             year: "numeric"
-          }) + " " + date.toLocaleTimeString(state5.locale, {
+          }) + " " + date.toLocaleTimeString(state6.locale, {
             hour: "2-digit",
             minute: "2-digit"
           });
         } else {
-          dateStr = date.toLocaleDateString(state5.locale, {
+          dateStr = date.toLocaleDateString(state6.locale, {
             day: "2-digit",
             month: "2-digit",
             year: "numeric"
@@ -32038,7 +32055,7 @@
       canvas.style.cursor = "default";
     });
   }
-  async function setupEventListeners2(container, state5, modalId, onClose) {
+  async function setupEventListeners2(container, state6, modalId, onClose) {
     const closeModal = () => {
       container.remove();
       onClose?.();
@@ -32049,19 +32066,19 @@
     document.getElementById(`${modalId}-close`)?.addEventListener("click", closeModal);
     document.getElementById(`${modalId}-close-btn`)?.addEventListener("click", closeModal);
     const dateRangeInput = document.getElementById(`${modalId}-date-range`);
-    if (dateRangeInput && !state5.dateRangePicker) {
+    if (dateRangeInput && !state6.dateRangePicker) {
       try {
-        state5.dateRangePicker = await createDateRangePicker2(dateRangeInput, {
-          presetStart: new Date(state5.startTs).toISOString(),
-          presetEnd: new Date(state5.endTs).toISOString(),
+        state6.dateRangePicker = await createDateRangePicker2(dateRangeInput, {
+          presetStart: new Date(state6.startTs).toISOString(),
+          presetEnd: new Date(state6.endTs).toISOString(),
           includeTime: true,
           timePrecision: "minute",
           maxRangeDays: 90,
-          locale: state5.locale,
+          locale: state6.locale,
           parentEl: container.querySelector(".myio-temp-comparison-content"),
           onApply: (result) => {
-            state5.startTs = new Date(result.startISO).getTime();
-            state5.endTs = new Date(result.endISO).getTime();
+            state6.startTs = new Date(result.startISO).getTime();
+            state6.endTs = new Date(result.endISO).getTime();
             console.log("[TemperatureComparisonModal] Date range applied:", result);
           }
         });
@@ -32070,23 +32087,23 @@
       }
     }
     document.getElementById(`${modalId}-theme-toggle`)?.addEventListener("click", async () => {
-      state5.theme = state5.theme === "dark" ? "light" : "dark";
-      localStorage.setItem("myio-temp-comparison-theme", state5.theme);
-      state5.dateRangePicker = null;
-      renderModal2(container, state5, modalId);
-      if (state5.deviceData.some((dd) => dd.data.length > 0)) {
-        drawComparisonChart(modalId, state5);
-      }
-      await setupEventListeners2(container, state5, modalId, onClose);
+      state6.theme = state6.theme === "dark" ? "light" : "dark";
+      localStorage.setItem("myio-temp-comparison-theme", state6.theme);
+      state6.dateRangePicker = null;
+      renderModal2(container, state6, modalId);
+      if (state6.deviceData.some((dd) => dd.data.length > 0)) {
+        drawComparisonChart(modalId, state6);
+      }
+      await setupEventListeners2(container, state6, modalId, onClose);
     });
     document.getElementById(`${modalId}-maximize`)?.addEventListener("click", async () => {
       container.__isMaximized = !container.__isMaximized;
-      state5.dateRangePicker = null;
-      renderModal2(container, state5, modalId);
-      if (state5.deviceData.some((dd) => dd.data.length > 0)) {
-        drawComparisonChart(modalId, state5);
+      state6.dateRangePicker = null;
+      renderModal2(container, state6, modalId);
+      if (state6.deviceData.some((dd) => dd.data.length > 0)) {
+        drawComparisonChart(modalId, state6);
       }
-      await setupEventListeners2(container, state5, modalId, onClose);
+      await setupEventListeners2(container, state6, modalId, onClose);
     });
     const periodBtn = document.getElementById(`${modalId}-period-btn`);
     const periodDropdown = document.getElementById(`${modalId}-period-dropdown`);
@@ -32105,13 +32122,13 @@
     periodCheckboxes.forEach((checkbox) => {
       checkbox.addEventListener("change", () => {
         const checked = Array.from(periodCheckboxes).filter((cb) => cb.checked).map((cb) => cb.value);
-        state5.selectedPeriods = checked;
+        state6.selectedPeriods = checked;
         const btnLabel = periodBtn?.querySelector("span:first-child");
         if (btnLabel) {
-          btnLabel.textContent = getSelectedPeriodsLabel(state5.selectedPeriods);
+          btnLabel.textContent = getSelectedPeriodsLabel(state6.selectedPeriods);
         }
-        if (state5.deviceData.some((dd) => dd.data.length > 0)) {
-          drawComparisonChart(modalId, state5);
+        if (state6.deviceData.some((dd) => dd.data.length > 0)) {
+          drawComparisonChart(modalId, state6);
         }
       });
     });
@@ -32119,77 +32136,77 @@
       periodCheckboxes.forEach((cb) => {
         cb.checked = true;
       });
-      state5.selectedPeriods = ["madrugada", "manha", "tarde", "noite"];
+      state6.selectedPeriods = ["madrugada", "manha", "tarde", "noite"];
       const btnLabel = periodBtn?.querySelector("span:first-child");
       if (btnLabel) {
-        btnLabel.textContent = getSelectedPeriodsLabel(state5.selectedPeriods);
+        btnLabel.textContent = getSelectedPeriodsLabel(state6.selectedPeriods);
       }
-      if (state5.deviceData.some((dd) => dd.data.length > 0)) {
-        drawComparisonChart(modalId, state5);
+      if (state6.deviceData.some((dd) => dd.data.length > 0)) {
+        drawComparisonChart(modalId, state6);
       }
     });
     document.getElementById(`${modalId}-period-clear`)?.addEventListener("click", () => {
       periodCheckboxes.forEach((cb) => {
         cb.checked = false;
       });
-      state5.selectedPeriods = [];
+      state6.selectedPeriods = [];
       const btnLabel = periodBtn?.querySelector("span:first-child");
       if (btnLabel) {
-        btnLabel.textContent = getSelectedPeriodsLabel(state5.selectedPeriods);
+        btnLabel.textContent = getSelectedPeriodsLabel(state6.selectedPeriods);
       }
-      if (state5.deviceData.some((dd) => dd.data.length > 0)) {
-        drawComparisonChart(modalId, state5);
+      if (state6.deviceData.some((dd) => dd.data.length > 0)) {
+        drawComparisonChart(modalId, state6);
       }
     });
     document.getElementById(`${modalId}-granularity`)?.addEventListener("change", (e) => {
-      state5.granularity = e.target.value;
-      localStorage.setItem("myio-temp-comparison-granularity", state5.granularity);
-      if (state5.deviceData.some((dd) => dd.data.length > 0)) {
-        drawComparisonChart(modalId, state5);
+      state6.granularity = e.target.value;
+      localStorage.setItem("myio-temp-comparison-granularity", state6.granularity);
+      if (state6.deviceData.some((dd) => dd.data.length > 0)) {
+        drawComparisonChart(modalId, state6);
       }
     });
     document.getElementById(`${modalId}-query`)?.addEventListener("click", async () => {
-      if (state5.startTs >= state5.endTs) {
+      if (state6.startTs >= state6.endTs) {
         alert("Por favor, selecione um per\xEDodo v\xE1lido");
         return;
       }
-      state5.isLoading = true;
-      state5.dateRangePicker = null;
-      renderModal2(container, state5, modalId);
-      await fetchAllDevicesData(state5);
-      renderModal2(container, state5, modalId);
-      drawComparisonChart(modalId, state5);
-      await setupEventListeners2(container, state5, modalId, onClose);
+      state6.isLoading = true;
+      state6.dateRangePicker = null;
+      renderModal2(container, state6, modalId);
+      await fetchAllDevicesData(state6);
+      renderModal2(container, state6, modalId);
+      drawComparisonChart(modalId, state6);
+      await setupEventListeners2(container, state6, modalId, onClose);
     });
     document.getElementById(`${modalId}-export`)?.addEventListener("click", () => {
-      if (state5.deviceData.every((dd) => dd.data.length === 0)) return;
-      exportComparisonCSV(state5);
+      if (state6.deviceData.every((dd) => dd.data.length === 0)) return;
+      exportComparisonCSV(state6);
     });
   }
-  function exportComparisonCSV(state5) {
-    const startDateStr = new Date(state5.startTs).toLocaleDateString(state5.locale).replace(/\//g, "-");
-    const endDateStr = new Date(state5.endTs).toLocaleDateString(state5.locale).replace(/\//g, "-");
+  function exportComparisonCSV(state6) {
+    const startDateStr = new Date(state6.startTs).toLocaleDateString(state6.locale).replace(/\//g, "-");
+    const endDateStr = new Date(state6.endTs).toLocaleDateString(state6.locale).replace(/\//g, "-");
     const BOM = "\uFEFF";
     let csvContent = BOM;
     csvContent += `Compara\xE7\xE3o de Temperatura
 `;
     csvContent += `Per\xEDodo: ${startDateStr} at\xE9 ${endDateStr}
 `;
-    csvContent += `Sensores: ${state5.devices.map((d) => d.label).join(", ")}
+    csvContent += `Sensores: ${state6.devices.map((d) => d.label).join(", ")}
 `;
     csvContent += "\n";
     csvContent += "Estat\xEDsticas por Sensor:\n";
     csvContent += "Sensor,M\xE9dia (\xB0C),Min (\xB0C),Max (\xB0C),Leituras\n";
-    state5.deviceData.forEach((dd) => {
+    state6.deviceData.forEach((dd) => {
       csvContent += `"${dd.device.label}",${dd.stats.avg.toFixed(2)},${dd.stats.min.toFixed(2)},${dd.stats.max.toFixed(2)},${dd.stats.count}
 `;
     });
     csvContent += "\n";
     csvContent += "Dados Detalhados:\n";
     csvContent += "Data/Hora,Sensor,Temperatura (\xB0C)\n";
-    state5.deviceData.forEach((dd) => {
+    state6.deviceData.forEach((dd) => {
       dd.data.forEach((item) => {
-        const date = new Date(item.ts).toLocaleString(state5.locale);
+        const date = new Date(item.ts).toLocaleString(state6.locale);
         const temp = Number(item.value).toFixed(2);
         csvContent += `"${date}","${dd.device.label}",${temp}
 `;
@@ -32297,10 +32314,10 @@
       throw new Error(`Failed to save attributes: ${response.status}`);
     }
   }
-  function renderModal3(container, state5, modalId, onClose, onSave) {
-    const colors = getColors(state5.theme);
-    const minValue = state5.minTemperature !== null ? state5.minTemperature : "";
-    const maxValue = state5.maxTemperature !== null ? state5.maxTemperature : "";
+  function renderModal3(container, state6, modalId, onClose, onSave) {
+    const colors = getColors(state6.theme);
+    const minValue = state6.minTemperature !== null ? state6.minTemperature : "";
+    const maxValue = state6.maxTemperature !== null ? state6.maxTemperature : "";
     container.innerHTML = `
     <style>
       @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@@ -32565,23 +32582,23 @@
         </div>
 
         <div class="modal-body">
-          ${state5.isLoading ? `
+          ${state6.isLoading ? `
             <div class="loading-overlay">
               <div class="loading-spinner"></div>
               <div>Carregando configura\xE7\xF5es...</div>
             </div>
           ` : `
-            ${state5.error ? `
-              <div class="message message-error">${state5.error}</div>
+            ${state6.error ? `
+              <div class="message message-error">${state6.error}</div>
             ` : ""}
 
-            ${state5.successMessage ? `
-              <div class="message message-success">${state5.successMessage}</div>
+            ${state6.successMessage ? `
+              <div class="message message-success">${state6.successMessage}</div>
             ` : ""}
 
             <div class="customer-info">
               <div class="customer-label">Shopping / Cliente</div>
-              <div class="customer-name">${state5.customerName || "N\xE3o identificado"}</div>
+              <div class="customer-name">${state6.customerName || "N\xE3o identificado"}</div>
             </div>
 
             <div class="form-group">
@@ -32625,11 +32642,11 @@
           `}
         </div>
 
-        ${!state5.isLoading ? `
+        ${!state6.isLoading ? `
           <div class="modal-footer">
             <button class="btn btn-secondary" id="${modalId}-cancel">Cancelar</button>
-            <button class="btn btn-primary" id="${modalId}-save" ${state5.isSaving ? "disabled" : ""}>
-              ${state5.isSaving ? '<div class="spinner"></div> Salvando...' : "Salvar"}
+            <button class="btn btn-primary" id="${modalId}-save" ${state6.isSaving ? "disabled" : ""}>
+              ${state6.isSaving ? '<div class="spinner"></div> Salvando...' : "Salvar"}
             </button>
           </div>
         ` : ""}
@@ -32666,18 +32683,18 @@
       const min = parseFloat(minInput.value);
       const max = parseFloat(maxInput.value);
       if (isNaN(min) || isNaN(max)) {
-        state5.error = "Por favor, preencha ambos os valores.";
-        renderModal3(container, state5, modalId, onClose, onSave);
+        state6.error = "Por favor, preencha ambos os valores.";
+        renderModal3(container, state6, modalId, onClose, onSave);
         return;
       }
       if (min >= max) {
-        state5.error = "A temperatura m\xEDnima deve ser menor que a m\xE1xima.";
-        renderModal3(container, state5, modalId, onClose, onSave);
+        state6.error = "A temperatura m\xEDnima deve ser menor que a m\xE1xima.";
+        renderModal3(container, state6, modalId, onClose, onSave);
         return;
       }
       if (min < 0 || max > 50) {
-        state5.error = "Os valores devem estar entre 0\xB0C e 50\xB0C.";
-        renderModal3(container, state5, modalId, onClose, onSave);
+        state6.error = "Os valores devem estar entre 0\xB0C e 50\xB0C.";
+        renderModal3(container, state6, modalId, onClose, onSave);
         return;
       }
       await onSave(min, max);
@@ -32685,7 +32702,7 @@
   }
   function openTemperatureSettingsModal(params) {
     const modalId = `myio-temp-settings-${Date.now()}`;
-    const state5 = {
+    const state6 = {
       customerId: params.customerId,
       customerName: params.customerName || "",
       token: params.token,
@@ -32705,37 +32722,37 @@
       params.onClose?.();
     };
     const handleSave = async (min, max) => {
-      state5.isSaving = true;
-      state5.error = null;
-      state5.successMessage = null;
-      renderModal3(container, state5, modalId, destroy, handleSave);
+      state6.isSaving = true;
+      state6.error = null;
+      state6.successMessage = null;
+      renderModal3(container, state6, modalId, destroy, handleSave);
       try {
-        await saveCustomerAttributes(state5.customerId, state5.token, min, max, params.onError);
-        state5.minTemperature = min;
-        state5.maxTemperature = max;
-        state5.isSaving = false;
-        state5.successMessage = "Configura\xE7\xF5es salvas com sucesso!";
-        renderModal3(container, state5, modalId, destroy, handleSave);
+        await saveCustomerAttributes(state6.customerId, state6.token, min, max, params.onError);
+        state6.minTemperature = min;
+        state6.maxTemperature = max;
+        state6.isSaving = false;
+        state6.successMessage = "Configura\xE7\xF5es salvas com sucesso!";
+        renderModal3(container, state6, modalId, destroy, handleSave);
         params.onSave?.({ minTemperature: min, maxTemperature: max });
         setTimeout(() => {
           destroy();
         }, 1500);
       } catch (error) {
-        state5.isSaving = false;
-        state5.error = `Erro ao salvar: ${error.message}`;
-        renderModal3(container, state5, modalId, destroy, handleSave);
+        state6.isSaving = false;
+        state6.error = `Erro ao salvar: ${error.message}`;
+        renderModal3(container, state6, modalId, destroy, handleSave);
       }
     };
-    renderModal3(container, state5, modalId, destroy, handleSave);
-    fetchCustomerAttributes(state5.customerId, state5.token, params.onError).then(({ minTemperature, maxTemperature }) => {
-      state5.minTemperature = minTemperature;
-      state5.maxTemperature = maxTemperature;
-      state5.isLoading = false;
-      renderModal3(container, state5, modalId, destroy, handleSave);
+    renderModal3(container, state6, modalId, destroy, handleSave);
+    fetchCustomerAttributes(state6.customerId, state6.token, params.onError).then(({ minTemperature, maxTemperature }) => {
+      state6.minTemperature = minTemperature;
+      state6.maxTemperature = maxTemperature;
+      state6.isLoading = false;
+      renderModal3(container, state6, modalId, destroy, handleSave);
     }).catch((error) => {
-      state5.isLoading = false;
-      state5.error = `Erro ao carregar: ${error.message}`;
-      renderModal3(container, state5, modalId, destroy, handleSave);
+      state6.isLoading = false;
+      state6.error = `Erro ao carregar: ${error.message}`;
+      renderModal3(container, state6, modalId, destroy, handleSave);
     });
     return { destroy };
   }
@@ -34005,7 +34022,7 @@
      * RFC-0105 Enhancement: Now fetches device lists from MyIOOrchestratorData
      * to populate device lists for status popup display
      */
-    buildSummaryFromState(state5, receivedData, domain = "energy") {
+    buildSummaryFromState(state6, receivedData, domain = "energy") {
       const summary = {
         totalDevices: 0,
         totalConsumption: 0,
@@ -34028,22 +34045,22 @@
         },
         lastUpdated: (/* @__PURE__ */ new Date()).toISOString()
       };
-      if (!state5) return summary;
+      if (!state6) return summary;
       const entrada = {
         id: "entrada",
         name: "Entrada",
         icon: CATEGORY_ICONS.entrada,
-        deviceCount: state5.entrada?.devices?.length || (receivedData?.entrada_total?.device_count || 0),
-        consumption: state5.entrada?.total || 0,
+        deviceCount: state6.entrada?.devices?.length || (receivedData?.entrada_total?.device_count || 0),
+        consumption: state6.entrada?.total || 0,
         percentage: 100
       };
       const lojas = {
         id: "lojas",
         name: "Lojas",
         icon: CATEGORY_ICONS.lojas,
-        deviceCount: state5.consumidores?.lojas?.devices?.length || (receivedData?.lojas_total?.device_count || 0),
-        consumption: state5.consumidores?.lojas?.total || 0,
-        percentage: state5.consumidores?.lojas?.perc || 0
+        deviceCount: state6.consumidores?.lojas?.devices?.length || (receivedData?.lojas_total?.device_count || 0),
+        consumption: state6.consumidores?.lojas?.total || 0,
+        percentage: state6.consumidores?.lojas?.perc || 0
       };
       const climatizacaoData = receivedData?.climatizacao || {};
       const elevadoresData = receivedData?.elevadores || {};
@@ -34054,9 +34071,9 @@
         id: "climatizacao",
         name: "Climatizacao",
         icon: CATEGORY_ICONS.climatizacao,
-        deviceCount: climatizacaoData.count || state5.consumidores?.climatizacao?.devices?.length || 0,
-        consumption: state5.consumidores?.climatizacao?.total || 0,
-        percentage: state5.consumidores?.climatizacao?.perc || 0
+        deviceCount: climatizacaoData.count || state6.consumidores?.climatizacao?.devices?.length || 0,
+        consumption: state6.consumidores?.climatizacao?.total || 0,
+        percentage: state6.consumidores?.climatizacao?.perc || 0
       };
       if (climatizacaoData.subcategories) {
         climatizacao.children = [];
@@ -34107,40 +34124,40 @@
         id: "elevadores",
         name: "Elevadores",
         icon: CATEGORY_ICONS.elevadores,
-        deviceCount: elevadoresData.count || state5.consumidores?.elevadores?.devices?.length || 0,
-        consumption: state5.consumidores?.elevadores?.total || 0,
-        percentage: state5.consumidores?.elevadores?.perc || 0
+        deviceCount: elevadoresData.count || state6.consumidores?.elevadores?.devices?.length || 0,
+        consumption: state6.consumidores?.elevadores?.total || 0,
+        percentage: state6.consumidores?.elevadores?.perc || 0
       });
       areaComumChildren.push({
         id: "escadasRolantes",
         name: "Esc. Rolantes",
         icon: CATEGORY_ICONS.escadas,
-        deviceCount: escadasData.count || state5.consumidores?.escadasRolantes?.devices?.length || 0,
-        consumption: state5.consumidores?.escadasRolantes?.total || 0,
-        percentage: state5.consumidores?.escadasRolantes?.perc || 0
+        deviceCount: escadasData.count || state6.consumidores?.escadasRolantes?.devices?.length || 0,
+        consumption: state6.consumidores?.escadasRolantes?.total || 0,
+        percentage: state6.consumidores?.escadasRolantes?.perc || 0
       });
       areaComumChildren.push({
         id: "outros",
         name: "Outros",
         icon: CATEGORY_ICONS.outros,
-        deviceCount: outrosData.count || state5.consumidores?.outros?.devices?.length || 0,
-        consumption: state5.consumidores?.outros?.total || 0,
-        percentage: state5.consumidores?.outros?.perc || 0
+        deviceCount: outrosData.count || state6.consumidores?.outros?.devices?.length || 0,
+        consumption: state6.consumidores?.outros?.total || 0,
+        percentage: state6.consumidores?.outros?.perc || 0
       });
       const areaComumDeviceCount = areaComumChildren.reduce((sum, c) => sum + c.deviceCount, 0);
-      const areaComumConsumption = state5.consumidores?.areaComum?.total || areaComumChildren.reduce((sum, c) => sum + c.consumption, 0);
+      const areaComumConsumption = state6.consumidores?.areaComum?.total || areaComumChildren.reduce((sum, c) => sum + c.consumption, 0);
       const areaComum = {
         id: "areaComum",
         name: "Area Comum",
         icon: CATEGORY_ICONS.areaComum,
         deviceCount: areaComumDeviceCount,
         consumption: areaComumConsumption,
-        percentage: state5.consumidores?.areaComum?.perc || 0,
+        percentage: state6.consumidores?.areaComum?.perc || 0,
         children: areaComumChildren
       };
       summary.byCategory = [entrada, lojas, areaComum];
       summary.totalDevices = entrada.deviceCount + lojas.deviceCount + areaComumDeviceCount;
-      summary.totalConsumption = state5.grandTotal || entrada.consumption;
+      summary.totalConsumption = state6.grandTotal || entrada.consumption;
       const widgetAggregation = receivedData?.deviceStatusAggregation;
       if (widgetAggregation && widgetAggregation.hasData) {
         summary.byStatus = {
@@ -35428,7 +35445,7 @@
      * RFC-0105 Enhancement: Now fetches device lists from MyIOOrchestratorData
      * to populate device lists for status popup display
      */
-    buildSummaryFromState(state5, receivedData, includeBathrooms = false, domain = "water") {
+    buildSummaryFromState(state6, receivedData, includeBathrooms = false, domain = "water") {
       const summary = {
         totalDevices: 0,
         totalConsumption: 0,
@@ -35452,22 +35469,22 @@
         lastUpdated: (/* @__PURE__ */ new Date()).toISOString(),
         includeBathrooms
       };
-      if (!state5) return summary;
+      if (!state6) return summary;
       const entrada = {
         id: "entrada",
         name: "Entrada",
         icon: WATER_CATEGORY_ICONS.entrada,
-        deviceCount: state5.entrada?.devices?.length || (receivedData?.entrada_total?.device_count || 0),
-        consumption: state5.entrada?.total || 0,
+        deviceCount: state6.entrada?.devices?.length || (receivedData?.entrada_total?.device_count || 0),
+        consumption: state6.entrada?.total || 0,
         percentage: 100
       };
       const lojas = {
         id: "lojas",
         name: "Lojas",
         icon: WATER_CATEGORY_ICONS.lojas,
-        deviceCount: state5.lojas?.devices?.length || (receivedData?.lojas_total?.device_count || 0),
-        consumption: state5.lojas?.total || 0,
-        percentage: state5.lojas?.perc || 0
+        deviceCount: state6.lojas?.devices?.length || (receivedData?.lojas_total?.device_count || 0),
+        consumption: state6.lojas?.total || 0,
+        percentage: state6.lojas?.perc || 0
       };
       summary.byCategory = [entrada, lojas];
       if (includeBathrooms) {
@@ -35475,9 +35492,9 @@
           id: "banheiros",
           name: "Banheiros",
           icon: WATER_CATEGORY_ICONS.banheiros,
-          deviceCount: state5.banheiros?.devices?.length || (receivedData?.banheiros_total?.device_count || 0),
-          consumption: state5.banheiros?.total || 0,
-          percentage: state5.banheiros?.perc || 0
+          deviceCount: state6.banheiros?.devices?.length || (receivedData?.banheiros_total?.device_count || 0),
+          consumption: state6.banheiros?.total || 0,
+          percentage: state6.banheiros?.perc || 0
         };
         summary.byCategory.push(banheiros);
       }
@@ -35485,24 +35502,24 @@
         id: "areaComum",
         name: "\xC1rea Comum",
         icon: WATER_CATEGORY_ICONS.areaComum,
-        deviceCount: state5.areaComum?.devices?.length || (receivedData?.area_comum_total?.device_count || 0),
-        consumption: state5.areaComum?.total || 0,
-        percentage: state5.areaComum?.perc || 0
+        deviceCount: state6.areaComum?.devices?.length || (receivedData?.area_comum_total?.device_count || 0),
+        consumption: state6.areaComum?.total || 0,
+        percentage: state6.areaComum?.perc || 0
       };
       summary.byCategory.push(areaComum);
-      if (state5.pontosNaoMapeados && state5.pontosNaoMapeados.total > 0) {
+      if (state6.pontosNaoMapeados && state6.pontosNaoMapeados.total > 0) {
         const pontosNaoMapeados = {
           id: "pontosNaoMapeados",
           name: "Pontos N\xE3o Mapeados",
           icon: WATER_CATEGORY_ICONS.pontosNaoMapeados,
-          deviceCount: state5.pontosNaoMapeados?.devices?.length || 0,
-          consumption: state5.pontosNaoMapeados?.total || 0,
-          percentage: state5.pontosNaoMapeados?.perc || 0
+          deviceCount: state6.pontosNaoMapeados?.devices?.length || 0,
+          consumption: state6.pontosNaoMapeados?.total || 0,
+          percentage: state6.pontosNaoMapeados?.perc || 0
         };
         summary.byCategory.push(pontosNaoMapeados);
       }
       summary.totalDevices = summary.byCategory.reduce((sum, cat) => sum + cat.deviceCount, 0);
-      summary.totalConsumption = state5.entrada?.total || 0;
+      summary.totalConsumption = state6.entrada?.total || 0;
       const widgetAggregation = receivedData?.deviceStatusAggregation;
       if (widgetAggregation && widgetAggregation.hasData) {
         summary.byStatus = {
@@ -37039,6 +37056,996 @@
     }
   };
 
+  // src/utils/ContractSummaryTooltip.ts
+  var CONTRACT_SUMMARY_TOOLTIP_CSS = `
+/* ============================================
+   Contract Summary Tooltip (RFC-0107)
+   Premium draggable tooltip with dark theme
+   ============================================ */
+
+.myio-contract-summary-tooltip {
+  position: fixed;
+  z-index: 99999;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.25s ease, transform 0.25s ease;
+  transform: translateY(5px);
+}
+
+.myio-contract-summary-tooltip.visible {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+.myio-contract-summary-tooltip.closing {
+  opacity: 0;
+  transform: translateY(8px);
+  transition: opacity 0.4s ease, transform 0.4s ease;
+}
+
+.myio-contract-summary-tooltip.pinned {
+  box-shadow: 0 0 0 2px #9684B5, 0 10px 40px rgba(0, 0, 0, 0.3);
+  border-radius: 16px;
+}
+
+.myio-contract-summary-tooltip.dragging {
+  transition: none !important;
+  cursor: move;
+}
+
+.myio-contract-summary-tooltip.maximized {
+  top: 20px !important;
+  left: 20px !important;
+  right: 20px !important;
+  bottom: 20px !important;
+  width: auto !important;
+  max-width: none !important;
+}
+
+.myio-contract-summary-tooltip.maximized .myio-contract-summary-tooltip__panel {
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  display: flex;
+  flex-direction: column;
+}
+
+.myio-contract-summary-tooltip.maximized .myio-contract-summary-tooltip__body {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.myio-contract-summary-tooltip__panel {
+  background: #2d1458;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 16px;
+  box-shadow:
+    0 20px 60px rgba(0, 0, 0, 0.4),
+    0 8px 20px rgba(0, 0, 0, 0.25),
+    0 0 0 1px rgba(255, 255, 255, 0.05);
+  min-width: 320px;
+  max-width: 380px;
+  font-family: Inter, system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  color: #ffffff;
+  overflow: hidden;
+}
+
+/* Header */
+.myio-contract-summary-tooltip__header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 16px;
+  background: linear-gradient(135deg, #9684B5 0%, #2d1458 100%);
+  border-radius: 16px 16px 0 0;
+  position: relative;
+  overflow: hidden;
+  cursor: move;
+  user-select: none;
+}
+
+.myio-contract-summary-tooltip__header::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+  opacity: 0.3;
+}
+
+.myio-contract-summary-tooltip__icon {
+  width: 40px;
+  height: 40px;
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  backdrop-filter: blur(10px);
+  position: relative;
+  z-index: 1;
+}
+
+.myio-contract-summary-tooltip__icon.valid {
+  background: rgba(76, 175, 80, 0.3);
+}
+
+.myio-contract-summary-tooltip__icon.invalid {
+  background: rgba(244, 67, 54, 0.3);
+}
+
+.myio-contract-summary-tooltip__header-info {
+  flex: 1;
+  position: relative;
+  z-index: 1;
+}
+
+.myio-contract-summary-tooltip__title {
+  font-weight: 700;
+  font-size: 15px;
+  color: #ffffff;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  margin-bottom: 2px;
+}
+
+.myio-contract-summary-tooltip__subtitle {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.myio-contract-summary-tooltip__header-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  position: relative;
+  z-index: 1;
+}
+
+.myio-contract-summary-tooltip__header-btn {
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.myio-contract-summary-tooltip__header-btn:hover {
+  background: rgba(255, 255, 255, 0.25);
+  color: #ffffff;
+  transform: scale(1.05);
+}
+
+.myio-contract-summary-tooltip__header-btn.pinned {
+  background: rgba(255, 255, 255, 0.9);
+  color: #9684B5;
+}
+
+.myio-contract-summary-tooltip__header-btn.pinned:hover {
+  background: #ffffff;
+  color: #2d1458;
+}
+
+.myio-contract-summary-tooltip__header-btn svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* Body */
+.myio-contract-summary-tooltip__body {
+  padding: 16px;
+}
+
+/* Domain Section */
+.myio-contract-summary-tooltip__domain {
+  margin-bottom: 14px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.myio-contract-summary-tooltip__domain:last-child {
+  margin-bottom: 0;
+}
+
+.myio-contract-summary-tooltip__domain-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+.myio-contract-summary-tooltip__domain-header:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.myio-contract-summary-tooltip__domain-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.myio-contract-summary-tooltip__domain-icon {
+  font-size: 18px;
+}
+
+.myio-contract-summary-tooltip__domain-name {
+  font-weight: 600;
+  font-size: 13px;
+}
+
+.myio-contract-summary-tooltip__domain-count {
+  font-size: 12px;
+  color: #81c784;
+  font-weight: 600;
+}
+
+.myio-contract-summary-tooltip__expand-icon {
+  font-size: 10px;
+  opacity: 0.6;
+  transition: transform 0.3s ease;
+}
+
+.myio-contract-summary-tooltip__domain.expanded .myio-contract-summary-tooltip__expand-icon {
+  transform: rotate(180deg);
+}
+
+/* Domain Details */
+.myio-contract-summary-tooltip__domain-details {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease;
+  background: rgba(0, 0, 0, 0.15);
+}
+
+.myio-contract-summary-tooltip__domain.expanded .myio-contract-summary-tooltip__domain-details {
+  max-height: 150px;
+}
+
+.myio-contract-summary-tooltip__detail-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 14px 6px 40px;
+  font-size: 12px;
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.myio-contract-summary-tooltip__detail-row:first-child {
+  border-top: none;
+}
+
+.myio-contract-summary-tooltip__detail-label {
+  opacity: 0.7;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.myio-contract-summary-tooltip__detail-label::before {
+  content: '';
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0.5;
+}
+
+.myio-contract-summary-tooltip__detail-count {
+  font-weight: 500;
+  color: #81c784;
+}
+
+/* Status Banner */
+.myio-contract-summary-tooltip__status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 10px 14px;
+  border-radius: 10px;
+  margin-bottom: 14px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.myio-contract-summary-tooltip__status.valid {
+  background: rgba(76, 175, 80, 0.2);
+  color: #81c784;
+  border: 1px solid rgba(76, 175, 80, 0.3);
+}
+
+.myio-contract-summary-tooltip__status.invalid {
+  background: rgba(244, 67, 54, 0.2);
+  color: #ef5350;
+  border: 1px solid rgba(244, 67, 54, 0.3);
+}
+
+.myio-contract-summary-tooltip__status-icon {
+  font-size: 14px;
+}
+
+/* Discrepancies */
+.myio-contract-summary-tooltip__discrepancies {
+  background: rgba(244, 67, 54, 0.15);
+  border: 1px solid rgba(244, 67, 54, 0.3);
+  border-radius: 10px;
+  padding: 10px 14px;
+  margin-bottom: 14px;
+}
+
+.myio-contract-summary-tooltip__discrepancies-title {
+  font-size: 11px;
+  font-weight: 600;
+  color: #ef5350;
+  margin-bottom: 6px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.myio-contract-summary-tooltip__discrepancy-item {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.8);
+  padding: 3px 0;
+}
+
+/* Footer */
+.myio-contract-summary-tooltip__footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  background: rgba(0, 0, 0, 0.2);
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: 0 0 16px 16px;
+}
+
+.myio-contract-summary-tooltip__footer-label {
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.myio-contract-summary-tooltip__footer-value {
+  font-size: 11px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+/* Total Devices Badge */
+.myio-contract-summary-tooltip__total {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px;
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 10px;
+  margin-bottom: 14px;
+}
+
+.myio-contract-summary-tooltip__total-label {
+  font-size: 12px;
+  opacity: 0.8;
+}
+
+.myio-contract-summary-tooltip__total-value {
+  font-size: 18px;
+  font-weight: 700;
+  color: #81c784;
+}
+
+/* Responsive */
+@media (max-width: 400px) {
+  .myio-contract-summary-tooltip__panel {
+    min-width: 280px;
+    max-width: 95vw;
+  }
+}
+`;
+  var cssInjected9 = false;
+  function injectCSS9() {
+    if (cssInjected9) return;
+    if (typeof document === "undefined") return;
+    const styleId = "myio-contract-summary-tooltip-styles";
+    if (document.getElementById(styleId)) {
+      cssInjected9 = true;
+      return;
+    }
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = CONTRACT_SUMMARY_TOOLTIP_CSS;
+    document.head.appendChild(style);
+    cssInjected9 = true;
+  }
+  var state5 = {
+    hideTimer: null,
+    isMouseOverTooltip: false,
+    isMaximized: false,
+    isDragging: false,
+    dragOffset: { x: 0, y: 0 },
+    savedPosition: null,
+    pinnedCounter: 0,
+    expandedDomains: /* @__PURE__ */ new Set(["energy", "water", "temperature"])
+  };
+  function formatTimestamp5(isoString) {
+    if (!isoString) return "Agora";
+    try {
+      const date = new Date(isoString);
+      return date.toLocaleString("pt-BR", {
+        hour: "2-digit",
+        minute: "2-digit",
+        day: "2-digit",
+        month: "2-digit"
+      });
+    } catch {
+      return "Agora";
+    }
+  }
+  function calculateTotalDevices(data) {
+    return data.energy.total + data.water.total + data.temperature.total;
+  }
+  function generateHeaderHTML5(data) {
+    const iconClass = data.isValid ? "valid" : "invalid";
+    const iconSymbol = data.isValid ? "\u2713" : "!";
+    const totalDevices = calculateTotalDevices(data);
+    return `
+    <div class="myio-contract-summary-tooltip__header" data-drag-handle>
+      <div class="myio-contract-summary-tooltip__icon ${iconClass}">${iconSymbol}</div>
+      <div class="myio-contract-summary-tooltip__header-info">
+        <div class="myio-contract-summary-tooltip__title">Contract Summary</div>
+        <div class="myio-contract-summary-tooltip__subtitle">${totalDevices} devices loaded</div>
+      </div>
+      <div class="myio-contract-summary-tooltip__header-actions">
+        <button class="myio-contract-summary-tooltip__header-btn" data-action="pin" title="Pin to screen">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M9 4v6l-2 4v2h10v-2l-2-4V4"/>
+            <line x1="12" y1="16" x2="12" y2="21"/>
+            <line x1="8" y1="4" x2="16" y2="4"/>
+          </svg>
+        </button>
+        <button class="myio-contract-summary-tooltip__header-btn" data-action="maximize" title="Maximize">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <rect x="3" y="3" width="18" height="18" rx="2"/>
+          </svg>
+        </button>
+        <button class="myio-contract-summary-tooltip__header-btn" data-action="close" title="Close">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M18 6L6 18M6 6l12 12"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+  `;
+  }
+  function generateDomainHTML(domain, icon, name, counts, isTemperature = false) {
+    const isExpanded = state5.expandedDomains.has(domain);
+    const expandedClass = isExpanded ? "expanded" : "";
+    let detailsHTML = "";
+    if (isTemperature) {
+      const tempCounts = counts;
+      detailsHTML = `
+      <div class="myio-contract-summary-tooltip__detail-row">
+        <span class="myio-contract-summary-tooltip__detail-label">Internal (Climate)</span>
+        <span class="myio-contract-summary-tooltip__detail-count">${tempCounts.internal}</span>
+      </div>
+      <div class="myio-contract-summary-tooltip__detail-row">
+        <span class="myio-contract-summary-tooltip__detail-label">Stores (Non-Climate)</span>
+        <span class="myio-contract-summary-tooltip__detail-count">${tempCounts.stores}</span>
+      </div>
+    `;
+    } else {
+      const domainCounts = counts;
+      detailsHTML = `
+      <div class="myio-contract-summary-tooltip__detail-row">
+        <span class="myio-contract-summary-tooltip__detail-label">Entries</span>
+        <span class="myio-contract-summary-tooltip__detail-count">${domainCounts.entries}</span>
+      </div>
+      <div class="myio-contract-summary-tooltip__detail-row">
+        <span class="myio-contract-summary-tooltip__detail-label">Common Area</span>
+        <span class="myio-contract-summary-tooltip__detail-count">${domainCounts.commonArea}</span>
+      </div>
+      <div class="myio-contract-summary-tooltip__detail-row">
+        <span class="myio-contract-summary-tooltip__detail-label">Stores</span>
+        <span class="myio-contract-summary-tooltip__detail-count">${domainCounts.stores}</span>
+      </div>
+    `;
+    }
+    return `
+    <div class="myio-contract-summary-tooltip__domain ${expandedClass}" data-domain="${domain}">
+      <div class="myio-contract-summary-tooltip__domain-header" data-toggle-domain="${domain}">
+        <div class="myio-contract-summary-tooltip__domain-info">
+          <span class="myio-contract-summary-tooltip__domain-icon">${icon}</span>
+          <span class="myio-contract-summary-tooltip__domain-name">${name}</span>
+        </div>
+        <div style="display: flex; align-items: center; gap: 8px;">
+          <span class="myio-contract-summary-tooltip__domain-count">${counts.total} devices</span>
+          <span class="myio-contract-summary-tooltip__expand-icon">\u25BC</span>
+        </div>
+      </div>
+      <div class="myio-contract-summary-tooltip__domain-details">
+        ${detailsHTML}
+      </div>
+    </div>
+  `;
+  }
+  function generateBodyHTML3(data) {
+    const totalDevices = calculateTotalDevices(data);
+    const timestamp = formatTimestamp5(data.timestamp);
+    const statusClass = data.isValid ? "valid" : "invalid";
+    const statusIcon = data.isValid ? "\u2713" : "\u26A0";
+    const statusText = data.isValid ? "Contract validated successfully" : "Validation issues detected";
+    let discrepanciesHTML = "";
+    if (data.discrepancies && data.discrepancies.length > 0) {
+      const items = data.discrepancies.map((d) => `<div class="myio-contract-summary-tooltip__discrepancy-item">${d.domain}: expected ${d.expected}, found ${d.actual}</div>`).join("");
+      discrepanciesHTML = `
+      <div class="myio-contract-summary-tooltip__discrepancies">
+        <div class="myio-contract-summary-tooltip__discrepancies-title">Discrepancies</div>
+        ${items}
+      </div>
+    `;
+    }
+    return `
+    <div class="myio-contract-summary-tooltip__body">
+      <!-- Status Banner -->
+      <div class="myio-contract-summary-tooltip__status ${statusClass}">
+        <span class="myio-contract-summary-tooltip__status-icon">${statusIcon}</span>
+        <span>${statusText}</span>
+      </div>
+
+      ${discrepanciesHTML}
+
+      <!-- Total Devices -->
+      <div class="myio-contract-summary-tooltip__total">
+        <span class="myio-contract-summary-tooltip__total-label">Total Devices:</span>
+        <span class="myio-contract-summary-tooltip__total-value">${totalDevices}</span>
+      </div>
+
+      <!-- Energy -->
+      ${generateDomainHTML("energy", "\u26A1", "Energy", data.energy)}
+
+      <!-- Water -->
+      ${generateDomainHTML("water", "\u{1F4A7}", "Water", data.water)}
+
+      <!-- Temperature -->
+      ${generateDomainHTML("temperature", "\u{1F321}\uFE0F", "Temperature", data.temperature, true)}
+    </div>
+
+    <!-- Footer -->
+    <div class="myio-contract-summary-tooltip__footer">
+      <span class="myio-contract-summary-tooltip__footer-label">Loaded at</span>
+      <span class="myio-contract-summary-tooltip__footer-value">${timestamp}</span>
+    </div>
+  `;
+  }
+  function setupHoverListeners5(container) {
+    container.onmouseenter = () => {
+      state5.isMouseOverTooltip = true;
+      if (state5.hideTimer) {
+        clearTimeout(state5.hideTimer);
+        state5.hideTimer = null;
+      }
+    };
+    container.onmouseleave = () => {
+      state5.isMouseOverTooltip = false;
+      startDelayedHide5();
+    };
+  }
+  function setupDomainToggleListeners(container) {
+    const toggles = container.querySelectorAll("[data-toggle-domain]");
+    toggles.forEach((toggle) => {
+      toggle.onclick = (e) => {
+        e.stopPropagation();
+        const domain = toggle.dataset.toggleDomain;
+        if (!domain) return;
+        const domainEl = container.querySelector(`[data-domain="${domain}"]`);
+        if (!domainEl) return;
+        if (state5.expandedDomains.has(domain)) {
+          state5.expandedDomains.delete(domain);
+          domainEl.classList.remove("expanded");
+        } else {
+          state5.expandedDomains.add(domain);
+          domainEl.classList.add("expanded");
+        }
+      };
+    });
+  }
+  function setupButtonListeners5(container) {
+    const buttons = container.querySelectorAll("[data-action]");
+    buttons.forEach((btn) => {
+      btn.onclick = (e) => {
+        e.stopPropagation();
+        const action = btn.dataset.action;
+        switch (action) {
+          case "pin":
+            createPinnedClone5(container);
+            break;
+          case "maximize":
+            toggleMaximize5(container);
+            break;
+          case "close":
+            ContractSummaryTooltip.close();
+            break;
+        }
+      };
+    });
+  }
+  function setupDragListeners5(container) {
+    const header = container.querySelector("[data-drag-handle]");
+    if (!header) return;
+    header.onmousedown = (e) => {
+      if (e.target.closest("[data-action]")) return;
+      if (e.target.closest("[data-toggle-domain]")) return;
+      if (state5.isMaximized) return;
+      state5.isDragging = true;
+      container.classList.add("dragging");
+      const rect = container.getBoundingClientRect();
+      state5.dragOffset = {
+        x: e.clientX - rect.left,
+        y: e.clientY - rect.top
+      };
+      const onMouseMove = (e2) => {
+        if (!state5.isDragging) return;
+        const newLeft = e2.clientX - state5.dragOffset.x;
+        const newTop = e2.clientY - state5.dragOffset.y;
+        const maxLeft = window.innerWidth - container.offsetWidth;
+        const maxTop = window.innerHeight - container.offsetHeight;
+        container.style.left = Math.max(0, Math.min(newLeft, maxLeft)) + "px";
+        container.style.top = Math.max(0, Math.min(newTop, maxTop)) + "px";
+      };
+      const onMouseUp = () => {
+        state5.isDragging = false;
+        container.classList.remove("dragging");
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+      };
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+    };
+  }
+  function createPinnedClone5(container) {
+    state5.pinnedCounter++;
+    const pinnedId = `myio-contract-summary-tooltip-pinned-${state5.pinnedCounter}`;
+    const clone = container.cloneNode(true);
+    clone.id = pinnedId;
+    clone.classList.add("pinned");
+    clone.classList.remove("closing");
+    const pinBtn = clone.querySelector('[data-action="pin"]');
+    if (pinBtn) {
+      pinBtn.classList.add("pinned");
+      pinBtn.setAttribute("title", "Unpin");
+      pinBtn.innerHTML = `
+      <svg viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1">
+        <path d="M9 4v6l-2 4v2h10v-2l-2-4V4"/>
+        <line x1="12" y1="16" x2="12" y2="21"/>
+        <line x1="8" y1="4" x2="16" y2="4"/>
+      </svg>
+    `;
+    }
+    document.body.appendChild(clone);
+    setupPinnedCloneListeners5(clone, pinnedId);
+    ContractSummaryTooltip.hide();
+  }
+  function setupPinnedCloneListeners5(clone, cloneId) {
+    let isMaximized = false;
+    let savedPosition = null;
+    const cloneExpandedDomains = new Set(state5.expandedDomains);
+    const toggles = clone.querySelectorAll("[data-toggle-domain]");
+    toggles.forEach((toggle) => {
+      toggle.onclick = (e) => {
+        e.stopPropagation();
+        const domain = toggle.dataset.toggleDomain;
+        if (!domain) return;
+        const domainEl = clone.querySelector(`[data-domain="${domain}"]`);
+        if (!domainEl) return;
+        if (cloneExpandedDomains.has(domain)) {
+          cloneExpandedDomains.delete(domain);
+          domainEl.classList.remove("expanded");
+        } else {
+          cloneExpandedDomains.add(domain);
+          domainEl.classList.add("expanded");
+        }
+      };
+    });
+    const pinBtn = clone.querySelector('[data-action="pin"]');
+    if (pinBtn) {
+      pinBtn.onclick = (e) => {
+        e.stopPropagation();
+        closePinnedClone5(cloneId);
+      };
+    }
+    const closeBtn = clone.querySelector('[data-action="close"]');
+    if (closeBtn) {
+      closeBtn.onclick = (e) => {
+        e.stopPropagation();
+        closePinnedClone5(cloneId);
+      };
+    }
+    const maxBtn = clone.querySelector('[data-action="maximize"]');
+    if (maxBtn) {
+      maxBtn.onclick = (e) => {
+        e.stopPropagation();
+        isMaximized = !isMaximized;
+        if (isMaximized) {
+          savedPosition = { left: clone.style.left, top: clone.style.top };
+          maxBtn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="5" width="14" height="14" rx="2"/><path d="M9 5V3h12v12h-2"/></svg>`;
+          maxBtn.setAttribute("title", "Restore");
+        } else {
+          maxBtn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/></svg>`;
+          maxBtn.setAttribute("title", "Maximize");
+          if (savedPosition) {
+            clone.style.left = savedPosition.left;
+            clone.style.top = savedPosition.top;
+          }
+        }
+        clone.classList.toggle("maximized", isMaximized);
+      };
+    }
+    const header = clone.querySelector("[data-drag-handle]");
+    if (header) {
+      let isDragging = false;
+      let dragOffset = { x: 0, y: 0 };
+      header.onmousedown = (e) => {
+        if (e.target.closest("[data-action]")) return;
+        if (e.target.closest("[data-toggle-domain]")) return;
+        if (isMaximized) return;
+        isDragging = true;
+        clone.classList.add("dragging");
+        const rect = clone.getBoundingClientRect();
+        dragOffset = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+        const onMouseMove = (e2) => {
+          if (!isDragging) return;
+          const newLeft = e2.clientX - dragOffset.x;
+          const newTop = e2.clientY - dragOffset.y;
+          const maxLeft = window.innerWidth - clone.offsetWidth;
+          const maxTop = window.innerHeight - clone.offsetHeight;
+          clone.style.left = Math.max(0, Math.min(newLeft, maxLeft)) + "px";
+          clone.style.top = Math.max(0, Math.min(newTop, maxTop)) + "px";
+        };
+        const onMouseUp = () => {
+          isDragging = false;
+          clone.classList.remove("dragging");
+          document.removeEventListener("mousemove", onMouseMove);
+          document.removeEventListener("mouseup", onMouseUp);
+        };
+        document.addEventListener("mousemove", onMouseMove);
+        document.addEventListener("mouseup", onMouseUp);
+      };
+    }
+  }
+  function closePinnedClone5(cloneId) {
+    const clone = document.getElementById(cloneId);
+    if (clone) {
+      clone.classList.add("closing");
+      setTimeout(() => clone.remove(), 400);
+    }
+  }
+  function toggleMaximize5(container) {
+    state5.isMaximized = !state5.isMaximized;
+    if (state5.isMaximized) {
+      state5.savedPosition = {
+        left: container.style.left,
+        top: container.style.top
+      };
+    }
+    container.classList.toggle("maximized", state5.isMaximized);
+    const maxBtn = container.querySelector('[data-action="maximize"]');
+    if (maxBtn) {
+      if (state5.isMaximized) {
+        maxBtn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="5" width="14" height="14" rx="2"/><path d="M9 5V3h12v12h-2"/></svg>`;
+        maxBtn.setAttribute("title", "Restore");
+      } else {
+        maxBtn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/></svg>`;
+        maxBtn.setAttribute("title", "Maximize");
+        if (state5.savedPosition) {
+          container.style.left = state5.savedPosition.left;
+          container.style.top = state5.savedPosition.top;
+        }
+      }
+    }
+  }
+  function startDelayedHide5() {
+    if (state5.isMouseOverTooltip) return;
+    if (state5.hideTimer) {
+      clearTimeout(state5.hideTimer);
+    }
+    state5.hideTimer = setTimeout(() => {
+      hideWithAnimation5();
+    }, 1500);
+  }
+  function hideWithAnimation5() {
+    const container = document.getElementById("myio-contract-summary-tooltip");
+    if (container && container.classList.contains("visible")) {
+      container.classList.add("closing");
+      setTimeout(() => {
+        container.classList.remove("visible", "closing");
+      }, 400);
+    }
+  }
+  function positionTooltip5(container, triggerElement) {
+    const rect = triggerElement.getBoundingClientRect();
+    let left = rect.left;
+    let top = rect.bottom + 8;
+    const tooltipWidth = 360;
+    if (left + tooltipWidth > window.innerWidth - 20) {
+      left = window.innerWidth - tooltipWidth - 20;
+    }
+    if (left < 10) left = 10;
+    if (top + 500 > window.innerHeight) {
+      top = rect.top - 8 - 500;
+      if (top < 10) top = 10;
+    }
+    container.style.left = left + "px";
+    container.style.top = top + "px";
+  }
+  var ContractSummaryTooltip = {
+    containerId: "myio-contract-summary-tooltip",
+    /**
+     * Get or create container
+     */
+    getContainer() {
+      injectCSS9();
+      let container = document.getElementById(this.containerId);
+      if (!container) {
+        container = document.createElement("div");
+        container.id = this.containerId;
+        container.className = "myio-contract-summary-tooltip";
+        document.body.appendChild(container);
+      }
+      return container;
+    },
+    /**
+     * Show tooltip
+     */
+    show(triggerElement, data) {
+      if (state5.hideTimer) {
+        clearTimeout(state5.hideTimer);
+        state5.hideTimer = null;
+      }
+      const container = this.getContainer();
+      container.classList.remove("closing");
+      container.innerHTML = `
+      <div class="myio-contract-summary-tooltip__panel">
+        ${generateHeaderHTML5(data)}
+        ${generateBodyHTML3(data)}
+      </div>
+    `;
+      positionTooltip5(container, triggerElement);
+      container.classList.add("visible");
+      setupHoverListeners5(container);
+      setupButtonListeners5(container);
+      setupDragListeners5(container);
+      setupDomainToggleListeners(container);
+    },
+    /**
+     * Start delayed hide
+     */
+    startDelayedHide() {
+      startDelayedHide5();
+    },
+    /**
+     * Hide immediately
+     */
+    hide() {
+      if (state5.hideTimer) {
+        clearTimeout(state5.hideTimer);
+        state5.hideTimer = null;
+      }
+      state5.isMouseOverTooltip = false;
+      const container = document.getElementById(this.containerId);
+      if (container) {
+        container.classList.remove("visible", "closing");
+      }
+    },
+    /**
+     * Close and reset all states
+     */
+    close() {
+      state5.isMaximized = false;
+      state5.isDragging = false;
+      state5.savedPosition = null;
+      if (state5.hideTimer) {
+        clearTimeout(state5.hideTimer);
+        state5.hideTimer = null;
+      }
+      state5.isMouseOverTooltip = false;
+      const container = document.getElementById(this.containerId);
+      if (container) {
+        container.classList.remove("visible", "pinned", "maximized", "dragging", "closing");
+      }
+    },
+    /**
+     * Attach tooltip to trigger element with click behavior
+     */
+    attach(triggerElement, getDataFn) {
+      const self = this;
+      const handleClick = () => {
+        if (state5.hideTimer) {
+          clearTimeout(state5.hideTimer);
+          state5.hideTimer = null;
+        }
+        const data = getDataFn();
+        if (data) {
+          self.show(triggerElement, data);
+        }
+      };
+      triggerElement.addEventListener("click", handleClick);
+      return () => {
+        triggerElement.removeEventListener("click", handleClick);
+        self.hide();
+      };
+    },
+    /**
+     * Attach tooltip with hover behavior
+     */
+    attachHover(triggerElement, getDataFn) {
+      const self = this;
+      const handleMouseEnter = () => {
+        if (state5.hideTimer) {
+          clearTimeout(state5.hideTimer);
+          state5.hideTimer = null;
+        }
+        const data = getDataFn();
+        if (data) {
+          self.show(triggerElement, data);
+        }
+      };
+      const handleMouseLeave = () => {
+        startDelayedHide5();
+      };
+      triggerElement.addEventListener("mouseenter", handleMouseEnter);
+      triggerElement.addEventListener("mouseleave", handleMouseLeave);
+      return () => {
+        triggerElement.removeEventListener("mouseenter", handleMouseEnter);
+        triggerElement.removeEventListener("mouseleave", handleMouseLeave);
+        self.hide();
+      };
+    },
+    /**
+     * Build contract data from window.CONTRACT_STATE
+     * Helper method to build the data structure from global state
+     */
+    buildFromGlobalState() {
+      const globalState = window.CONTRACT_STATE;
+      if (!globalState) return null;
+      return {
+        isLoaded: globalState.isLoaded ?? false,
+        isValid: globalState.isValid ?? false,
+        timestamp: globalState.timestamp ?? null,
+        energy: {
+          total: globalState.energy?.total ?? 0,
+          entries: globalState.energy?.entries ?? 0,
+          commonArea: globalState.energy?.commonArea ?? 0,
+          stores: globalState.energy?.stores ?? 0
+        },
+        water: {
+          total: globalState.water?.total ?? 0,
+          entries: globalState.water?.entries ?? 0,
+          commonArea: globalState.water?.commonArea ?? 0,
+          stores: globalState.water?.stores ?? 0
+        },
+        temperature: {
+          total: globalState.temperature?.total ?? 0,
+          internal: globalState.temperature?.internal ?? 0,
+          stores: globalState.temperature?.stores ?? 0
+        },
+        discrepancies: globalState.discrepancies
+      };
+    }
+  };
+
   // src/components/ModalHeader/index.ts
   var DEFAULT_BG_COLOR = "#3e1a7d";
   var DEFAULT_TEXT_COLOR = "white";
@@ -40797,6 +41804,7 @@
   exports.CONSUMPTION_CHART_DEFAULTS = DEFAULT_CONFIG;
   exports.CONSUMPTION_THEME_COLORS = THEME_COLORS;
   exports.ConnectionStatusType = ConnectionStatusType;
+  exports.ContractSummaryTooltip = ContractSummaryTooltip;
   exports.DEFAULT_CLAMP_RANGE = DEFAULT_CLAMP_RANGE;
   exports.DEFAULT_ENERGY_GROUP_COLORS = DEFAULT_ENERGY_GROUP_COLORS;
   exports.DEFAULT_GAS_GROUP_COLORS = DEFAULT_GAS_GROUP_COLORS;