Added Calendar viewer and Environment overview with AI, Health overviewer

frontend/src/components/widgets/widget-styles.css

@@ -2,7 +2,7 @@
 
 /* Reduce card body padding for widgets - default is 2rem (32px), we want less */
 .widget-card .card-body {
-  padding: 1rem; /* 16px instead of 32px */
+  padding: 0.5rem; /* 8px - can be overridden by inline p-2 class */
 }
 
 /* Lighter shadow for widgets */
@@ -10,11 +10,12 @@
   box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
 }
 
-/* Ensure cards fill their container properly */
+/* Ensure cards fill their container properly and align to grid */
 .widget-card {
   height: 100%;
   display: flex;
   flex-direction: column;
+  width: 100%;
 }
 
 .widget-card .card-body {
@@ -23,3 +24,35 @@
   flex-direction: column;
   min-height: 0; /* Allow flex children to shrink */
 }
+
+/* Gridstack alignment */
+.grid-stack-item {
+  display: flex;
+  align-items: stretch;
+}
+
+.grid-stack-item-content {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Gridstack drag handle */
+.grid-stack-item .drag-handle {
+  cursor: move;
+  pointer-events: auto !important;
+  z-index: 10;
+}
+
+/* Ensure gridstack items are interactive */
+.grid-stack-item {
+  pointer-events: auto;
+}
+
+/* Gridstack resize handles */
+.grid-stack-item .ui-resizable-handle {
+  pointer-events: auto !important;
+  z-index: 20;
+}