feat: enhance user input component with new styling and functionality

- Added informational styling to warning cards in user input component.
- Improved remaining days details and history display with new computed properties.
- Updated user input service to manage planning outcomes and traces more effectively.
- Enhanced leave planner service to classify remaining balances with detailed reasons.
- Expanded translation service to support new balance reasoning and suggestions.
- Updated translations for multiple languages to reflect new features and terminology.

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

@@ -93,11 +93,13 @@
 	}
 
 	@if (hasRemainingDays()) {
-		<mat-card class="warning-card">
+		<mat-card class="warning-card" [class.is-informational]="!hasAtRiskDays()">
 			<mat-card-content class="warning-content">
-				<mat-icon color="warn" aria-hidden="true">warning</mat-icon>
+				<mat-icon [color]="hasAtRiskDays() ? 'warn' : undefined" aria-hidden="true">{{
+					hasAtRiskDays() ? 'warning' : 'info'
+				}}</mat-icon>
 				<div class="warning">
-					<span>
+					<p role="status">
 						{{
 							tr()
 								.userInput.remainingDaysWarning.replace(
@@ -107,11 +109,129 @@
 								.split('{plural}')
 								.join(remainingDays() > 1 ? 's' : '')
 						}}
-					</span>
-					@for (day of remainingDaysDetails(); track $index) {
-						<span class="remaining-day-detail">- {{ day }}</span>
-					}
-					<span> {{ tr().userInput.remainingDaysManualPlace }} </span>
+					</p>
+					<ul class="remaining-balances">
+						@for (day of remainingDaysDetails(); track day.id) {
+							<li class="remaining-day-detail">
+								<strong>{{ day.title }}</strong>
+								@if (day.earnedFrom) {
+									<p>{{ day.earnedFrom }}</p>
+								}
+								<p>{{ day.reason }}</p>
+								<p>{{ day.validity }}</p>
+								@if (day.suggestion) {
+									<p>{{ day.suggestion }}</p>
+								}
+								<details
+									name="remaining-balances"
+									[open]="historyBalanceId() === day.id"
+									(toggle)="toggleRemainingHistory(day.id, $event)"
+								>
+									<summary
+										[attr.aria-label]="
+											tr().userInput.remainingWhy +
+											' : ' +
+											day.title +
+											'. ' +
+											day.validity
+										"
+									>
+										{{ tr().userInput.remainingWhy }}
+									</summary>
+									<p>{{ day.horizon }}</p>
+									@if (historyBalanceId() === day.id) {
+										@if (!traceResolved()) {
+											<p role="status">{{ tr().loading }}</p>
+										} @else {
+											@if (!trace() || trace()?.status === 'failed') {
+												<p>{{ tr().planning.traceUnavailable }}</p>
+											}
+											@if (remainingHistory().length) {
+												<p>{{ tr().userInput.remainingHistoryHelp }}</p>
+												<ol
+													class="remaining-history"
+													[attr.start]="historyPage() * 20 + 1"
+												>
+													@for (
+														attempt of visibleHistory();
+														track $index
+													) {
+														<li>
+															<strong>{{ attempt.date }}</strong> ·
+															{{ attempt.status }}
+															@if (attempt.phase) {
+																<p>{{ attempt.phase }}</p>
+															}
+															@if (attempt.reason) {
+																<p>{{ attempt.reason }}</p>
+															}
+															@for (
+																criterion of attempt.criteria;
+																track $index
+															) {
+																<p
+																	[class.decisive]="
+																		criterion.decisive
+																	"
+																>
+																	@if (criterion.decisive) {
+																		{{
+																			tr().planning.details
+																				.firstDifference
+																		}}
+																		:
+																	}
+																	{{ criterion.text }}
+																</p>
+															}
+														</li>
+													}
+												</ol>
+												@if (historyPageCount() > 1) {
+													<nav
+														class="history-pagination"
+														[attr.aria-label]="tr().planning.candidates"
+													>
+														<button
+															mat-button
+															type="button"
+															[disabled]="historyPage() === 0"
+															(click)="
+																historyPage.set(historyPage() - 1)
+															"
+														>
+															{{ tr().planning.previousCandidates }}
+														</button>
+														<span
+															>{{ tr().planning.page }}
+															{{ historyPage() + 1 }}
+															{{ tr().planning.of }}
+															{{ historyPageCount() }}</span
+														>
+														<button
+															mat-button
+															type="button"
+															[disabled]="
+																historyPage() + 1 >=
+																historyPageCount()
+															"
+															(click)="
+																historyPage.set(historyPage() + 1)
+															"
+														>
+															{{ tr().planning.nextCandidates }}
+														</button>
+													</nav>
+												}
+											} @else if (trace() && trace()?.status !== 'failed') {
+												<p>{{ tr().userInput.remainingNoEvaluations }}</p>
+											}
+										}
+									}
+								</details>
+							</li>
+						}
+					</ul>
 				</div>
 			</mat-card-content>
 		</mat-card>