feat: add WorkUnitEditorModal component for managing work units

- Implemented WorkUnitEditorModal.razor for creating and editing work units.
- Added necessary services and parameters for data handling.
- Included computed values for calculated hours, gross income, and net income.
- Enhanced UI with modal structure and styling.

fix: update _Imports.razor to include Shared components

- Added reference to WorkUnitEditorModal in _Imports.razor for accessibility.

feat: extend CalendarEventDocument with StartDate and EndDate properties

- Updated CalendarEventDocument.cs to include StartDate and EndDate for better event management.

feat: create CalendarEventFormatter for event description formatting

- Introduced CalendarEventFormatter.cs to handle display logic for calendar events.

fix: enhance CouchbaseLiteWorkDayService for calendar event management

- Updated methods to handle new StartDate and EndDate properties in calendar events.
- Improved event saving and deletion logic.

test: add Playwright tests for date locale functionality

- Created date-locale.spec.ts to verify date picker behavior and formatting.

style: enhance app.css with modal and date input styles

- Added styles for calendar modal, date input, and related components for improved UI.

wwwroot/app.css

@@ -484,6 +484,10 @@ h1:focus {
     box-shadow: inset 0 0 0 0.15rem var(--wt-calendar-active);
 }
 
+.calendar-cell-outside-month {
+    background-color: color-mix(in srgb, var(--bs-tertiary-bg) 72%, transparent);
+}
+
 .calendar-cell-today::after {
     content: "";
     position: absolute;
@@ -505,6 +509,18 @@ h1:focus {
     border-radius: 999px;
 }
 
+.calendar-day-number-outside {
+    opacity: 0.72;
+}
+
+.calendar-day-month-label {
+    font-size: 0.68rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--bs-secondary-color);
+}
+
 .calendar-cell-today .calendar-day-number {
     background-color: var(--wt-calendar-today-badge-bg);
     color: var(--wt-calendar-today-badge-text);
@@ -622,6 +638,139 @@ h1:focus {
     text-align: left;
 }
 
+.calendar-modal-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 1100;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+    background: rgba(15, 23, 42, 0.38);
+}
+
+.calendar-modal-shell {
+    width: min(58rem, 100%);
+    max-height: calc(100vh - 2rem);
+}
+
+.calendar-modal-shell-compact {
+    width: min(44rem, 100%);
+}
+
+.calendar-modal-dialog {
+    display: flex;
+    flex-direction: column;
+    max-height: calc(100vh - 2rem);
+    background: var(--bs-body-bg);
+    color: var(--bs-body-color);
+    border: 1px solid var(--bs-border-color);
+    border-radius: 1rem;
+    box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.22);
+    overflow: hidden;
+}
+
+.calendar-modal-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 1rem 1.25rem;
+    border-bottom: 1px solid var(--bs-border-color);
+}
+
+.calendar-modal-body {
+    padding: 1rem 1.25rem;
+    overflow: auto;
+}
+
+.calendar-modal-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 1rem 1.25rem;
+    border-top: 1px solid var(--bs-border-color);
+    background: color-mix(in srgb, var(--bs-body-bg) 92%, var(--bs-tertiary-bg));
+}
+
+.localized-date-input {
+    position: relative;
+}
+
+.localized-date-input-toggle {
+    min-width: 3.25rem;
+}
+
+.localized-date-input-popover {
+    position: absolute;
+    top: calc(100% + 0.35rem);
+    left: 0;
+    z-index: 1250;
+    width: min(18rem, 100vw - 2rem);
+    padding: 0.75rem;
+    background: var(--bs-body-bg);
+    border: 1px solid var(--bs-border-color);
+    border-radius: 0.85rem;
+    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.16);
+}
+
+.localized-date-input-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    margin-bottom: 0.65rem;
+}
+
+.localized-date-input-month {
+    font-weight: 700;
+    text-transform: capitalize;
+}
+
+.localized-date-input-weekdays,
+.localized-date-input-grid {
+    display: grid;
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+    gap: 0.2rem;
+}
+
+.localized-date-input-weekdays {
+    margin-bottom: 0.35rem;
+}
+
+.localized-date-input-weekday {
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-align: center;
+    color: var(--bs-secondary-color);
+}
+
+.localized-date-input-day {
+    border: 0;
+    border-radius: 0.55rem;
+    background: transparent;
+    padding: 0.45rem 0;
+    text-align: center;
+}
+
+.localized-date-input-day:hover {
+    background: var(--bs-tertiary-bg);
+}
+
+.localized-date-input-day-outside {
+    color: var(--bs-secondary-color);
+}
+
+.localized-date-input-day-selected {
+    background: var(--bs-primary);
+    color: var(--bs-primary-bg-subtle, #fff);
+}
+
+.localized-date-input-actions {
+    display: flex;
+    margin-top: 0.65rem;
+}
+
 .calendar-legend-work {
     background-color: #cfe2ff;
     color: #14213d;
@@ -706,6 +855,34 @@ h1:focus {
         left: 0;
         width: calc(100vw - 2rem);
     }
+
+    .calendar-modal-backdrop {
+        padding: 0.5rem;
+    }
+
+    .calendar-modal-shell,
+    .calendar-modal-shell-compact {
+        width: 100%;
+    }
+
+    .calendar-modal-dialog {
+        max-height: calc(100vh - 1rem);
+    }
+
+    .calendar-modal-header,
+    .calendar-modal-body,
+    .calendar-modal-actions {
+        padding-left: 0.9rem;
+        padding-right: 0.9rem;
+    }
+
+    .calendar-modal-actions {
+        flex-wrap: wrap;
+    }
+
+    .localized-date-input-popover {
+        width: calc(100vw - 2rem);
+    }
 }
 
 /* Monthly timesheet summary */