myio-js-library 0.1.402 → 0.1.403

package/dist/index.cjs

@@ -1121,7 +1121,7 @@ module.exports = __toCommonJS(index_exports);
 // package.json
 var package_default = {
   name: "myio-js-library",
-  version: "0.1.402",
+  version: "0.1.403",
   description: "A clean, standalone JS SDK for MYIO projects",
   license: "MIT",
   repository: "github:gh-myio/myio-js-library",
@@ -99747,6 +99747,15 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   transform: translateY(0) scale(1);
 }
 
+/* ---- Maximized state ---- */
+.adm-drawer--maximized {
+  width: 100% !important;
+  max-width: 100% !important;
+  max-height: 100vh !important;
+  height: 100vh !important;
+  border-radius: 0 !important;
+}
+
 /* ---- Header ---- */
 .adm-header {
   padding: 14px 18px 12px;
@@ -99762,6 +99771,13 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   margin-bottom: 8px;
 }
 
+.adm-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
 .adm-title {
   display: block;
   margin: 0;
@@ -99776,6 +99792,25 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   letter-spacing: -0.1px;
 }
 
+.adm-header-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: #f3f4f6;
+  border-radius: 6px;
+  cursor: pointer;
+  color: #6b7280;
+  transition: background 0.15s, color 0.15s;
+}
+
+.adm-header-btn:hover {
+  background: #e5e7eb;
+  color: #111827;
+}
+
 .adm-close {
   display: flex;
   align-items: center;
@@ -100041,56 +100076,58 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
 
 .adm-timeline-item {
   position: relative;
-  margin-bottom: 16px;
+  display: flex !important;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 5px;
+  margin-bottom: 10px;
+  min-height: 20px;
+  overflow: hidden;
 }
 
 .adm-timeline-dot {
   position: absolute;
   left: -23px;
-  top: 3px;
+  top: 50%;
+  transform: translateY(-50%);
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: #8b5cf6;
   border: 2px solid #fff;
   box-shadow: 0 0 0 2px #8b5cf6;
+  flex-shrink: 0;
 }
 
 .adm-timeline-item.is-last  .adm-timeline-dot { background: #3b82f6; box-shadow: 0 0 0 2px #3b82f6; }
 .adm-timeline-item.is-first .adm-timeline-dot { background: #ef4444; box-shadow: 0 0 0 2px #ef4444; }
 .adm-timeline-item.is-single .adm-timeline-dot { background: #7c3aed; box-shadow: 0 0 0 2px #7c3aed; }
 
-.adm-timeline-content { }
-
 .adm-timeline-num {
-  font-size: 9px;
+  font-size: 11px;
   font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.4px;
-  color: #9ca3af;
-  margin-bottom: 2px;
-}
-
-.adm-timeline-time {
-  font-size: 13px;
-  font-weight: 600;
   color: #111827;
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 
-.adm-timeline-meta {
-  font-size: 11px;
-  color: #9ca3af;
-  margin-top: 2px;
+.adm-timeline-sep {
+  color: #d1d5db;
+  font-size: 10px;
+  flex-shrink: 0;
+  user-select: none;
 }
 
-.adm-timeline-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 6px;
+.adm-timeline-time {
+  font-size: 12px;
+  font-weight: 600;
+  color: #374151;
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 
 .adm-timeline-value-pill {
+  display: inline-block;
   font-size: 10px;
   font-weight: 600;
   background: #f0fdf4;
@@ -100099,17 +100136,18 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   border-radius: 4px;
   padding: 1px 6px;
   white-space: nowrap;
+  vertical-align: middle;
   flex-shrink: 0;
 }
 
 .adm-timeline-device {
   font-size: 11px;
   color: #6b7280;
-  margin-top: 3px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 220px;
+  min-width: 0;
+  flex: 0 1 auto;
 }
 
 .adm-timeline-ellipsis {
@@ -100201,7 +100239,7 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
 
 .adm-matrix-header {
   display: grid;
-  grid-template-columns: 52px 1fr 1fr;
+  grid-template-columns: 52px 1fr 1fr 64px;
   gap: 0;
   background: #f9fafb;
   border-bottom: 1px solid #e5e7eb;
@@ -100218,7 +100256,7 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
 
 .adm-matrix-row {
   display: grid;
-  grid-template-columns: 52px 1fr 1fr;
+  grid-template-columns: 52px 1fr 1fr 64px;
   gap: 0;
   padding: 7px 10px;
   border-bottom: 1px solid #f3f4f6;
@@ -100256,6 +100294,14 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   cursor: help;
 }
 
+.adm-matrix-trigger {
+  font-family: 'SF Mono', Monaco, monospace;
+  font-size: 10px;
+  font-weight: 600;
+  color: #374151;
+  white-space: nowrap;
+}
+
 .adm-device-chip {
   display: inline-flex;
   align-items: center;
@@ -100478,21 +100524,32 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   color: #fff;
 }
 
-/* Chart wrapper + variants */
+/* Chart wrapper + canvas */
 .adm-chart-wrapper {
   position: relative;
-  min-height: 80px;
+  height: 210px;
 }
 
-.adm-chart-variant {
-  display: none;
+.adm-chart-canvas {
+  display: block;
+  width: 100% !important;
+  height: 100% !important;
 }
 
-.adm-chart-variant.is-active {
-  display: block;
+/* Secondary chart wrappers (DOW + HOD) */
+.adm-chart-canvas-wrap {
+  position: relative;
+}
+
+.adm-chart-canvas-wrap--dow {
+  height: 148px;
 }
 
-/* Legend */
+.adm-chart-canvas-wrap--hod {
+  height: 120px;
+}
+
+/* Legend (kept for Chart.js built-in legend) */
 .adm-chart-legend {
   display: flex;
   flex-wrap: wrap;
@@ -100929,6 +100986,283 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
 
 .adm-annot-archived-list { margin-top: 8px; }
 
+/* =====================================================================
+   Alarm Details Modal \u2014 Dark Mode
+   Activated by data-theme="dark" on .adm-overlay
+   ===================================================================== */
+
+.adm-overlay[data-theme="dark"] .adm-drawer {
+  background: #1e1f2e;
+  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
+}
+
+.adm-overlay[data-theme="dark"] .adm-header {
+  border-color: #2a2b3d;
+}
+
+.adm-overlay[data-theme="dark"] .adm-title {
+  color: #e2e8f0;
+}
+
+.adm-overlay[data-theme="dark"] .adm-header-btn,
+.adm-overlay[data-theme="dark"] .adm-close {
+  background: #2a2b3d;
+  color: #94a3b8;
+}
+
+.adm-overlay[data-theme="dark"] .adm-header-btn:hover,
+.adm-overlay[data-theme="dark"] .adm-close:hover {
+  background: #363750;
+  color: #e2e8f0;
+}
+
+.adm-overlay[data-theme="dark"] .adm-badge-state {
+  background: #2a2b3d;
+  color: #94a3b8;
+}
+
+.adm-overlay[data-theme="dark"] .adm-badge-source {
+  background: #252636;
+  border-color: #2a2b3d;
+  color: #94a3b8;
+}
+
+.adm-overlay[data-theme="dark"] .adm-tabs {
+  border-color: #2a2b3d;
+}
+
+.adm-overlay[data-theme="dark"] .adm-tab {
+  color: #64748b;
+}
+
+.adm-overlay[data-theme="dark"] .adm-tab:hover {
+  color: #e2e8f0;
+}
+
+.adm-overlay[data-theme="dark"] .adm-tab.is-active {
+  color: #a78bfa;
+  border-bottom-color: #a78bfa;
+}
+
+.adm-overlay[data-theme="dark"] .adm-tab-badge {
+  background: #2d1b69;
+  color: #a78bfa;
+}
+
+.adm-overlay[data-theme="dark"] .adm-body {
+  scrollbar-color: #2a2b3d transparent;
+}
+
+.adm-overlay[data-theme="dark"] .adm-body::-webkit-scrollbar-thumb {
+  background: #2a2b3d;
+}
+
+.adm-overlay[data-theme="dark"] .adm-kpi {
+  background: #252636;
+  border-color: #2a2b3d;
+}
+
+.adm-overlay[data-theme="dark"] .adm-kpi-value {
+  color: #e2e8f0;
+}
+
+.adm-overlay[data-theme="dark"] .adm-kpi-label {
+  color: #64748b;
+}
+
+.adm-overlay[data-theme="dark"] .adm-section-title {
+  color: #94a3b8;
+  border-color: #2a2b3d;
+}
+
+.adm-overlay[data-theme="dark"] .adm-row {
+  border-color: #2a2b3d;
+}
+
+.adm-overlay[data-theme="dark"] .adm-row-label {
+  color: #64748b;
+}
+
+.adm-overlay[data-theme="dark"] .adm-row-value {
+  color: #cbd5e1;
+}
+
+.adm-overlay[data-theme="dark"] .adm-description {
+  background: #252636;
+  border-color: #2a2b3d;
+  color: #94a3b8;
+}
+
+.adm-overlay[data-theme="dark"] .adm-timeline::before {
+  background: #2a2b3d;
+}
+
+.adm-overlay[data-theme="dark"] .adm-timeline-item {
+  color: #94a3b8;
+}
+
+.adm-overlay[data-theme="dark"] .adm-timeline-dot {
+  border-color: #1e1f2e;
+}
+
+.adm-overlay[data-theme="dark"] .adm-timeline-num {
+  color: #cbd5e1;
+}
+
+.adm-overlay[data-theme="dark"] .adm-timeline-device {
+  color: #64748b;
+}
+
+.adm-overlay[data-theme="dark"] .adm-devices-list {
+  border-color: #2a2b3d;
+}
+
+.adm-overlay[data-theme="dark"] .adm-device-row {
+  border-color: #2a2b3d;
+  color: #94a3b8;
+}
+
+.adm-overlay[data-theme="dark"] .adm-device-row:nth-child(odd) {
+  background: #252636;
+}
+
+.adm-overlay[data-theme="dark"] .adm-device-chip {
+  background: #252636;
+  border-color: #2a2b3d;
+  color: #94a3b8;
+}
+
+.adm-overlay[data-theme="dark"] .adm-chart-btn {
+  background: #252636;
+  border-color: #2a2b3d;
+  color: #64748b;
+}
+
+.adm-overlay[data-theme="dark"] .adm-chart-btn.is-active {
+  background: #2d1b69;
+  border-color: #6d28d9;
+  color: #a78bfa;
+}
+
+.adm-overlay[data-theme="dark"] .adm-chart-btn:hover:not(.is-active) {
+  background: #2a2b3d;
+  color: #e2e8f0;
+}
+
+/* Chart.js canvas \u2014 dark mode tick/grid colours are set via plugin options */
+
+.adm-overlay[data-theme="dark"] .adm-dow-chart {
+  border-color: #2a2b3d;
+  color: #64748b;
+}
+
+.adm-overlay[data-theme="dark"] .adm-hod-chart {
+  color: #64748b;
+}
+
+.adm-overlay[data-theme="dark"] .adm-matrix {
+  border-color: #2a2b3d;
+}
+
+.adm-overlay[data-theme="dark"] .adm-matrix-header,
+.adm-overlay[data-theme="dark"] .adm-matrix-row {
+  border-color: #2a2b3d;
+  color: #64748b;
+}
+
+.adm-overlay[data-theme="dark"] .adm-matrix-row:hover {
+  background: #252636;
+}
+
+.adm-overlay[data-theme="dark"] .adm-matrix-trigger {
+  color: #94a3b8;
+}
+
+.adm-overlay[data-theme="dark"] .adm-report-toolbar input[type="date"],
+.adm-overlay[data-theme="dark"] .adm-report-toolbar select {
+  background: #252636;
+  border-color: #2a2b3d;
+  color: #e2e8f0;
+  color-scheme: dark;
+}
+
+.adm-overlay[data-theme="dark"] .adm-rpt-table {
+  border-color: #2a2b3d;
+}
+
+.adm-overlay[data-theme="dark"] .adm-rpt-th {
+  background: #252636;
+  color: #64748b;
+  border-color: #2a2b3d;
+}
+
+.adm-overlay[data-theme="dark"] .adm-rpt-cell {
+  border-color: #2a2b3d;
+  color: #cbd5e1;
+}
+
+.adm-overlay[data-theme="dark"] .adm-rpt-row:nth-child(even) .adm-rpt-cell {
+  background: #252636;
+}
+
+.adm-overlay[data-theme="dark"] .adm-annot-card {
+  background: #252636;
+  border-color: #2a2b3d;
+}
+
+.adm-overlay[data-theme="dark"] .adm-annot-card:hover {
+  border-color: #4c1d95;
+}
+
+.adm-overlay[data-theme="dark"] .adm-annot-card--archived {
+  background: #1e1f2e;
+}
+
+.adm-overlay[data-theme="dark"] .adm-annot-card-text {
+  color: #cbd5e1;
+}
+
+.adm-overlay[data-theme="dark"] .adm-annot-author {
+  color: #e2e8f0;
+}
+
+.adm-overlay[data-theme="dark"] .adm-annot-date {
+  color: #64748b;
+}
+
+.adm-overlay[data-theme="dark"] .adm-annot-btn {
+  border-color: #2a2b3d;
+  color: #94a3b8;
+}
+
+.adm-overlay[data-theme="dark"] .adm-annot-btn:hover {
+  background: #2a2b3d;
+}
+
+.adm-overlay[data-theme="dark"] .adm-annot-archived-summary {
+  color: #64748b;
+}
+
+.adm-overlay[data-theme="dark"] .adm-annot-form {
+  background: #252636;
+  border-color: #2a2b3d;
+}
+
+.adm-overlay[data-theme="dark"] .adm-annot-form textarea,
+.adm-overlay[data-theme="dark"] .adm-annot-form select {
+  background: #1e1f2e;
+  border-color: #2a2b3d;
+  color: #e2e8f0;
+}
+
+.adm-overlay[data-theme="dark"] .adm-annot-toolbar {
+  border-color: #2a2b3d;
+}
+
+.adm-overlay[data-theme="dark"] .adm-annot-empty {
+  color: #64748b;
+}
+
 /* =====================================================================
    Bulk Action Picker Modal (abm-*)
    ===================================================================== */
@@ -101221,8 +101555,39 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
 .atbl-th--sel { width: 28px; text-align: center; }
 .atbl-th--num { width: 48px; text-align: center; }
 .atbl-th--date { width: 90px; }
+.atbl-th--device { width: 130px; }
 .atbl-th--actions { width: 100px; }
 
+.atbl-th--sortable {
+  cursor: pointer;
+  gap: 4px;
+}
+
+.atbl-th--sortable:hover {
+  color: var(--alarms-text-primary);
+  background: var(--alarms-card-hover);
+}
+
+.atbl-th--sortable.is-sorted {
+  color: var(--alarms-primary);
+  background: var(--alarms-primary-light);
+}
+
+.atbl-sort-icon {
+  display: inline-block;
+  font-size: 8px;
+  opacity: 0.35;
+  margin-left: 3px;
+  vertical-align: middle;
+  font-style: normal;
+  line-height: 1;
+}
+
+.atbl-sort-icon.is-active {
+  opacity: 1;
+  color: var(--alarms-primary);
+}
+
 .atbl-row {
   border-bottom: 1px solid var(--alarms-border-light);
   cursor: pointer;
@@ -101250,6 +101615,14 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   font-weight: 600;
 }
 
+.atbl-cell--device {
+  max-width: 130px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 11px;
+}
+
 .atbl-cell--customer {
   max-width: 120px;
   white-space: nowrap;
@@ -102689,21 +103062,20 @@ function buildTimeline(alarm) {
   const lastMs = new Date(alarm.lastOccurrence).getTime();
   const interval = count > 1 ? (lastMs - firstMs) / (count - 1) : 0;
   const deviceTokens = alarm.source ? alarm.source.split(/[,;]+/).map((s) => s.trim()).filter(Boolean) : [];
-  const deviceLabel = deviceTokens.length === 1 ? `<div class="adm-timeline-device">${escHtml(deviceTokens[0])}</div>` : "";
-  const valuePill = alarm.triggerValue != null ? `<span class="adm-timeline-value-pill">${escHtml(String(alarm.triggerValue))}</span>` : "";
+  const deviceSpan = deviceTokens.length === 1 ? `<span class="adm-timeline-sep">|</span><span class="adm-timeline-device">${escHtml(deviceTokens[0])}</span>` : "";
+  const valuePillHtml = alarm.triggerValue != null ? `<span class="adm-timeline-value-pill">${escHtml(String(alarm.triggerValue))}</span>` : "";
   function occItem(n, tsMs, meta, extraClass = "") {
+    const isLatest = extraClass.includes("is-last") || extraClass.includes("is-single");
+    const isEstimated = meta === "Estimado";
+    const timeStr = (isEstimated ? "~" : "") + fmt(tsMs);
     return `
       <div class="adm-timeline-item ${extraClass}">
         <div class="adm-timeline-dot"></div>
-        <div class="adm-timeline-content">
-          <div class="adm-timeline-row">
-            <div class="adm-timeline-num">Ocorr\xEAncia #${n}</div>
-            ${valuePill}
-          </div>
-          <div class="adm-timeline-time">${fmt(tsMs)}</div>
-          ${meta ? `<div class="adm-timeline-meta">${meta}</div>` : ""}
-          ${deviceLabel}
-        </div>
+        <span class="adm-timeline-num">#${n}</span>
+        <span class="adm-timeline-sep">|</span>
+        <span class="adm-timeline-time">${timeStr}</span>
+        ${deviceSpan}
+        ${isLatest ? valuePillHtml : ""}
       </div>`;
   }
   const MAX_SHOWN = 30;
@@ -102847,148 +103219,164 @@ var DEV_COLORS = [
   "#9333ea",
   "#65a30d"
 ];
-function chartGrid(cW, cH, maxVal) {
-  return [0, 0.25, 0.5, 0.75, 1].map((pct) => {
-    const y = (cH * pct).toFixed(1);
-    const val = Math.round(maxVal * (1 - pct));
-    return `<line x1="0" y1="${y}" x2="${cW}" y2="${y}" stroke="#f3f4f6" stroke-width="1"/>
-        <text x="-5" y="${(cH * pct + 3).toFixed(1)}" text-anchor="end" font-size="9" fill="#9ca3af">${val}</text>`;
-  }).join("");
-}
-function chartXLabels(buckets, cW, cH) {
-  const step = buckets.length > 12 ? Math.ceil(buckets.length / 12) : 1;
-  return buckets.map((b, i) => {
-    if (i % step !== 0 && i !== buckets.length - 1) return "";
-    const x = ((i + 0.5) * cW / buckets.length).toFixed(1);
-    return `<text x="${x}" y="${(cH + 18).toFixed(1)}" text-anchor="middle" font-size="8" fill="#9ca3af">${b.label}</text>`;
-  }).join("");
+function getChartLib() {
+  return window.Chart ?? null;
+}
+function createMainChart(canvas, buckets, devices, chartType, vizMode, singleColor) {
+  const Chart2 = getChartLib();
+  if (!Chart2) return null;
+  const labels = buckets.map((b) => b.label);
+  const isMulti = vizMode === "separate" && devices.length > 1;
+  const datasets = isMulti ? devices.map((dev, di) => {
+    const color = DEV_COLORS[di % DEV_COLORS.length];
+    return {
+      label: dev,
+      data: buckets.map((b) => b.byDevice[dev] ?? 0),
+      backgroundColor: chartType === "bar" ? color + "bb" : color + "22",
+      borderColor: color,
+      borderWidth: chartType === "line" ? 2 : 1,
+      borderRadius: chartType === "bar" ? 3 : 0,
+      tension: chartType === "line" ? 0.4 : 0,
+      fill: chartType === "line",
+      pointRadius: chartType === "line" ? 3 : 0,
+      pointHoverRadius: 6
+    };
+  }) : [{
+    label: "Ocorr\xEAncias",
+    data: buckets.map((b) => b.total),
+    backgroundColor: chartType === "bar" ? singleColor + "bb" : singleColor + "22",
+    borderColor: singleColor,
+    borderWidth: chartType === "line" ? 2.5 : 1,
+    borderRadius: chartType === "bar" ? 3 : 0,
+    tension: chartType === "line" ? 0.4 : 0,
+    fill: chartType === "line",
+    pointRadius: chartType === "line" ? 3 : 0,
+    pointHoverRadius: 6
+  }];
+  return new Chart2(canvas, {
+    type: chartType,
+    data: { labels, datasets },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: { duration: 250 },
+      plugins: {
+        legend: {
+          display: isMulti,
+          position: "bottom",
+          labels: { font: { size: 10 }, boxWidth: 10, padding: 10 }
+        },
+        tooltip: {
+          callbacks: {
+            title: (items) => `Per\xEDodo: ${items[0]?.label ?? ""}`,
+            label: (item) => ` ${item.dataset.label}: ${item.parsed.y} ocorr\xEAncias`
+          }
+        }
+      },
+      scales: {
+        x: {
+          grid: { color: "#f3f4f6" },
+          ticks: { font: { size: 9 }, color: "#9ca3af", maxRotation: 45 }
+        },
+        y: {
+          beginAtZero: true,
+          grid: { color: "#f3f4f6" },
+          ticks: { font: { size: 9 }, color: "#9ca3af", precision: 0 }
+        }
+      }
+    }
+  });
 }
-function chartLegend(devices) {
-  return `<div class="adm-chart-legend">${devices.map(
-    (dev, di) => `<span class="adm-chart-legend-item">
-           <span class="adm-chart-legend-dot" style="background:${DEV_COLORS[di % DEV_COLORS.length]}"></span>
-           ${escHtml(dev)}
-         </span>`
-  ).join("")}</div>`;
-}
-function buildBarChartHtml(buckets, devices, singleColor, vizMode) {
-  const W = 560;
-  const H = 160;
-  const PAD = { top: 14, right: 8, bottom: 30, left: 32 };
-  const cW = W - PAD.left - PAD.right;
-  const cH = H - PAD.top - PAD.bottom;
-  const multi = vizMode === "separate" && devices.length > 1;
-  const maxVal = Math.max(...buckets.map((b) => b.total), 1);
-  const barSlot = cW / buckets.length;
-  const barW = Math.max(3, Math.min(28, barSlot * 0.65));
-  const bars = buckets.map((b, i) => {
-    const groupCenterX = i * barSlot + barSlot / 2;
-    let rects;
-    let labelX;
-    if (multi) {
-      const subW = Math.max(2, Math.min(barSlot * 0.82 / devices.length, 18));
-      const gap = Math.min(1.5, subW * 0.18);
-      const groupW = devices.length * subW + (devices.length - 1) * gap;
-      const gx0 = groupCenterX - groupW / 2;
-      rects = devices.map((dev, di) => {
-        const v = b.byDevice[dev] ?? 0;
-        const bh = Math.max(0, v / maxVal * cH);
-        const bx = gx0 + di * (subW + gap);
-        return `<rect x="${bx.toFixed(1)}" y="${(cH - bh).toFixed(1)}" width="${subW.toFixed(1)}" height="${bh.toFixed(1)}" fill="${DEV_COLORS[di % DEV_COLORS.length]}" rx="1" opacity="0.88"/>`;
-      }).join("");
-      labelX = groupCenterX;
-    } else {
-      const bh = Math.max(0, b.total / maxVal * cH);
-      const bx = groupCenterX - barW / 2;
-      rects = `<rect x="${bx.toFixed(1)}" y="${(cH - bh).toFixed(1)}" width="${barW.toFixed(1)}" height="${bh.toFixed(1)}" fill="${singleColor}" rx="1.5" opacity="0.85"/>`;
-      labelX = groupCenterX;
+function createDowChart(canvas, vals) {
+  const Chart2 = getChartLib();
+  if (!Chart2) return null;
+  return new Chart2(canvas, {
+    type: "bar",
+    data: {
+      labels: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "S\xE1b"],
+      datasets: [{
+        label: "Ocorr\xEAncias",
+        data: vals,
+        backgroundColor: "#8b5cf6bb",
+        borderColor: "#7c3aed",
+        borderWidth: 1,
+        borderRadius: 3
+      }]
+    },
+    options: {
+      indexAxis: "y",
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: { duration: 250 },
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          callbacks: {
+            label: (item) => ` ${item.parsed.x} ocorr\xEAncias`
+          }
+        }
+      },
+      scales: {
+        x: {
+          beginAtZero: true,
+          grid: { color: "#f3f4f6" },
+          ticks: { font: { size: 9 }, color: "#9ca3af", precision: 0 }
+        },
+        y: {
+          grid: { display: false },
+          ticks: { font: { size: 10 }, color: "#374151" }
+        }
+      }
     }
-    return rects + `<text x="${labelX.toFixed(1)}" y="${(cH + 18).toFixed(1)}" text-anchor="middle" font-size="8" fill="#9ca3af">${b.label}</text>`;
-  }).join("");
-  const trendPts = buckets.map((b, i) => `${((i + 0.5) * barSlot).toFixed(1)},${(cH - b.total / maxVal * cH).toFixed(1)}`).join(" ");
-  const svg = `<svg viewBox="0 0 ${W} ${H}" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:auto;display:block">
-    <g transform="translate(${PAD.left},${PAD.top})">
-      ${chartGrid(cW, cH, maxVal)}
-      ${bars}
-      <polyline points="${trendPts}" fill="none" stroke="#1e293b" stroke-width="1.5" stroke-linejoin="round" opacity="0.35"/>
-    </g>
-  </svg>`;
-  return svg + (multi ? chartLegend(devices) : "");
-}
-function buildLineChartHtml(buckets, devices, singleColor, vizMode) {
-  const W = 560;
-  const H = 160;
-  const PAD = { top: 14, right: 8, bottom: 30, left: 32 };
-  const cW = W - PAD.left - PAD.right;
-  const cH = H - PAD.top - PAD.bottom;
-  const multi = vizMode === "separate" && devices.length > 1;
-  const maxVal = Math.max(...buckets.map((b) => b.total), 1);
-  const xOf = (i) => ((i + 0.5) * cW / buckets.length).toFixed(1);
-  const yOf = (v) => (cH - v / maxVal * cH).toFixed(1);
-  let paths = "";
-  if (multi) {
-    for (let di = 0; di < devices.length; di++) {
-      const color = DEV_COLORS[di % DEV_COLORS.length];
-      const pts = buckets.map((b, i) => `${xOf(i)},${yOf(b.byDevice[devices[di]] ?? 0)}`);
-      const areaD = `M ${xOf(0)},${cH} L ${pts.join(" L ")} L ${xOf(buckets.length - 1)},${cH} Z`;
-      paths += `<path d="${areaD}" fill="${color}" opacity="0.1"/>`;
-      paths += `<polyline points="${pts.join(" ")}" fill="none" stroke="${color}" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/>`;
-      buckets.forEach((b, i) => {
-        paths += `<circle cx="${xOf(i)}" cy="${yOf(b.byDevice[devices[di]] ?? 0)}" r="3" fill="${color}" stroke="#fff" stroke-width="1.5"/>`;
-      });
+  });
+}
+function createHodChart(canvas, vals) {
+  const Chart2 = getChartLib();
+  if (!Chart2) return null;
+  return new Chart2(canvas, {
+    type: "bar",
+    data: {
+      labels: Array.from({ length: 24 }, (_, h) => `${h}h`),
+      datasets: [{
+        label: "Ocorr\xEAncias",
+        data: vals,
+        backgroundColor: "#3b82f6bb",
+        borderColor: "#2563eb",
+        borderWidth: 1,
+        borderRadius: 2
+      }]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: { duration: 250 },
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          callbacks: {
+            title: (items) => `${items[0]?.label}`,
+            label: (item) => ` ${item.parsed.y} ocorr\xEAncias`
+          }
+        }
+      },
+      scales: {
+        x: {
+          grid: { display: false },
+          ticks: { font: { size: 9 }, color: "#9ca3af" }
+        },
+        y: {
+          beginAtZero: true,
+          grid: { color: "#f3f4f6" },
+          ticks: { font: { size: 9 }, color: "#9ca3af", precision: 0 }
+        }
+      }
     }
-  } else {
-    const pts = buckets.map((b, i) => `${xOf(i)},${yOf(b.total)}`);
-    const areaD = `M ${xOf(0)},${cH} L ${pts.join(" L ")} L ${xOf(buckets.length - 1)},${cH} Z`;
-    paths += `<path d="${areaD}" fill="${singleColor}" opacity="0.12"/>`;
-    paths += `<polyline points="${pts.join(" ")}" fill="none" stroke="${singleColor}" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"/>`;
-    buckets.forEach((b, i) => {
-      paths += `<circle cx="${xOf(i)}" cy="${yOf(b.total)}" r="3.5" fill="${singleColor}" stroke="#fff" stroke-width="1.5"/>`;
-    });
-  }
-  const svg = `<svg viewBox="0 0 ${W} ${H}" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:auto;display:block">
-    <g transform="translate(${PAD.left},${PAD.top})">
-      ${chartGrid(cW, cH, maxVal)}
-      ${chartXLabels(buckets, cW, cH)}
-      ${paths}
-    </g>
-  </svg>`;
-  return svg + (multi ? chartLegend(devices) : "");
-}
-function buildDowChart(vals) {
-  const LABELS = ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "S\xE1b"];
-  const maxV = Math.max(...vals, 1);
-  const barMaxW = 200;
-  const rows = LABELS.map((lbl, i) => {
-    const pct = vals[i] / maxV;
-    const w = Math.round(pct * barMaxW);
-    const opacity = 0.3 + pct * 0.7;
-    return `<div class="adm-dow-row">
-      <span class="adm-dow-label">${lbl}</span>
-      <div class="adm-dow-track">
-        <div class="adm-dow-bar" style="width:${w}px;opacity:${opacity.toFixed(2)}"></div>
-      </div>
-      <span class="adm-dow-val">${vals[i]}</span>
-    </div>`;
-  }).join("");
-  return `<div class="adm-dow-chart">${rows}</div>`;
-}
-function buildHodChart(vals) {
-  const maxV = Math.max(...vals, 1);
-  const cells = vals.map((v, h) => {
-    const pct = v / maxV;
-    const opacity = 0.08 + pct * 0.92;
-    return `<div class="adm-hod-cell" title="${h}:00 \u2014 ${v} ocorr\xEAncias" style="opacity:${opacity.toFixed(2)}">
-      <div class="adm-hod-bar" style="height:${Math.max(4, Math.round(pct * 40))}px"></div>
-      <span class="adm-hod-label">${h}</span>
-    </div>`;
-  }).join("");
-  return `<div class="adm-hod-chart">${cells}</div>`;
+  });
 }
 function parseDevices(source) {
   return source.split(/[,;]+/).map((s) => s.trim()).filter(Boolean);
 }
-function openAlarmDetailsModal(alarm) {
+function openAlarmDetailsModal(alarm, themeMode = "light") {
   const sev = SEVERITY_CONFIG[alarm.severity];
   const st = STATE_CONFIG[alarm.state];
   const count = alarm.occurrenceCount || 1;
@@ -103014,20 +103402,14 @@ function openAlarmDetailsModal(alarm) {
       </div>`
   ).join("");
   const initialPeriod = durMs < 864e5 ? "hora" : durMs < 7 * 864e5 ? "dia" : durMs < 30 * 864e5 ? "semana" : "mes";
-  const buckets = generateBuckets(alarm, devices, initialPeriod);
   const dowVals = generateDowDistribution(alarm);
   const hodVals = generateHodDistribution(alarm);
   const chartSingleColor = sev.text || "#7c3aed";
-  const barTotalHtml = buildBarChartHtml(buckets, devices, chartSingleColor, "total");
-  const barSepHtml = devices.length > 1 ? buildBarChartHtml(buckets, devices, chartSingleColor, "separate") : barTotalHtml;
-  const lineTotalHtml = buildLineChartHtml(buckets, devices, chartSingleColor, "total");
-  const lineSepHtml = devices.length > 1 ? buildLineChartHtml(buckets, devices, chartSingleColor, "separate") : lineTotalHtml;
-  const dowChartHtml = buildDowChart(dowVals);
-  const hodChartHtml = buildHodChart(hodVals);
   const annotCount = getActiveAnnotationCount(alarm.id);
   const sourceDisplay = deviceCount > 1 ? `${deviceCount} dispositivos` : escHtml(alarm.source);
   const overlay = document.createElement("div");
   overlay.className = "adm-overlay";
+  overlay.setAttribute("data-theme", themeMode);
   overlay.innerHTML = `
     <div class="adm-drawer" role="dialog" aria-modal="true" aria-label="Detalhes do alarme">
 
@@ -103035,11 +103417,23 @@ function openAlarmDetailsModal(alarm) {
       <div class="adm-header">
         <div class="adm-header-top">
           <div class="adm-title" title="${escHtml(alarm.title)}">${escHtml(alarm.title)}</div>
-          <button class="adm-close" id="admClose" title="Fechar (Esc)">
-            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5">
-              <path d="M18 6L6 18M6 6l12 12"/>
-            </svg>
-          </button>
+          <div class="adm-header-actions">
+            <button class="adm-header-btn" id="admMaximize" title="Maximizar">
+              <svg class="adm-icon-expand" viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/>
+                <line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/>
+              </svg>
+              <svg class="adm-icon-compress" viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none">
+                <polyline points="4 14 10 14 10 20"/><polyline points="20 10 14 10 14 4"/>
+                <line x1="10" y1="14" x2="3" y2="21"/><line x1="21" y1="3" x2="14" y2="10"/>
+              </svg>
+            </button>
+            <button class="adm-header-btn adm-close" id="admClose" title="Fechar (Esc)">
+              <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5">
+                <path d="M18 6L6 18M6 6l12 12"/>
+              </svg>
+            </button>
+          </div>
         </div>
         <div class="adm-badges">
           <span class="adm-badge-severity" style="background:${sev.bg};color:${sev.text}">${sev.icon} ${sev.label}</span>
@@ -103151,7 +103545,7 @@ function openAlarmDetailsModal(alarm) {
             <div class="adm-section-title">Mapa ocorr\xEAncias \xD7 dispositivos</div>
             <div class="adm-matrix">
               <div class="adm-matrix-header">
-                <span>ID</span><span>Timestamp</span><span>Dispositivos</span>
+                <span>ID</span><span>Timestamp</span><span>Dispositivos</span><span>Trigger</span>
               </div>
               ${buildOccurrenceMatrix(alarm, devices)}
             </div>
@@ -103218,21 +103612,18 @@ function openAlarmDetailsModal(alarm) {
           <div class="adm-section">
             <div class="adm-section-title">Tend\xEAncia de ocorr\xEAncias no per\xEDodo</div>
             <div class="adm-chart-wrapper">
-              <div class="adm-chart-variant is-active" data-chart-type="bar" data-viz-mode="total">${barTotalHtml}</div>
-              <div class="adm-chart-variant" data-chart-type="bar" data-viz-mode="separate">${barSepHtml}</div>
-              <div class="adm-chart-variant" data-chart-type="line" data-viz-mode="total">${lineTotalHtml}</div>
-              <div class="adm-chart-variant" data-chart-type="line" data-viz-mode="separate">${lineSepHtml}</div>
+              <canvas id="admMainChart" class="adm-chart-canvas"></canvas>
             </div>
           </div>
 
           <div class="adm-chart-secondary-grid">
             <div class="adm-section">
               <div class="adm-section-title">Por dia da semana</div>
-              ${dowChartHtml}
+              <div class="adm-chart-canvas-wrap adm-chart-canvas-wrap--dow"><canvas id="admDowChart"></canvas></div>
             </div>
             <div class="adm-section">
               <div class="adm-section-title">Por hora do dia</div>
-              ${hodChartHtml}
+              <div class="adm-chart-canvas-wrap adm-chart-canvas-wrap--hod"><canvas id="admHodChart"></canvas></div>
             </div>
           </div>
         </div>
@@ -103256,58 +103647,58 @@ function openAlarmDetailsModal(alarm) {
       overlay.querySelector(`.adm-panel[data-panel="${panel}"]`)?.classList.add("is-active");
     });
   });
+  const chartInstances = [];
   const graficoPanel = overlay.querySelector('.adm-panel[data-panel="grafico"]');
   if (graficoPanel) {
     let activeChartType = "bar";
     let activeVizMode = "total";
     let activePeriod = initialPeriod;
-    const updateChartVariant = () => {
-      graficoPanel.querySelectorAll(".adm-chart-variant").forEach((el) => {
-        const show = el.dataset.chartType === activeChartType && el.dataset.vizMode === activeVizMode;
-        el.classList.toggle("is-active", show);
-      });
+    const buildMain = () => {
+      const nb = generateBuckets(alarm, devices, activePeriod);
+      const canvas = graficoPanel.querySelector("#admMainChart");
+      if (!canvas) return;
+      if (chartInstances[0]) {
+        chartInstances[0].destroy();
+        chartInstances[0] = null;
+      }
+      chartInstances[0] = createMainChart(canvas, nb, devices, activeChartType, activeVizMode, chartSingleColor);
     };
-    const rebuildCharts = (period) => {
-      const nb = generateBuckets(alarm, devices, period);
-      const bT = buildBarChartHtml(nb, devices, chartSingleColor, "total");
-      const bS = devices.length > 1 ? buildBarChartHtml(nb, devices, chartSingleColor, "separate") : bT;
-      const lT = buildLineChartHtml(nb, devices, chartSingleColor, "total");
-      const lS = devices.length > 1 ? buildLineChartHtml(nb, devices, chartSingleColor, "separate") : lT;
-      const map = {
-        "bar-total": bT,
-        "bar-separate": bS,
-        "line-total": lT,
-        "line-separate": lS
-      };
-      graficoPanel.querySelectorAll(".adm-chart-variant").forEach((el) => {
-        el.innerHTML = map[`${el.dataset.chartType}-${el.dataset.vizMode}`] ?? "";
-      });
+    const initSecondary = () => {
+      const dowCanvas = graficoPanel.querySelector("#admDowChart");
+      if (dowCanvas && !chartInstances[1]) chartInstances[1] = createDowChart(dowCanvas, dowVals);
+      const hodCanvas = graficoPanel.querySelector("#admHodChart");
+      if (hodCanvas && !chartInstances[2]) chartInstances[2] = createHodChart(hodCanvas, hodVals);
     };
-    graficoPanel.querySelectorAll("[data-chart-type]").forEach((btn) => {
+    graficoPanel.querySelectorAll("button[data-chart-type]").forEach((btn) => {
       btn.addEventListener("click", () => {
         activeChartType = btn.dataset.chartType;
-        graficoPanel.querySelectorAll("[data-chart-type]").forEach((b) => b.classList.remove("is-active"));
+        graficoPanel.querySelectorAll("button[data-chart-type]").forEach((b) => b.classList.remove("is-active"));
         btn.classList.add("is-active");
-        updateChartVariant();
+        buildMain();
       });
     });
-    graficoPanel.querySelectorAll("[data-viz-mode]").forEach((btn) => {
+    graficoPanel.querySelectorAll("button[data-viz-mode]").forEach((btn) => {
       btn.addEventListener("click", () => {
         activeVizMode = btn.dataset.vizMode;
-        graficoPanel.querySelectorAll("[data-viz-mode]").forEach((b) => b.classList.remove("is-active"));
+        graficoPanel.querySelectorAll("button[data-viz-mode]").forEach((b) => b.classList.remove("is-active"));
         btn.classList.add("is-active");
-        updateChartVariant();
+        buildMain();
       });
     });
-    graficoPanel.querySelectorAll("[data-period]").forEach((btn) => {
+    graficoPanel.querySelectorAll("button[data-period]").forEach((btn) => {
       btn.addEventListener("click", () => {
         activePeriod = btn.dataset.period;
-        graficoPanel.querySelectorAll("[data-period]").forEach((b) => b.classList.remove("is-active"));
+        graficoPanel.querySelectorAll("button[data-period]").forEach((b) => b.classList.remove("is-active"));
         btn.classList.add("is-active");
-        rebuildCharts(activePeriod);
-        updateChartVariant();
+        buildMain();
       });
     });
+    overlay.querySelectorAll('.adm-tab[data-panel="grafico"]').forEach((tabBtn) => {
+      tabBtn.addEventListener("click", () => setTimeout(() => {
+        buildMain();
+        initSecondary();
+      }, 30));
+    });
   }
   const rptPanel = overlay.querySelector('.adm-panel[data-panel="relatorio"]');
   if (rptPanel) {
@@ -103331,14 +103722,17 @@ function openAlarmDetailsModal(alarm) {
       const rptAlarm = { ...alarm, firstOccurrence: new Date(startMs).toISOString(), lastOccurrence: new Date(endMs).toISOString() };
       const nb = generateBuckets(rptAlarm, devices, rptPeriod);
       const totalOcc = nb.reduce((s, b) => s + b.total, 0);
-      const csvRows = [["Per\xEDodo", "Ocorr\xEAncias", "Dispositivos"]];
-      const tableRows = nb.map((b) => {
+      const csvRows = [["Per\xEDodo", "Ocorr\xEAncias", "Dispositivos", "Trigger"]];
+      const tableRows = nb.map((b, bIdx) => {
         const devList = devices.length === 1 ? devices[0] : devices.filter((d) => (b.byDevice[d] ?? 0) > 0).join(", ") || "-";
-        csvRows.push([b.label, String(b.total), devList]);
+        const isLastBucket = bIdx === nb.length - 1;
+        const trigStr = isLastBucket && alarm.triggerValue != null ? String(alarm.triggerValue) : "\u2014";
+        csvRows.push([b.label, String(b.total), devList, trigStr]);
         return `<tr>
           <td class="adm-rpt-cell">${b.label}</td>
           <td class="adm-rpt-cell adm-rpt-cell--num">${b.total}</td>
           <td class="adm-rpt-cell adm-rpt-cell--dev">${escHtml(devList)}</td>
+          <td class="adm-rpt-cell adm-rpt-cell--num">${escHtml(trigStr)}</td>
         </tr>`;
       }).join("");
       if (!grid) return;
@@ -103350,6 +103744,7 @@ function openAlarmDetailsModal(alarm) {
                 <th class="adm-rpt-th">Per\xEDodo</th>
                 <th class="adm-rpt-th adm-rpt-th--num">Ocorr\xEAncias</th>
                 <th class="adm-rpt-th">Dispositivos</th>
+                <th class="adm-rpt-th adm-rpt-th--num">Trigger</th>
               </tr>
             </thead>
             <tbody>${tableRows}</tbody>
@@ -103358,6 +103753,7 @@ function openAlarmDetailsModal(alarm) {
                 <td class="adm-rpt-cell adm-rpt-cell--total">Total</td>
                 <td class="adm-rpt-cell adm-rpt-cell--num adm-rpt-cell--total">${totalOcc}</td>
                 <td class="adm-rpt-cell adm-rpt-cell--total">${deviceCount} dispositivo${deviceCount !== 1 ? "s" : ""}</td>
+                <td class="adm-rpt-cell adm-rpt-cell--total">\u2014</td>
               </tr>
             </tfoot>
           </table>
@@ -103428,9 +103824,27 @@ function openAlarmDetailsModal(alarm) {
       }
     });
   }
+  const drawer = overlay.querySelector(".adm-drawer");
+  const maximizeBtn = overlay.querySelector("#admMaximize");
+  const iconExpand = maximizeBtn?.querySelector(".adm-icon-expand");
+  const iconCompress = maximizeBtn?.querySelector(".adm-icon-compress");
+  maximizeBtn?.addEventListener("click", () => {
+    const isMax = drawer?.classList.toggle("adm-drawer--maximized");
+    if (iconExpand) iconExpand.style.display = isMax ? "none" : "";
+    if (iconCompress) iconCompress.style.display = isMax ? "" : "none";
+    maximizeBtn.title = isMax ? "Restaurar (Esc)" : "Maximizar";
+  });
   const closeModal2 = () => {
     overlay.classList.remove("adm-overlay--visible");
-    setTimeout(() => overlay.remove(), 300);
+    setTimeout(() => {
+      overlay.remove();
+      chartInstances.forEach((c) => {
+        try {
+          c?.destroy();
+        } catch (_) {
+        }
+      });
+    }, 300);
     document.removeEventListener("keydown", onKey);
   };
   const onKey = (e) => {
@@ -103465,10 +103879,12 @@ function buildOccurrenceMatrix(alarm, devices) {
     const devIndex = (item.n - 1) % devices.length;
     const rowDevices = devices.length === 1 ? [devices[0]] : [devices[devIndex]];
     const chipsHtml = rowDevices.map(deviceChip).join("");
+    const trigVal = item.n === count && alarm.triggerValue != null ? escHtml(String(alarm.triggerValue)) : "\u2014";
     return `<div class="adm-matrix-row">
         <span class="adm-matrix-n">#${item.n}</span>
         <span class="adm-matrix-ts">${fmt(item.tsMs)}${item.estimated ? '<sup title="Estimado">~</sup>' : ""}</span>
         <span class="adm-matrix-devices">${chipsHtml}</span>
+        <span class="adm-matrix-trigger">${trigVal}</span>
       </div>`;
   }).join("");
 }
@@ -103487,6 +103903,9 @@ var AlarmsNotificationsPanelView = class {
   viewMode = "card";
   // Group mode: 'consolidado' (default) groups same-title alarms; 'separado' one row per device
   groupMode = "consolidado";
+  // Table sort state
+  sortCol = "";
+  sortDir = "asc";
   constructor(params, controller) {
     this.params = params;
     this.controller = controller;
@@ -103686,6 +104105,18 @@ var AlarmsNotificationsPanelView = class {
       const state6 = this.controller.getState();
       this.renderListContent(state6);
     });
+    this.root.addEventListener("click", (e) => {
+      const th = e.target.closest("[data-sort-col]");
+      if (!th) return;
+      const col = th.getAttribute("data-sort-col");
+      if (this.sortCol === col) {
+        this.sortDir = this.sortDir === "asc" ? "desc" : "asc";
+      } else {
+        this.sortCol = col;
+        this.sortDir = "asc";
+      }
+      this.renderListContent(this.controller.getState());
+    });
     this.root.addEventListener("click", (e) => {
       if (e.target.closest("#exportBtn")) this.openExportModal();
     });
@@ -103808,12 +104239,16 @@ var AlarmsNotificationsPanelView = class {
     }
     if (emptyState) emptyState.style.display = "none";
     this.groupedAlarms = this.groupMode === "consolidado" ? this.groupAlarmsByTitle(state6.filteredAlarms) : this.explodeAlarmsByDevice(state6.filteredAlarms);
+    const isSeparado = this.groupMode === "separado";
     if (this.viewMode === "list") {
       grid.className = "alarms-table-container";
-      grid.innerHTML = this.renderAlarmsTable(this.groupedAlarms);
+      grid.innerHTML = this.renderAlarmsTable(this.groupedAlarms, isSeparado);
     } else {
+      const cards = isSeparado ? [...this.groupedAlarms].sort(
+        (a, b) => (a.source || "").localeCompare(b.source || "", "pt-BR", { sensitivity: "base" })
+      ) : this.groupedAlarms;
       grid.className = "alarms-grid";
-      this.groupedAlarms.forEach((alarm) => {
+      cards.forEach((alarm) => {
         const card = createAlarmCardElement(alarm, {
           onCardClick: (a) => this.handleAlarmClick(a),
           onAcknowledge: (id) => this.openAlarmActionModal("acknowledge", id),
@@ -103822,7 +104257,7 @@ var AlarmsNotificationsPanelView = class {
           themeMode: state6.themeMode,
           showCustomerName: this.params.showCustomerName ?? true,
           selected: this.selectedTitles.has(alarm.title),
-          showDeviceBadge: this.groupMode === "separado"
+          showDeviceBadge: isSeparado
         });
         grid.appendChild(card);
       });
@@ -103985,7 +104420,7 @@ var AlarmsNotificationsPanelView = class {
   // =====================================================================
   // Table View
   // =====================================================================
-  renderAlarmsTable(alarms) {
+  renderAlarmsTable(alarms, showDevice = false) {
     const showCustomer = this.params.showCustomerName ?? true;
     const fmtDt3 = (iso) => {
       if (!iso) return "-";
@@ -103993,6 +104428,38 @@ var AlarmsNotificationsPanelView = class {
       if (isNaN(d.getTime())) return "-";
       return String(d.getDate()).padStart(2, "0") + "/" + String(d.getMonth() + 1).padStart(2, "0") + " " + String(d.getHours()).padStart(2, "0") + ":" + String(d.getMinutes()).padStart(2, "0");
     };
+    const SEVERITY_ORDER3 = { CRITICAL: 0, HIGH: 1, MEDIUM: 2, LOW: 3, INFO: 4 };
+    const STATE_ORDER2 = { OPEN: 0, ESCALATED: 1, ACK: 2, SNOOZED: 3, CLOSED: 4 };
+    if (this.sortCol) {
+      const dir = this.sortDir === "asc" ? 1 : -1;
+      alarms = [...alarms].sort((a, b) => {
+        switch (this.sortCol) {
+          case "title":
+            return dir * (a.title || "").localeCompare(b.title || "", "pt-BR", { sensitivity: "base" });
+          case "device":
+            return dir * (a.source || "").localeCompare(b.source || "", "pt-BR", { sensitivity: "base" });
+          case "severity":
+            return dir * ((SEVERITY_ORDER3[a.severity] ?? 9) - (SEVERITY_ORDER3[b.severity] ?? 9));
+          case "state":
+            return dir * ((STATE_ORDER2[a.state] ?? 9) - (STATE_ORDER2[b.state] ?? 9));
+          case "customer":
+            return dir * (a.customerName || "").localeCompare(b.customerName || "", "pt-BR", { sensitivity: "base" });
+          case "count":
+            return dir * ((a.occurrenceCount || 1) - (b.occurrenceCount || 1));
+          case "first":
+            return dir * (new Date(a.firstOccurrence ?? 0).getTime() - new Date(b.firstOccurrence ?? 0).getTime());
+          case "last":
+            return dir * (new Date(a.lastOccurrence ?? 0).getTime() - new Date(b.lastOccurrence ?? 0).getTime());
+          default:
+            return 0;
+        }
+      });
+    }
+    const th = (label, col, extraClass = "") => {
+      const active = this.sortCol === col;
+      const icon = active ? `<span class="atbl-sort-icon is-active">${this.sortDir === "asc" ? "\u25B2" : "\u25BC"}</span>` : `<span class="atbl-sort-icon">\u21C5</span>`;
+      return `<th class="atbl-th atbl-th--sortable${extraClass ? " " + extraClass : ""}${active ? " is-sorted" : ""}" data-sort-col="${col}">${label}${icon}</th>`;
+    };
     const rows = alarms.map((alarm) => {
       const sev = SEVERITY_CONFIG[alarm.severity];
       const st = STATE_CONFIG[alarm.state];
@@ -104013,6 +104480,7 @@ var AlarmsNotificationsPanelView = class {
             <input type="checkbox" class="alarm-card-select" data-alarm-id="${alarm.id}" data-alarm-title="${escTitle}"${sel ? " checked" : ""}>
           </td>
           <td class="atbl-cell atbl-cell--title" title="${escTitle}">${escTitle}</td>
+          ${showDevice ? `<td class="atbl-cell atbl-cell--device" title="${escSource}">${escSource}</td>` : ""}
           <td class="atbl-cell atbl-cell--sev">
             <span class="atbl-sev-badge" style="background:${sev.bg};color:${sev.text}">${sev.icon} ${sev.label}</span>
           </td>
@@ -104032,13 +104500,14 @@ var AlarmsNotificationsPanelView = class {
         <thead>
           <tr class="atbl-head-row">
             <th class="atbl-th atbl-th--sel"><input type="checkbox" id="tblSelectAll"${allSelected ? " checked" : ""}></th>
-            <th class="atbl-th">Tipo</th>
-            <th class="atbl-th">Severidade</th>
-            <th class="atbl-th">Estado</th>
-            ${showCustomer ? '<th class="atbl-th">Shopping</th>' : ""}
-            <th class="atbl-th atbl-th--num">Qte.</th>
-            <th class="atbl-th atbl-th--date">1a Ocorr\xEAncia</th>
-            <th class="atbl-th atbl-th--date">\xDAlt. Ocorr\xEAncia</th>
+            ${th("Tipo", "title")}
+            ${showDevice ? th("Dispositivo", "device", "atbl-th--device") : ""}
+            ${th("Severidade", "severity")}
+            ${th("Estado", "state")}
+            ${showCustomer ? th("Shopping", "customer") : ""}
+            ${th("Qte.", "count", "atbl-th--num")}
+            ${th("1a Ocorr\xEAncia", "first", "atbl-th--date")}
+            ${th("\xDAlt. Ocorr\xEAncia", "last", "atbl-th--date")}
             <th class="atbl-th atbl-th--actions">A\xE7\xF5es</th>
           </tr>
         </thead>
@@ -104488,7 +104957,7 @@ var AlarmsNotificationsPanelView = class {
     this.log("Details", alarmId);
     const alarm = this.groupedAlarms.find((a) => a.id === alarmId) ?? this.controller.getAlarms().find((a) => a.id === this.stripSeparadoId(alarmId));
     if (alarm) {
-      openAlarmDetailsModal(alarm);
+      openAlarmDetailsModal(alarm, this.controller.getState().themeMode);
       this.emit("alarm-click", alarm);
     }
   }