Refactor AppSettingsDocument and CoeffSnapshotDocument: Remove LunchBreakHours property

Add CalendarEventDocument and CalendarEventType enum for event management

Update WorkDayDocument to include WorkUnitDocument and CalendarEventDocument lists

Enhance CouchbaseLiteWorkDayService with methods for managing WorkUnit and CalendarEvent

Revise MonthlySummaryModel to track preview worked hours and counted work units

Improve CSS for calendar view, including responsive design and new item styles

wwwroot/app.css

@@ -61,20 +61,35 @@ h1:focus {
 
 /* Calendar view */
 .calendar-table td.calendar-cell {
-    height: 5rem;
+    height: 10rem;
     vertical-align: top;
     padding: 0.25rem 0.4rem;
     cursor: pointer;
     min-width: 5rem;
+    position: relative;
 }
 
 .calendar-table td.calendar-cell:hover {
     background-color: rgba(0, 0, 0, 0.05);
 }
 
+.calendar-cell-active {
+    box-shadow: inset 0 0 0 0.15rem #1b6ec2;
+}
+
 .calendar-day-number {
     font-weight: bold;
     font-size: 0.9rem;
+    margin-bottom: 0.3rem;
+}
+
+.calendar-day-total {
+    margin-top: auto;
+    padding-top: 0.25rem;
+    font-size: 0.72rem;
+    font-weight: 700;
+    text-align: right;
+    color: #334155;
 }
 
 .calendar-hours {
@@ -82,6 +97,107 @@ h1:focus {
     color: #666;
 }
 
+.calendar-item {
+    display: flex;
+    justify-content: space-between;
+    gap: 0.5rem;
+    width: 100%;
+    border: 0;
+    border-radius: 0.45rem;
+    font-size: 0.72rem;
+    margin-bottom: 0.2rem;
+    padding: 0.2rem 0.35rem;
+    text-align: left;
+}
+
+.calendar-item-work {
+    color: #14213d;
+}
+
+.calendar-item-office {
+    background-color: #cfe2ff;
+}
+
+.calendar-item-home {
+    background-color: #d1e7dd;
+}
+
+.calendar-item-preview-office {
+    background-color: rgba(207, 226, 255, 0.55);
+    border: 1px dashed #6c8ebf;
+}
+
+.calendar-item-preview-home {
+    background-color: rgba(209, 231, 221, 0.55);
+    border: 1px dashed #5b8a72;
+}
+
+.calendar-item-event {
+    color: #fff;
+}
+
+.calendar-item-generic {
+    background-color: #6c757d;
+}
+
+.calendar-item-dayoff {
+    background-color: #6c757d;
+}
+
+.calendar-item-closure {
+    background-color: #b08900;
+}
+
+.calendar-item-holiday {
+    background-color: #b02a37;
+}
+
+.calendar-item-illness {
+    background-color: #0c8599;
+}
+
+.calendar-popup {
+    position: absolute;
+    top: 2rem;
+    left: 0.35rem;
+    z-index: 20;
+    width: min(18rem, calc(100vw - 3rem));
+    background: #fff;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 0.75rem;
+    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.18);
+    padding: 0.75rem;
+}
+
+.calendar-popup-section {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+}
+
+.calendar-popup-link {
+    border: 0;
+    border-radius: 0.5rem;
+    background: #f1f3f5;
+    padding: 0.45rem 0.6rem;
+    text-align: left;
+}
+
+.calendar-legend-work {
+    background-color: #cfe2ff;
+    color: #14213d;
+}
+
+.calendar-legend-home {
+    background-color: #d1e7dd;
+    color: #1d3b2a;
+}
+
+.calendar-legend-preview {
+    background-color: #fff3cd;
+    color: #6b4f00;
+}
+
 .calendar-weekend {
     background-color: #ffe0e0 !important;
 }
@@ -100,4 +216,16 @@ h1:focus {
 
 .calendar-holiday {
     background-color: #d4edda !important;
+}
+
+@media (max-width: 767.98px) {
+    .calendar-table td.calendar-cell {
+        height: 8rem;
+        min-width: 7rem;
+    }
+
+    .calendar-popup {
+        left: 0;
+        width: calc(100vw - 2rem);
+    }
 }