wip

wwwroot/css/calendar-base-css.css

@@ -34,7 +34,7 @@
   /* Grid colors */
   --color-grid-line: #e0e0e0;
   --color-grid-line-light: rgba(0, 0, 0, 0.05);
-  --color-hour-line: rgba(0, 0, 0, 0.08);
+  --color-hour-line: rgba(0, 0, 0, 0.2);
   --color-work-hours: rgba(0, 100, 0, 0.06);
   --color-current-time: #ff0000;
   

wwwroot/css/calendar-layout-css.css

@@ -207,10 +207,30 @@ swp-hour-marker::after {
   position: absolute;
   top: 0;
   left: 100%;
-  width: 100vw;
+  width: calc(100vw - 60px); /* Full viewport width minus time-axis width */
   height: 1px;
   background: var(--color-hour-line);
   pointer-events: none;
+  z-index: 2; /* Ensure it appears above other elements */
+}
+
+/* Add hour lines to time-grid as background */
+swp-time-grid {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: repeating-linear-gradient(
+    to bottom,
+    transparent,
+    transparent calc(var(--hour-height) - 1px),
+    var(--color-hour-line) calc(var(--hour-height) - 1px),
+    var(--color-hour-line) var(--hour-height)
+  );
+  pointer-events: none;
+  z-index: 1;
 }
 
 /* Week header - dynamic height based on content */

wwwroot/css/calendar.css

@@ -1,12 +1,6 @@
 /* Base CSS - Variables are defined in calendar-base-css.css */
 
-body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
-    font-size: 14px;
-    line-height: 1.5;
-    color: var(--color-text);
-    background-color: var(--color-surface);
-}
+ 
 
 /* Custom elements default display */
 swp-calendar,
@@ -250,19 +244,6 @@ swp-time-grid::before {
     pointer-events: none;
 }
  
-/* Grid lines */
-swp-grid-lines {
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-    background-image: repeating-linear-gradient(
-        to bottom,
-        transparent,
-        transparent calc(var(--hour-height) / 4 - 1px),
-        rgba(0, 0, 0, 0.03) calc(var(--hour-height) / 4 - 1px),
-        rgba(0, 0, 0, 0.03) calc(var(--hour-height) / 4)
-    );
-}
 
 /* Day columns */
 swp-day-columns {
@@ -272,10 +253,6 @@ swp-day-columns {
     grid-template-columns: repeat(7, 1fr);
 }
 
-swp-day-column {
-    position: relative;
-    border-right: 1px solid var(--color-grid-line);
-}
 
 swp-day-column:last-child {
     border-right: none;