myio-js-library 0.1.197 → 0.1.199

package/dist/index.cjs

@@ -577,6 +577,7 @@ __export(index_exports, {
   CONSUMPTION_CHART_DEFAULTS: () => DEFAULT_CONFIG,
   CONSUMPTION_THEME_COLORS: () => THEME_COLORS,
   ConnectionStatusType: () => ConnectionStatusType,
+  ContractSummaryTooltip: () => ContractSummaryTooltip,
   DEFAULT_CLAMP_RANGE: () => DEFAULT_CLAMP_RANGE,
   DEFAULT_ENERGY_GROUP_COLORS: () => DEFAULT_ENERGY_GROUP_COLORS,
   DEFAULT_GAS_GROUP_COLORS: () => DEFAULT_GAS_GROUP_COLORS,
@@ -9044,8 +9045,8 @@ function getStatusDotClass(deviceStatus) {
       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");
@@ -9201,7 +9202,7 @@ function buildDOM(state5) {
   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", {
@@ -9228,8 +9229,8 @@ function buildDebugTooltipInfo(entityObject, statusInfo, stateClass, statusDecis
     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,
@@ -9371,8 +9372,8 @@ function verifyOfflineStatus(entityObject, delayTimeInMins = 15, LogHelper2) {
   }
   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") {
@@ -9424,7 +9425,7 @@ function paint(root, state5) {
   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;
@@ -9472,8 +9473,8 @@ function paint(root, state5) {
     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() {
@@ -9529,9 +9530,9 @@ function bindEvents(root, state5, callbacks) {
     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);
@@ -9544,7 +9545,7 @@ function bindEvents(root, state5, callbacks) {
         clearTimeout(TempRangeTooltip._hideTimer);
         TempRangeTooltip._hideTimer = null;
       }
-      TempRangeTooltip.show(root, state5.entityObject, e);
+      TempRangeTooltip.show(root, state6.entityObject, e);
     };
     const hideTooltip = () => {
       TempRangeTooltip._startDelayedHide();
@@ -9562,7 +9563,7 @@ function bindEvents(root, state5, callbacks) {
         clearTimeout(EnergyRangeTooltip._hideTimer);
         EnergyRangeTooltip._hideTimer = null;
       }
-      EnergyRangeTooltip.show(root, state5.entityObject, e);
+      EnergyRangeTooltip.show(root, state6.entityObject, e);
     };
     const hideEnergyTooltip = () => {
       EnergyRangeTooltip._startDelayedHide();
@@ -9614,7 +9615,7 @@ function bindEvents(root, state5, callbacks) {
       }
     });
   }
-  if (state5.enableDragDrop) {
+  if (state6.enableDragDrop) {
     root.addEventListener("dragstart", (e) => {
       root.classList.add("is-dragging");
       e.dataTransfer.setData("text/plain", entityObject.entityId);
@@ -9656,17 +9657,17 @@ function renderCardComponentHeadOffice(containerEl, params) {
     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() {
@@ -11396,6 +11397,15 @@ function calculateTempStatus(currentTemp, avgTemp) {
     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;
@@ -11438,8 +11448,10 @@ function generateBodyHTML2(data) {
   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 -->
@@ -11454,12 +11466,18 @@ function generateBodyHTML2(data) {
         </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>
@@ -30969,7 +30987,7 @@ async function openTemperatureModal(params) {
   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",
@@ -30992,58 +31010,58 @@ async function openTemperatureModal(params) {
   };
   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";
-  const startDateInput = new Date(state5.startTs).toISOString().slice(0, 16);
-  const endDateInput = 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";
+  const startDateInput = new Date(state6.startTs).toISOString().slice(0, 16);
+  const endDateInput = new Date(state6.endTs).toISOString().slice(0, 16);
   const isMaximized = container.__isMaximized || false;
   const contentMaxWidth = isMaximized ? "100%" : "900px";
   const contentMaxHeight = isMaximized ? "100vh" : "95vh";
@@ -31070,7 +31088,7 @@ function renderModal(container, state5, modalId, error) {
           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 -->
@@ -31078,7 +31096,7 @@ function renderModal(container, state5, modalId, error) {
               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;
@@ -31100,7 +31118,7 @@ function renderModal(container, state5, modalId, error) {
         <!-- 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 -->
@@ -31113,8 +31131,8 @@ function renderModal(container, state5, modalId, error) {
               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) -->
@@ -31128,7 +31146,7 @@ function renderModal(container, state5, modalId, error) {
               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="
@@ -31141,12 +31159,12 @@ function renderModal(container, state5, modalId, error) {
                 <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>
@@ -31154,13 +31172,13 @@ function renderModal(container, state5, modalId, error) {
               <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>
@@ -31185,8 +31203,8 @@ function renderModal(container, state5, modalId, error) {
             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>
 
@@ -31197,40 +31215,40 @@ function renderModal(container, state5, modalId, error) {
         ">
           <!-- 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>
@@ -31246,18 +31264,18 @@ function renderModal(container, state5, modalId, error) {
             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>`}
@@ -31267,12 +31285,12 @@ function renderModal(container, state5, modalId, error) {
         <!-- 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="
@@ -31323,14 +31341,14 @@ function renderModal(container, state5, modalId, error) {
     </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;
@@ -31341,14 +31359,14 @@ function drawChart(modalId, state5) {
     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),
@@ -31356,7 +31374,7 @@ function drawChart(modalId, state5) {
       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,
@@ -31374,12 +31392,12 @@ function drawChart(modalId, state5) {
   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;
@@ -31411,9 +31429,9 @@ function drawChart(modalId, state5) {
     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;
@@ -31455,10 +31473,10 @@ function drawChart(modalId, state5) {
     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;
@@ -31476,16 +31494,16 @@ function drawChart(modalId, state5) {
   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;
@@ -31522,17 +31540,17 @@ function setupChartTooltip(canvas, container, chartData, state5, colors) {
     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"
@@ -31570,7 +31588,7 @@ function setupChartTooltip(canvas, container, chartData, state5, colors) {
     canvas.style.cursor = "default";
   });
 }
-async function setupEventListeners(container, state5, modalId, onClose) {
+async function setupEventListeners(container, state6, modalId, onClose) {
   const closeModal = () => {
     container.remove();
     onClose?.();
@@ -31581,19 +31599,19 @@ async function setupEventListeners(container, state5, modalId, onClose) {
   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);
         }
       });
@@ -31602,19 +31620,19 @@ async function setupEventListeners(container, state5, modalId, onClose) {
     }
   }
   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`);
@@ -31633,71 +31651,71 @@ async function setupEventListeners(container, state5, modalId, onClose) {
   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
     );
@@ -31710,7 +31728,7 @@ async function openTemperatureComparisonModal(params) {
   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,
@@ -31729,44 +31747,44 @@ async function openTemperatureComparisonModal(params) {
   };
   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,
@@ -31784,21 +31802,21 @@ async function fetchAllDevicesData(state5) {
         }
       })
     );
-    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);
-  const startDateStr = new Date(state5.startTs).toLocaleDateString(state5.locale);
-  const endDateStr = new Date(state5.endTs).toLocaleDateString(state5.locale);
-  const startDateInput = new Date(state5.startTs).toISOString().slice(0, 16);
-  const endDateInput = new Date(state5.endTs).toISOString().slice(0, 16);
-  const legendHTML = state5.deviceData.map((dd) => `
+function renderModal2(container, state6, modalId) {
+  const colors = getThemeColors(state6.theme);
+  const startDateStr = new Date(state6.startTs).toLocaleDateString(state6.locale);
+  const endDateStr = new Date(state6.endTs).toLocaleDateString(state6.locale);
+  const startDateInput = new Date(state6.startTs).toISOString().slice(0, 16);
+  const endDateInput = 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>
@@ -31807,9 +31825,9 @@ function renderModal2(container, state5, modalId) {
       </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;
     ">
@@ -31860,7 +31878,7 @@ function renderModal2(container, state5, modalId) {
           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 -->
@@ -31868,7 +31886,7 @@ function renderModal2(container, state5, modalId) {
               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;
@@ -31891,7 +31909,7 @@ function renderModal2(container, state5, modalId) {
         <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 -->
@@ -31904,8 +31922,8 @@ function renderModal2(container, state5, modalId) {
               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) -->
@@ -31919,7 +31937,7 @@ function renderModal2(container, state5, modalId) {
               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="
@@ -31932,12 +31950,12 @@ function renderModal2(container, state5, modalId) {
                 <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>
@@ -31945,13 +31963,13 @@ function renderModal2(container, state5, modalId) {
               <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>
@@ -31976,8 +31994,8 @@ function renderModal2(container, state5, modalId) {
             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>
 
@@ -31993,14 +32011,14 @@ function renderModal2(container, state5, modalId) {
         <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>`}
@@ -32018,12 +32036,12 @@ function renderModal2(container, state5, modalId) {
         <!-- 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="
@@ -32058,15 +32076,15 @@ function renderModal2(container, state5, modalId) {
     </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;
@@ -32077,19 +32095,19 @@ function drawComparisonChart(modalId, state5) {
   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),
@@ -32099,7 +32117,7 @@ function drawComparisonChart(modalId, state5) {
         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,
@@ -32120,7 +32138,7 @@ function drawComparisonChart(modalId, state5) {
     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 }) => {
@@ -32130,7 +32148,7 @@ function drawComparisonChart(modalId, state5) {
     });
   });
   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;
@@ -32149,10 +32167,10 @@ function drawComparisonChart(modalId, state5) {
       }
     }
   });
-  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: []
@@ -32273,10 +32291,10 @@ function drawComparisonChart(modalId, state5) {
     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;
@@ -32295,16 +32313,16 @@ function drawComparisonChart(modalId, state5) {
   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;
@@ -32341,17 +32359,17 @@ function setupComparisonChartTooltip(canvas, container, chartData, state5, color
     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"
@@ -32393,7 +32411,7 @@ function setupComparisonChartTooltip(canvas, container, chartData, state5, color
     canvas.style.cursor = "default";
   });
 }
-async function setupEventListeners2(container, state5, modalId, onClose) {
+async function setupEventListeners2(container, state6, modalId, onClose) {
   const closeModal = () => {
     container.remove();
     onClose?.();
@@ -32404,19 +32422,19 @@ async function setupEventListeners2(container, state5, modalId, onClose) {
   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);
         }
       });
@@ -32425,23 +32443,23 @@ async function setupEventListeners2(container, state5, modalId, onClose) {
     }
   }
   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`);
@@ -32460,13 +32478,13 @@ async function setupEventListeners2(container, state5, modalId, onClose) {
   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);
       }
     });
   });
@@ -32474,77 +32492,77 @@ async function setupEventListeners2(container, state5, modalId, onClose) {
     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}
 `;
@@ -32652,10 +32670,10 @@ async function saveCustomerAttributes(customerId, token, minTemperature, maxTemp
     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; } }
@@ -32920,23 +32938,23 @@ function renderModal3(container, state5, modalId, onClose, onSave) {
         </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">
@@ -32980,11 +32998,11 @@ function renderModal3(container, state5, modalId, onClose, onSave) {
           `}
         </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>
         ` : ""}
@@ -33021,18 +33039,18 @@ function renderModal3(container, state5, modalId, onClose, onSave) {
     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);
@@ -33040,7 +33058,7 @@ function renderModal3(container, state5, modalId, onClose, onSave) {
 }
 function openTemperatureSettingsModal(params) {
   const modalId = `myio-temp-settings-${Date.now()}`;
-  const state5 = {
+  const state6 = {
     customerId: params.customerId,
     customerName: params.customerName || "",
     token: params.token,
@@ -33060,37 +33078,37 @@ function openTemperatureSettingsModal(params) {
     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 };
 }
@@ -34360,7 +34378,7 @@ var EnergySummaryTooltip = {
    * 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,
@@ -34383,22 +34401,22 @@ var EnergySummaryTooltip = {
       },
       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 || {};
@@ -34409,9 +34427,9 @@ var EnergySummaryTooltip = {
       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 = [];
@@ -34462,40 +34480,40 @@ var EnergySummaryTooltip = {
       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 = {
@@ -35783,7 +35801,7 @@ var WaterSummaryTooltip = {
    * 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,
@@ -35807,22 +35825,22 @@ var WaterSummaryTooltip = {
       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) {
@@ -35830,9 +35848,9 @@ var WaterSummaryTooltip = {
         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);
     }
@@ -35840,24 +35858,24 @@ var WaterSummaryTooltip = {
       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 = {
@@ -37394,6 +37412,996 @@ var TempSensorSummaryTooltip = {
   }
 };
 
+// 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";
@@ -41158,6 +42166,7 @@ function createDistributionChartWidget(config) {
   CONSUMPTION_CHART_DEFAULTS,
   CONSUMPTION_THEME_COLORS,
   ConnectionStatusType,
+  ContractSummaryTooltip,
   DEFAULT_CLAMP_RANGE,
   DEFAULT_ENERGY_GROUP_COLORS,
   DEFAULT_GAS_GROUP_COLORS,