feat: enhance user input and rules panel components

- Updated dark-light mode button styles for improved responsiveness.
- Enhanced rules panel with additional buttons for moving rules up and down, and updated styles for better layout.
- Added active rule count display in the rules panel header.
- Improved user input component layout with section headings and updated button styles.
- Refactored day input component to use grid layout for better alignment and responsiveness.
- Added new translations for user input and rules panel features.
- Implemented tests for new functionality in rules panel and day input components.
- Added application routes test to ensure correct routing configuration.

src/app/components/calendar-month/calendar-month.html

@@ -1,4 +1,4 @@
-<div class="calendar">
+<div class="calendar" role="group" [attr.aria-label]="getMonthName() + ' ' + year">
 	<h3>{{ getMonthName() }} {{ year }}</h3>
 	<div>
 		<div class="row header">
@@ -25,6 +25,7 @@
 						@if (day === null) {
 							<p class="day empty"></p>
 						} @else {
+							@let dayTooltip = getDayTooltip(day);
 							<p
 								[class.past]="day < getNow()"
 								[class.start]="selectedDates.isStart(day)"
@@ -32,8 +33,11 @@
 								[class.selected]="selectedDates.isSelected(day)"
 								[class]="selectedDates.getClasses(day)"
 								class="day number"
-								[matTooltip]="getDayTooltip(day)"
+								[matTooltip]="dayTooltip"
 								[matTooltipShowDelay]="500"
+								[attr.aria-label]="
+									dayTooltip ? day.getDate() + ': ' + dayTooltip : null
+								"
 							>
 								{{ day.getDate() }}
 							</p>