myio-js-library 0.1.160 → 0.1.161

package/dist/index.js

@@ -2053,8 +2053,9 @@ var MyIOSelectionStoreClass = class _MyIOSelectionStoreClass {
       lastValue: Number(entity.lastValue) || 0,
       unit: entity.unit || "",
       status: entity.status || "unknown",
-      ingestionId: entity.ingestionId || entity.id
+      ingestionId: entity.ingestionId || entity.id,
       // ⭐ ADD: Store ingestionId for API calls
+      customerName: entity.customerName || ""
     };
     this.entities.set(entity.id, normalizedEntity);
   }
@@ -4682,6 +4683,13 @@ var Icons = {
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
      viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
   <circle cx="12" cy="12" r="5"/>
+</svg>`,
+  waterDrop: `
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <g id="water" transform="translate(-4 -2)">
+    <path id="secondary" fill="#2ca9bc" d="M19,14A7,7,0,1,1,5,14C5,8,12,3,12,3S19,8,19,14Z"/>
+    <path id="primary" d="M19,14A7,7,0,1,1,5,14C5,8,12,3,12,3S19,8,19,14Z" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+  </g>
 </svg>`,
   // ⋮ Kebab (for actions menu)
   kebab: `
@@ -4710,6 +4718,7 @@ var ICON_MAP = {
 var DEFAULT_I18N = {
   // Status labels with icons
   in_operation: "\u26A1 Normal",
+  in_operation_water: "\u{1F4A7} Normal",
   standby: "\u{1F4A4} Em standby",
   alert: "\u26A0\uFE0F Alerta",
   failure: "\u{1F6A8} Falha",
@@ -4766,7 +4775,13 @@ function normalizeParams(params) {
     }
   };
 }
-function getIconSvg(deviceType) {
+function getIconSvg(deviceType, domain) {
+  if (domain === "water") {
+    return Icons.waterDrop;
+  }
+  if (domain === "temperature") {
+    return Icons.thermometer;
+  }
   return ICON_MAP[deviceType] || ICON_MAP.DEFAULT;
 }
 function formatPower(valueInWatts) {
@@ -4806,9 +4821,23 @@ function calculateConsumptionPercentage(target, consumption) {
   const percentage = numericConsumption / numericTarget * 100;
   return percentage;
 }
-function getStatusInfo(deviceStatus, i18n) {
+function getStatusInfo(deviceStatus, i18n, domain) {
   switch (deviceStatus) {
+    // --- Novos Status de Temperatura ---
+    case "normal":
+      return { chipClass: "chip--ok", label: "Normal" };
+    // Verde/Azul
+    case "cold":
+      return { chipClass: "chip--standby", label: "Frio" };
+    // Azul claro/Ciano
+    case "hot":
+      return { chipClass: "chip--alert", label: "Quente" };
+    // Laranja/Amarelo
+    // --- Status Existentes ---
     case DeviceStatusType.POWER_ON:
+      if (domain === "water") {
+        return { chipClass: "chip--ok", label: i18n.in_operation_water };
+      }
       return { chipClass: "chip--ok", label: i18n.in_operation };
     case DeviceStatusType.STANDBY:
       return { chipClass: "chip--standby", label: i18n.standby };
@@ -4821,6 +4850,7 @@ function getStatusInfo(deviceStatus, i18n) {
       return { chipClass: "chip--alert", label: i18n.maintenance };
     case DeviceStatusType.NOT_INSTALLED:
       return { chipClass: "chip--offline", label: i18n.not_installed };
+    // Default (Cai aqui se não achar 'normal', 'hot' etc)
     case DeviceStatusType.NO_INFO:
     default:
       return { chipClass: "chip--offline", label: i18n.offline };
@@ -4852,6 +4882,14 @@ function getCardStateClass(deviceStatus) {
 }
 function getStatusDotClass(deviceStatus) {
   switch (deviceStatus) {
+    // --- Novos Status de Temperatura ---
+    case "normal":
+      return "dot--ok";
+    case "cold":
+      return "dot--standby";
+    case "hot":
+      return "dot--alert";
+    // --- Status Existentes ---
     case DeviceStatusType.POWER_ON:
       return "dot--ok";
     case DeviceStatusType.STANDBY:
@@ -4879,7 +4917,7 @@ function buildDOM(state) {
   header.className = "myio-ho-card__header";
   const iconContainer = document.createElement("div");
   iconContainer.className = "myio-ho-card__icon";
-  iconContainer.innerHTML = getIconSvg(entityObject.deviceType);
+  iconContainer.innerHTML = getIconSvg(entityObject.deviceType, entityObject.domain);
   header.appendChild(iconContainer);
   const titleSection = document.createElement("div");
   titleSection.className = "myio-ho-card__title";
@@ -5001,7 +5039,11 @@ function buildDOM(state) {
   powerMetric.appendChild(statusDot);
   const powerLabel = document.createElement("div");
   powerLabel.className = "label";
-  powerLabel.textContent = i18n.instantaneous_power || "Pot\xEAncia";
+  if (entityObject.domain === "water") {
+    powerLabel.textContent = "Leitura";
+  } else {
+    powerLabel.textContent = i18n.instantaneous_power || "Pot\xEAncia";
+  }
   powerMetric.appendChild(powerLabel);
   const powerVal = document.createElement("div");
   powerVal.className = "val";
@@ -5025,7 +5067,7 @@ function verifyOfflineStatus(entityObject, delayTimeInMins = 15) {
   return true;
 }
 function paint(root, state) {
-  const { entityObject, i18n, delayTimeConnectionInMins } = state;
+  const { entityObject, i18n, delayTimeConnectionInMins, isSelected } = state;
   if (entityObject.connectionStatus) {
     if (entityObject.connectionStatus === "offline") {
       entityObject.deviceStatus = DeviceStatusType.NO_INFO;
@@ -5037,16 +5079,23 @@ function paint(root, state) {
   }
   const stateClass = getCardStateClass(entityObject.deviceStatus);
   root.className = `myio-ho-card ${stateClass}`;
-  const statusInfo = getStatusInfo(entityObject.deviceStatus, i18n);
+  const statusInfo = getStatusInfo(entityObject.deviceStatus, i18n, entityObject.domain);
   const chip = root.querySelector(".chip");
   chip.className = `chip ${statusInfo.chipClass}`;
-  chip.textContent = statusInfo.label;
+  chip.innerHTML = statusInfo.label;
   const primaryValue = formatValueByDomain(entityObject.val, entityObject.domain);
   const numSpan = root.querySelector(".myio-ho-card__value .num");
   const unitSpan = root.querySelector(".myio-ho-card__value .unit");
   numSpan.textContent = primaryValue;
   const barContainer = root.querySelector(".bar");
   const effContainer = root.querySelector(".myio-ho-card__eff");
+  if (state.enableSelection) {
+    const checkbox = root.querySelector('.myio-ho-card__select input[type="checkbox"]');
+    if (checkbox) {
+      checkbox.checked = !!isSelected;
+    }
+    root.classList.toggle("is-selected", !!isSelected);
+  }
   const targetValue = entityObject.consumptionTargetValue;
   if (targetValue) {
     barContainer.style.display = "";
@@ -5068,9 +5117,14 @@ function paint(root, state) {
   }
   const powerVal = root.querySelector(".myio-ho-card__footer .metric:nth-child(2) .val");
   if (powerVal) {
-    const instantPower = entityObject.instantaneousPower ?? entityObject.consumption_power ?? null;
-    const powerFormatted = formatPower(instantPower);
-    powerVal.textContent = instantPower !== null ? `${powerFormatted.num} ${powerFormatted.unit}` : "-";
+    if (entityObject.domain === "water") {
+      const pulses = entityObject.pulses ?? 0;
+      powerVal.textContent = `${pulses} L`;
+    } else {
+      const instantPower = entityObject.instantaneousPower ?? entityObject.consumption_power ?? null;
+      const powerFormatted = formatPower(instantPower);
+      powerVal.textContent = instantPower !== null ? `${powerFormatted.num} ${powerFormatted.unit}` : "-";
+    }
   }
   const statusDot = root.querySelector(".myio-ho-card__footer .metric:nth-child(2) .status-dot");
   if (statusDot) {
@@ -5130,6 +5184,26 @@ function bindEvents(root, state, callbacks) {
       callbacks.handleActionSettings(e, entityObject);
     });
   }
+  const MyIOSelectionStore2 = window.MyIOLibrary?.MyIOSelectionStore || window.MyIOSelectionStore;
+  if (MyIOSelectionStore2) {
+    const onSelectionChange = () => {
+      const selectedIds = MyIOSelectionStore2.getSelectedIds();
+      const isSelected = selectedIds.includes(entityObject.entityId);
+      if (state.isSelected !== isSelected) {
+        state.isSelected = isSelected;
+        paint(root, state);
+      }
+    };
+    MyIOSelectionStore2.on("selection:change", onSelectionChange);
+    root._selectionListener = onSelectionChange;
+  }
+  root._cleanup = () => {
+    document.removeEventListener("click", closeMenu);
+    document.removeEventListener("keydown", closeMenu);
+    if (MyIOSelectionStore2 && root._selectionListener) {
+      MyIOSelectionStore2.off("selection:change", root._selectionListener);
+    }
+  };
   const checkbox = root.querySelector('.myio-ho-card__select input[type="checkbox"]');
   if (checkbox && callbacks.handleSelect) {
     checkbox.addEventListener("change", (e) => {
@@ -5197,6 +5271,7 @@ function renderCardComponentHeadOffice(containerEl, params) {
   ensureCss();
   const state = normalizeParams(params);
   const root = buildDOM(state);
+  state.isSelected = params.isSelected || false;
   containerEl.appendChild(root);
   bindEvents(root, state, state.callbacks);
   paint(root, state);
@@ -10940,11 +11015,13 @@ var EnergyModalView = class {
     console.log("[EnergyModalView] Bar mode toggled to:", this.currentBarMode);
   }
   /**
-   * Applies the current theme to the modal and charts
-   */
+     * Applies the current theme to the modal and charts (Updated with #root override)
+     */
   applyTheme() {
     const themeToggleBtn = document.getElementById("theme-toggle-btn");
-    const modalContent = document.querySelector(".myio-energy-modal-scope");
+    const modalContent = this.container;
+    const externalBody = this.container?.closest(".myio-modal-body") || document.querySelector(".myio-modal-body");
+    const rootDiv = document.querySelector("#root > div");
     if (themeToggleBtn) {
       const sunIcon = themeToggleBtn.querySelector(".myio-theme-icon-sun");
       const moonIcon = themeToggleBtn.querySelector(".myio-theme-icon-moon");
@@ -10957,6 +11034,14 @@ var EnergyModalView = class {
           moonIcon.style.opacity = "0";
           moonIcon.style.transform = "translate(-50%, -50%) rotate(90deg) scale(0)";
         }
+        if (externalBody) {
+          externalBody.style.backgroundColor = "#ffffff";
+          externalBody.style.color = "#1f2937";
+        }
+        if (rootDiv) {
+          rootDiv.style.backgroundColor = "#ffffff";
+          rootDiv.style.color = "#1f2937";
+        }
       } else {
         if (sunIcon) {
           sunIcon.style.opacity = "0";
@@ -10966,6 +11051,14 @@ var EnergyModalView = class {
           moonIcon.style.opacity = "1";
           moonIcon.style.transform = "translate(-50%, -50%) rotate(0deg) scale(1)";
         }
+        if (externalBody) {
+          externalBody.style.backgroundColor = "#1f1f1f";
+          externalBody.style.color = "#f3f4f6";
+        }
+        if (rootDiv) {
+          rootDiv.style.backgroundColor = "#1f1f1f";
+          rootDiv.style.color = "#f3f4f6";
+        }
       }
     }
     if (modalContent) {
@@ -11194,7 +11287,7 @@ var EnergyModalView = class {
             ${this.config.params.mode === "comparison" ? `
             <!-- RFC-0097: Granularity Selector (only 1h and 1d supported) -->
             <div class="myio-granularity-selector" style="display: flex; align-items: center; gap: 4px; margin-left: 8px; padding: 4px 8px; background: rgba(0,0,0,0.05); border-radius: 8px;">
-              <span style="font-size: 11px; color: #666; margin-right: 4px; white-space: nowrap;">Granularidade:</span>
+              <span class="myio-label-secondary" style="font-size: 11px; margin-right: 4px; white-space: nowrap;">Granularidade:</span>
               <button class="myio-btn myio-btn-granularity ${this.currentGranularity === "1h" ? "active" : ""}" data-granularity="1h" title="Hora">1h</button>
               <button class="myio-btn myio-btn-granularity ${this.currentGranularity === "1d" ? "active" : ""}" data-granularity="1d" title="Dia">1d</button>
             </div>
@@ -11876,93 +11969,159 @@ var EnergyModalView = class {
     return i18n[key] || DEFAULT_I18N2[key];
   }
   /**
-   * Gets modal styles with header color matching openDashboardPopupEnergy
-   */
+     * Gets modal styles with fixed Dark/Light contrast
+     */
+  /**
+     * Gets modal styles with fixed Chart Border for Light Mode
+     */
   getModalStyles() {
     const styles = this.config.params.styles || {};
+    const defaultPrimary = styles.primaryColor || "#4A148C";
+    const defaultFont = styles.fontFamily || '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
     return `
+      /* --- VARI\xC1VEIS DE TEMA (LIGHT MODE - PADR\xC3O) --- */
       .myio-energy-modal-scope {
-        --myio-energy-primary: ${styles.primaryColor || "#4A148C"};
-        --myio-energy-bg: ${styles.backgroundColor || "#ffffff"};
-        --myio-energy-text: ${styles.textColor || "#1f2937"};
-        --myio-energy-border: ${styles.borderColor || "#e5e7eb"};
-        --myio-energy-radius: ${styles.borderRadius || "8px"};
-        --myio-energy-font: ${styles.fontFamily || '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'};
+        --myio-energy-primary: ${defaultPrimary};
+        --myio-energy-font: ${defaultFont};
+        --myio-energy-radius: 8px;
+        
+        /* Cores Gerais (Light Mode) */
+        --myio-energy-bg: #ffffff;
+        --myio-energy-text: #1f2937;
+        --myio-energy-text-secondary: #6b7280;
+        
+        /* Borda GERAL (para bot\xF5es e inputs) - Cinza suave */
+        --myio-energy-border: #e5e7eb;
+        
+        /* Borda ESPEC\xCDFICA DO GR\xC1FICO (Aqui est\xE1 a corre\xE7\xE3o) */
+        /* No Light Mode, definimos como transparente ou branco para "sumir" */
+        --myio-chart-border: transparent; 
+
+        --myio-energy-btn-bg: #f3f4f6;
+        --myio-energy-btn-hover: #e5e7eb;
+        --myio-energy-input-bg: #ffffff;
+        --myio-granularity-bg: #f9fafb;
         
         font-family: var(--myio-energy-font);
+        background-color: var(--myio-energy-bg);
         color: var(--myio-energy-text);
         height: -webkit-fill-available;
+        transition: background-color 0.3s ease, color 0.3s ease;
       }
 
-      .myio-btn {
-        padding: 8px 16px;
-        border-radius: var(--myio-energy-radius);
-        border: 1px solid var(--myio-energy-border);
-        background: var(--myio-energy-bg);
-        color: var(--myio-energy-text);
-        cursor: pointer;
-        font-size: 14px;
-        transition: all 0.2s;
-      }
+      /* --- DARK MODE OVERRIDES --- */
+      .myio-energy-modal-scope[data-theme="dark"] {
+        --myio-energy-bg: #1f1f1f;
+        --myio-energy-text: #f3f4f6;
+        --myio-energy-text-secondary: #9ca3af;
+        
+        /* No Dark Mode, as bordas precisam aparecer */
+        --myio-energy-border: #374151;
+        --myio-chart-border: #374151; /* Borda vis\xEDvel no escuro */
 
-      .myio-btn:hover:not(:disabled) {
-        background: #f3f4f6;
+        --myio-energy-btn-bg: #374151;
+        --myio-energy-btn-hover: #4b5563;
+        --myio-energy-input-bg: #111827;
+        --myio-granularity-bg: #111827;
       }
 
-      .myio-btn:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
+      /* --- COMPONENTES --- */
 
-      .myio-btn-primary {
-        background: var(--myio-energy-primary);
-        color: white;
-        border-color: var(--myio-energy-primary);
+      .myio-energy-chart-container {
+        flex: 1 !important;
+        min-height: 353px !important;
+        height: 353px !important;
+        background: var(--myio-energy-bg);
+        border-radius: var(--myio-energy-radius);
+        
+        /* USO DA VARI\xC1VEL ESPEC\xCDFICA AQUI */
+        border: 1px solid var(--myio-chart-border);
+        
+        padding: 10px !important;
+        display: block !important;
+        overflow: hidden !important;
       }
 
-      .myio-btn-primary:hover:not(:disabled) {
-        background: #6A1B9A;
+      .myio-chart-container {
+        /* Aplica a mesma l\xF3gica para o gr\xE1fico de fallback */
+        border: 1px solid var(--myio-chart-border);
+        border-radius: var(--myio-energy-radius);
+        overflow: hidden;
       }
 
-      .myio-btn-secondary {
-        background: #f3f4f6;
-        color: var(--myio-energy-text);
-        border-color: var(--myio-energy-border);
+      /* --- Resto dos estilos (Bot\xF5es, Labels, etc.) --- */
+      
+      .myio-label-secondary {
+        color: var(--myio-energy-text-secondary);
+        font-weight: 500;
       }
 
-      .myio-btn-secondary:hover:not(:disabled) {
-        background: #e5e7eb;
+      .myio-granularity-selector {
+        display: flex; 
+        align-items: center; 
+        gap: 4px; 
+        margin-left: 8px; 
+        padding: 4px 8px; 
+        border-radius: 8px;
+        background: var(--myio-granularity-bg);
+        border: 1px solid var(--myio-energy-border); /* Granularidade mant\xE9m borda suave */
       }
 
-      /* RFC-0097: Granularity selector buttons */
       .myio-btn-granularity {
         padding: 4px 10px;
         font-size: 12px;
         font-weight: 600;
         border-radius: 6px;
-        border: 1px solid var(--myio-energy-border);
-        background: var(--myio-energy-bg);
-        color: var(--myio-energy-text);
         cursor: pointer;
         transition: all 0.2s ease;
         min-width: 36px;
+        background: transparent;
+        border: 1px solid transparent;
+        color: var(--myio-energy-text-secondary);
       }
 
       .myio-btn-granularity:hover:not(.active) {
-        background: #f3f4f6;
-        border-color: var(--myio-energy-primary);
-        color: var(--myio-energy-primary);
+        background: var(--myio-energy-btn-hover);
+        color: var(--myio-energy-text);
       }
 
       .myio-btn-granularity.active {
         background: var(--myio-energy-primary);
         color: white;
         border-color: var(--myio-energy-primary);
-        box-shadow: 0 2px 4px rgba(74, 20, 140, 0.25);
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
       }
 
-      .myio-granularity-selector {
+      .myio-btn {
+        padding: 8px 16px;
+        border-radius: var(--myio-energy-radius);
         border: 1px solid var(--myio-energy-border);
+        background: var(--myio-energy-btn-bg);
+        color: var(--myio-energy-text);
+        cursor: pointer;
+        font-size: 14px;
+        transition: all 0.2s;
+      }
+
+      .myio-btn:hover:not(:disabled) {
+        background: var(--myio-energy-btn-hover);
+        border-color: var(--myio-energy-border);
+      }
+
+      .myio-btn-primary {
+        background: var(--myio-energy-primary);
+        color: white;
+        border-color: var(--myio-energy-primary);
+      }
+
+      .myio-btn-primary:hover:not(:disabled) {
+        opacity: 0.9;
+      }
+
+      .myio-btn-secondary {
+        background: var(--myio-energy-btn-bg);
+        color: var(--myio-energy-text);
+        border-color: var(--myio-energy-border);
       }
 
       .myio-modal-scope {
@@ -11971,42 +12130,30 @@ var EnergyModalView = class {
         flex-direction: column !important;
       }
 
-      .myio-energy-chart-container {
-        flex: 1 !important;
-        min-height: 353px !important;
-        height: 353px !important;
-        background: var(--myio-energy-bg);
-        border-radius: var(--myio-energy-radius);
-        border: 1px solid var(--myio-energy-border);
-        padding: 10px !important;
-        display: block !important;
-        overflow: hidden !important;
-      }
-
-      .myio-energy-chart-container > iframe {
-        width: 100% !important;
-        height: 100% !important;
-        min-height: 408px !important;
-        border: none !important;
+      .myio-form-group {
+        display: flex;
+        flex-direction: column;
       }
 
-      .myio-energy-chart-container iframe,
-      .myio-energy-chart-container iframe body,
-      .myio-energy-chart-container iframe html {
-        height: 100% !important;
-        min-height: 408px !important;
+      .myio-label {
+        font-weight: 500;
+        margin-bottom: 5px;
+        color: var(--myio-energy-text);
       }
 
-      .myio-energy-chart-container .chart-wrapper,
-      .myio-energy-chart-container .chart-container,
-      .myio-energy-chart-container canvas,
-      .myio-energy-chart-container svg {
-        height: 408px !important;
-        min-height: 408px !important;
+      .myio-input {
+        padding: 8px 12px;
+        border: 1px solid var(--myio-energy-border);
+        border-radius: var(--myio-energy-radius);
+        font-size: 14px;
+        background: var(--myio-energy-input-bg);
+        color: var(--myio-energy-text);
       }
 
-      .myio-loading-state {
-        text-align: center;
+      .myio-input:focus {
+        outline: none;
+        border-color: var(--myio-energy-primary);
+        box-shadow: 0 0 0 1px var(--myio-energy-primary);
       }
 
       .myio-spinner {
@@ -12018,78 +12165,40 @@ var EnergyModalView = class {
         animation: spin 1s linear infinite;
         margin: 0 auto 16px;
       }
-
+      
       @keyframes spin {
         0% { transform: rotate(0deg); }
         100% { transform: rotate(360deg); }
       }
 
+      .myio-loading-state p {
+        color: var(--myio-energy-text);
+      }
+
       .myio-energy-error {
-        background: #fef2f2;
-        border: 1px solid #fecaca;
+        background: rgba(254, 202, 202, 0.15);
+        border: 1px solid rgba(248, 113, 113, 0.5);
         border-radius: var(--myio-energy-radius);
         padding: 16px;
       }
-
-      .myio-error-content {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-      }
-
-      .myio-error-icon {
-        font-size: 24px;
-      }
-
+      
       .myio-error-message {
-        color: #dc2626;
+        color: #ef4444;
         font-weight: 500;
       }
 
-
-
-      .myio-fallback-chart h4 {
-        margin: 0 0 16px 0;
-        text-align: center;
-      }
-
-      .myio-chart-container {
-        border: 1px solid var(--myio-energy-border);
-        border-radius: var(--myio-energy-radius);
-        overflow: hidden;
-      }
-
       .myio-chart-note {
         margin: 12px 0 0 0;
         font-size: 12px;
-        color: #666;
-        text-align: center;
-      }
-
-      .myio-form-group {
-        display: flex;
-        flex-direction: column;
-      }
-
-      .myio-label {
-        font-weight: 500;
-        margin-bottom: 5px;
-        color: var(--myio-energy-text);
-      }
-
-      .myio-input {
-        padding: 8px 12px;
-        border: 1px solid var(--myio-energy-border);
-        border-radius: var(--myio-energy-radius);
-        font-size: 14px;
-        background: var(--myio-energy-bg);
         color: var(--myio-energy-text);
+        opacity: 0.7;
+        text-align: center;
       }
 
-      .myio-input:focus {
-        outline: none;
-        border-color: var(--myio-energy-primary);
-        box-shadow: 0 0 0 3px rgba(74, 20, 140, 0.1);
+      .myio-energy-chart-container > iframe {
+        width: 100% !important;
+        height: 100% !important;
+        border: none !important;
       }
 
       @media (max-width: 768px) {
@@ -12097,12 +12206,6 @@ var EnergyModalView = class {
           grid-template-columns: 1fr;
           grid-template-rows: auto 1fr;
         }
-        
-        .myio-energy-header {
-          flex-direction: column;
-          gap: 12px;
-          align-items: stretch;
-        }
       }
     `;
   }