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/user-input/user-input.scss

@@ -1,34 +1,38 @@
 .user-input {
 	display: flex;
 	flex-direction: column;
-	margin: 1rem;
+	gap: 1.25rem;
+	min-width: 0;
+}
 
-	label {
-		font-weight: bold;
-		margin-bottom: 0.5rem;
+.section-heading {
+	display: flex;
+	flex-direction: column;
+	gap: 0.375rem;
+
+	h2,
+	p {
+		margin: 0;
 	}
 
-	.error-message {
-		color: #ff0000;
-		font-size: 0.875rem;
-		margin-top: 0.25rem;
+	h2 {
+		font-size: 1.5rem;
+		font-weight: 700;
+		line-height: 1.2;
+		text-wrap: balance;
 	}
 
-	.warning-card {
-		margin-bottom: 1rem;
-	}
-
-	.warning-content {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
+	p {
+		max-width: 55ch;
+		color: var(--ui-text-secondary, #45464f);
+		line-height: 1.5;
 	}
 }
 
 .listOfDays {
 	display: flex;
 	flex-direction: column;
-	gap: 0.5rem;
+	gap: 0.75rem;
 }
 
 .day-input-wrapper {
@@ -68,36 +72,47 @@ form {
 	flex-direction: column;
 }
 
-.add-day-card {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	padding: 16px;
-	gap: 1rem;
-	margin-bottom: 1rem;
-	cursor: pointer;
+.add-day-button,
+.calculate-button {
+	width: 100%;
+	min-height: 3rem;
 }
 
-.add-day-card h3 {
-	flex-grow: 1;
-	margin: 0;
-	font-weight: normal;
+.add-day-button {
+	display: flex;
+	justify-content: flex-start;
 }
 
-.action-buttons {
+.calculate-button {
+	min-height: 3.25rem;
+	font-weight: 600;
+}
+
+.warning-card {
+	background: var(--ui-warning-bg, #fff4d6);
+	color: var(--ui-warning-text, #4f3800);
+}
+
+.warning-content {
 	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	align-items: center;
-	margin-bottom: 1rem;
-	gap: 1rem;
+	align-items: flex-start;
+	gap: 0.75rem;
+
+	mat-icon {
+		flex-shrink: 0;
+	}
 }
 
 .warning {
 	display: flex;
 	flex-direction: column;
+	gap: 0.25rem;
+	min-width: 0;
+	overflow-wrap: break-word;
 }
 
 :host {
+	display: block;
+	container: user-input / inline-size;
 	max-width: 100%;
 }