feat(ui): configure planning horizon alongside leave balances

src/app/components/user-input/user-input.scss

@@ -31,6 +31,41 @@
 	}
 }
 
+.planning-dates {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr);
+	grid-column: 1 / -1;
+	column-gap: 1rem;
+	min-width: 0;
+	margin: 0;
+	padding: 0;
+	border: 0;
+
+	legend {
+		font-weight: 600;
+	}
+
+	mat-form-field {
+		min-width: 0;
+		width: 100%;
+	}
+
+	p {
+		grid-column: 1 / -1;
+		margin: 0.5rem 0 1rem;
+		color: var(--ui-text-secondary);
+		font-size: 0.875rem;
+		line-height: 1.5;
+	}
+
+	.validation-error {
+		color: var(--ui-error-text);
+		background: var(--ui-error-bg);
+		padding: 0.75rem;
+		border-radius: 0.5rem;
+	}
+}
+
 .listOfDays {
 	display: flex;
 	flex-direction: column;
@@ -250,6 +285,9 @@ form {
 }
 
 @container user-input (min-width: 40rem) {
+	.planning-dates {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
 	.listOfDays {
 		display: grid;
 		grid-template-columns: repeat(2, minmax(0, 1fr));