fix: safely enforce validation onblur for HolidayHours modal without dropping code

frontend/src/lib/components/admin/HolidayHours.svelte

@@ -36,6 +36,29 @@
 	let exceptionGroupsLoading = $state(true);
 	let savingHours = $state(false);
 
+	let isFormValid = $derived(
+		exceptionDraft.name.trim() !== '' &&
+		exceptionDraft.weekStarts.length > 0
+	);
+
+	let formErrors = $state({
+		name: '',
+		weeks: ''
+	});
+
+	function validateNameField() {
+		formErrors.name = exceptionDraft.name.trim() === '' ? 'Name is required' : '';
+	}
+
+	function validateWeeksField() {
+		formErrors.weeks = exceptionDraft.weekStarts.length === 0 ? 'At least one week must be selected' : '';
+	}
+
+	function validateAllFields() {
+		validateNameField();
+		validateWeeksField();
+	}
+
 	// Exception modal state
 	let showExceptionModal = $state(false);
 	let exceptionDraft = $state<ExceptionGroup>({
@@ -151,14 +174,9 @@
 	}
 
 	async function saveExceptionGroup() {
-		// Validate
+		validateAllFields();
-		if (!exceptionDraft.name.trim()) {
+		if (!isFormValid) {
-			toast.error('Please enter a group name');
+			toast.error('Please fix validation errors before submitting');
-			return;
-		}
-
-		if (exceptionDraft.weekStarts.length === 0) {
-			toast.error('Please add at least one week');
 			return;
 		}
 
@@ -444,7 +462,12 @@
 						type="text"
 						placeholder="e.g., Christmas Week, Summer Holiday"
 						bind:value={exceptionDraft.name}
+						onblur={validateNameField}
+						class="w-full {formErrors.name ? 'border-red-500' : ''}"
 					/>
+					{#if formErrors.name}
+						<p class="text-xs text-red-600">{formErrors.name}</p>
+					{/if}
 				</div>
 
 				<div class="space-y-2">
@@ -573,7 +596,7 @@
 			>
 				Cancel
 			</Button>
-			<Button onclick={saveExceptionGroup} disabled={savingHours}>
+			<Button onclick={saveExceptionGroup} disabled={savingHours || !isFormValid}>
 				{savingHours ? 'Creating…' : 'Create Schedule'}
 			</Button>
 		</Modal.Footer>