<script lang="ts">
	import { getApiBaseUrl } from '$lib/api/config';
	import { authenticatedFetch } from '$lib/auth';
	import CalendarView from '$lib/components/organisms/CalendarView/CalendarView.svelte';

	// Types
	interface CalendarEntry {
		id: string;
		type: string;
		startDate: string;
		endDate: string;
		label: string;
		description: string | null;
	}

	interface CalendarData {
		academicYearId: string;
		zone: string | null;
		entries: CalendarEntry[];
	}

	// State
	let calendar = $state<CalendarData | null>(null);
	let isLoading = $state(true);
	let error = $state<string | null>(null);
	let successMessage = $state<string | null>(null);
	let isSubmitting = $state(false);

	// View mode
	type ViewMode = 'list' | 'calendar';
	let viewMode = $state<ViewMode>('list');

	// Modals
	let showImportModal = $state(false);
	let showPedagogicalModal = $state(false);

	// Import form
	let importZone = $state<string>('A');

	// Pedagogical day form
	let pedDate = $state('');
	let pedLabel = $state('');
	let pedDescription = $state('');

	// Academic year selector
	type YearKey = 'previous' | 'current' | 'next';
	const yearOptions: { key: YearKey; offset: number }[] = [
		{ key: 'previous', offset: -1 },
		{ key: 'current', offset: 0 },
		{ key: 'next', offset: 1 }
	];
	let selectedYear = $state<YearKey>('current');
	let academicYearId = $derived(selectedYear);

	function baseStartYear(): number {
		const now = new Date();
		return now.getMonth() >= 8 ? now.getFullYear() : now.getFullYear() - 1;
	}

	function schoolYearLabel(offset: number): string {
		const sy = baseStartYear() + offset;
		return `${sy}-${sy + 1}`;
	}

	// Derived
	let hasCalendar = $derived(calendar !== null && calendar.entries.length > 0);

	let holidays = $derived(
		calendar?.entries.filter((e) => e.type === 'holiday') ?? []
	);
	let vacations = $derived(
		calendar?.entries.filter((e) => e.type === 'vacation') ?? []
	);
	let pedagogicalDays = $derived(
		calendar?.entries.filter((e) => e.type === 'pedagogical') ?? []
	);
	let otherEntries = $derived(
		calendar?.entries.filter(
			(e) => e.type !== 'holiday' && e.type !== 'vacation' && e.type !== 'pedagogical'
		) ?? []
	);

	// Close modals on Escape
	$effect(() => {
		if (!showImportModal && !showPedagogicalModal) return;
		const onKeydown = (e: globalThis.KeyboardEvent) => {
			if (e.key === 'Escape') {
				showImportModal = false;
				showPedagogicalModal = false;
			}
		};
		document.addEventListener('keydown', onKeydown);
		return () => document.removeEventListener('keydown', onKeydown);
	});

	// Reload on year change
	$effect(() => {
		void selectedYear;
		loadCalendar();
	});

	// Auto-dismiss success message
	$effect(() => {
		if (!successMessage) return;
		const timer = setTimeout(() => (successMessage = null), 4000);
		return () => clearTimeout(timer);
	});

	async function loadCalendar() {
		try {
			isLoading = true;
			error = null;
			const apiUrl = getApiBaseUrl();
			const response = await authenticatedFetch(
				`${apiUrl}/academic-years/${academicYearId}/calendar`
			);

			if (response.status === 404 || response.status === 204) {
				calendar = null;
				return;
			}

			if (!response.ok) {
				throw new Error('Erreur lors du chargement du calendrier');
			}

			const data = await response.json();
			calendar = data;
		} catch (e) {
			error = e instanceof Error ? e.message : 'Erreur inconnue';
			calendar = null;
		} finally {
			isLoading = false;
		}
	}

	async function handleImport() {
		try {
			isSubmitting = true;
			error = null;
			const apiUrl = getApiBaseUrl();
			const response = await authenticatedFetch(
				`${apiUrl}/academic-years/${academicYearId}/calendar/import-official`,
				{
					method: 'POST',
					headers: { 'Content-Type': 'application/json' },
					body: JSON.stringify({ importZone: importZone })
				}
			);

			if (!response.ok) {
				const errorData = await response.json();
				throw new Error(
					errorData['hydra:description'] || errorData.message || "Erreur lors de l'import"
				);
			}

			await loadCalendar();
			showImportModal = false;
			successMessage = `Calendrier officiel importé pour la zone ${importZone}.`;
		} catch (e) {
			error = e instanceof Error ? e.message : 'Erreur inconnue';
		} finally {
			isSubmitting = false;
		}
	}

	async function handleAddPedagogicalDay() {
		try {
			isSubmitting = true;
			error = null;
			const apiUrl = getApiBaseUrl();
			const response = await authenticatedFetch(
				`${apiUrl}/academic-years/${academicYearId}/calendar/pedagogical-day`,
				{
					method: 'POST',
					headers: { 'Content-Type': 'application/json' },
					body: JSON.stringify({
						date: pedDate,
						label: pedLabel,
						description: pedDescription || null
					})
				}
			);

			if (!response.ok) {
				const errorData = await response.json();
				throw new Error(
					errorData['hydra:description'] || errorData.message || "Erreur lors de l'ajout"
				);
			}

			const data = await response.json();
			const newEntry: CalendarEntry = {
				id: data.id ?? data['@id'] ?? '',
				type: data.type ?? 'pedagogical',
				startDate: data.startDate ?? data.date ?? pedDate,
				endDate: data.endDate ?? data.date ?? pedDate,
				label: data.label ?? pedLabel,
				description: data.description ?? null
			};
			if (calendar) {
				const entries = [...calendar.entries, newEntry].sort((a, b) =>
					a.startDate.localeCompare(b.startDate)
				);
				calendar = { ...calendar, entries };
			} else {
				calendar = {
					academicYearId,
					zone: null,
					entries: [newEntry]
				};
			}
			showPedagogicalModal = false;
			pedDate = '';
			pedLabel = '';
			pedDescription = '';
			successMessage = 'Journée pédagogique ajoutée.';
		} catch (e) {
			error = e instanceof Error ? e.message : 'Erreur inconnue';
		} finally {
			isSubmitting = false;
		}
	}

	function formatDate(dateStr: string): string {
		const date = new Date(dateStr + 'T00:00:00');
		return date.toLocaleDateString('fr-FR', {
			weekday: 'short',
			day: 'numeric',
			month: 'long'
		});
	}

	function formatDateRange(start: string, end: string): string {
		if (start === end) return formatDate(start);
		return `${formatDate(start)} — ${formatDate(end)}`;
	}

	function entryTypeLabel(type: string): string {
		const labels: Record<string, string> = {
			holiday: 'Jour férié',
			vacation: 'Vacances',
			pedagogical: 'Journée pédagogique',
			bridge: 'Pont',
			closure: 'Fermeture exceptionnelle'
		};
		return labels[type] ?? type;
	}

	function entryTypeColor(type: string): string {
		const colors: Record<string, string> = {
			holiday: '#ef4444',
			vacation: '#3b82f6',
			pedagogical: '#f59e0b',
			bridge: '#8b5cf6',
			closure: '#6b7280'
		};
		return colors[type] ?? '#6b7280';
	}
</script>

<svelte:head>
	<title>Calendrier scolaire — Classeo</title>
</svelte:head>

<div class="page-header">
	<div class="header-top">
		<h1>Calendrier scolaire</h1>
		<div class="header-actions">
			<button class="btn-secondary" onclick={() => (showImportModal = true)}>
				Importer calendrier officiel
			</button>
			<button class="btn-primary" onclick={() => (showPedagogicalModal = true)}>
				Ajouter journée pédagogique
			</button>
		</div>
	</div>

	<div class="year-selector">
		{#each yearOptions as { key, offset }}
			<button
				class="year-tab"
				class:year-tab-active={selectedYear === key}
				onclick={() => (selectedYear = key)}
			>
				{schoolYearLabel(offset)}
			</button>
		{/each}
	</div>
</div>

{#if successMessage}
	<div class="alert alert-success">{successMessage}</div>
{/if}

{#if error}
	<div class="alert alert-error">{error}</div>
{/if}

{#if isLoading}
	<div class="loading-container">
		<div class="spinner"></div>
		<p>Chargement du calendrier...</p>
	</div>
{:else if !hasCalendar}
	<div class="empty-state">
		<div class="empty-icon">📅</div>
		<h2>Aucun calendrier configuré</h2>
		<p>Importez le calendrier officiel pour commencer à configurer les jours fériés et vacances scolaires.</p>
		<button class="btn-primary" onclick={() => (showImportModal = true)}>
			Importer le calendrier officiel
		</button>
	</div>
{:else}
	{#if calendar?.zone}
		<div class="zone-badge">Zone {calendar.zone}</div>
	{/if}

	<div class="view-toggle">
		<button
			class="toggle-btn"
			class:toggle-btn-active={viewMode === 'list'}
			onclick={() => (viewMode = 'list')}
		>
			Liste
		</button>
		<button
			class="toggle-btn"
			class:toggle-btn-active={viewMode === 'calendar'}
			onclick={() => (viewMode = 'calendar')}
		>
			Calendrier
		</button>
	</div>

	<div class="legend">
		<span class="legend-item">
			<span class="legend-dot" style="background: #ef4444;"></span> Jours fériés
		</span>
		<span class="legend-item">
			<span class="legend-dot" style="background: #3b82f6;"></span> Vacances
		</span>
		<span class="legend-item">
			<span class="legend-dot" style="background: #f59e0b;"></span> Journées pédagogiques
		</span>
		{#if otherEntries.length > 0}
			<span class="legend-item">
				<span class="legend-dot" style="background: #8b5cf6;"></span> Autres
			</span>
		{/if}
	</div>

	{#if viewMode === 'list'}
		{#if holidays.length > 0}
			<section class="entry-section">
				<h2 class="section-title">
					<span class="section-dot" style="background: #ef4444;"></span>
					Jours fériés ({holidays.length})
				</h2>
				<div class="entries-list">
					{#each holidays as entry}
						<div class="entry-card">
							<div class="entry-date">{formatDateRange(entry.startDate, entry.endDate)}</div>
							<div class="entry-label">{entry.label}</div>
						</div>
					{/each}
				</div>
			</section>
		{/if}

		{#if vacations.length > 0}
			<section class="entry-section">
				<h2 class="section-title">
					<span class="section-dot" style="background: #3b82f6;"></span>
					Vacances scolaires ({vacations.length})
				</h2>
				<div class="entries-list">
					{#each vacations as entry}
						<div class="entry-card">
							<div class="entry-date">{formatDateRange(entry.startDate, entry.endDate)}</div>
							<div class="entry-label">{entry.label}</div>
							{#if entry.description}
								<div class="entry-description">{entry.description}</div>
							{/if}
						</div>
					{/each}
				</div>
			</section>
		{/if}

		{#if pedagogicalDays.length > 0}
			<section class="entry-section">
				<h2 class="section-title">
					<span class="section-dot" style="background: #f59e0b;"></span>
					Journées pédagogiques ({pedagogicalDays.length})
				</h2>
				<div class="entries-list">
					{#each pedagogicalDays as entry}
						<div class="entry-card">
							<div class="entry-date">{formatDate(entry.startDate)}</div>
							<div class="entry-label">{entry.label}</div>
							{#if entry.description}
								<div class="entry-description">{entry.description}</div>
							{/if}
						</div>
					{/each}
				</div>
			</section>
		{/if}

		{#if otherEntries.length > 0}
			<section class="entry-section">
				<h2 class="section-title">
					<span class="section-dot" style="background: #8b5cf6;"></span>
					Autres ({otherEntries.length})
				</h2>
				<div class="entries-list">
					{#each otherEntries as entry}
						<div class="entry-card">
							<div class="entry-date">{formatDateRange(entry.startDate, entry.endDate)}</div>
							<div class="entry-label">{entry.label}</div>
							<span class="entry-type-badge" style="background: {entryTypeColor(entry.type)};">{entryTypeLabel(entry.type)}</span>
						</div>
					{/each}
				</div>
			</section>
		{/if}
	{:else}
		<CalendarView entries={calendar?.entries ?? []} />
	{/if}
{/if}

<!-- Import modal -->
{#if showImportModal}
	<div
		class="modal-overlay"
		onclick={() => (showImportModal = false)}
		onkeydown={(e) => e.key === 'Enter' && (showImportModal = false)}
		role="presentation"
	>
		<div
			class="modal-content"
			onclick={(e) => e.stopPropagation()}
			onkeydown={(e) => e.stopPropagation()}
			role="dialog"
			tabindex="-1"
			aria-modal="true"
			aria-label="Importer le calendrier officiel"
		>
			<h2>Importer le calendrier officiel</h2>
			<p class="modal-description">
				Sélectionnez votre zone scolaire pour importer automatiquement
				les jours fériés et les vacances scolaires officielles.
			</p>

			<div class="form-group">
				<label for="import-zone">Zone scolaire</label>
				<div class="zone-cards">
					{#each ['A', 'B', 'C'] as zone}
						<button
							type="button"
							class="zone-card"
							class:zone-selected={importZone === zone}
							onclick={() => (importZone = zone)}
						>
							<span class="zone-letter">Zone {zone}</span>
							<span class="zone-detail">
								{#if zone === 'A'}
									Besançon, Bordeaux, Lyon, Grenoble...
								{:else if zone === 'B'}
									Aix-Marseille, Lille, Nantes, Nice...
								{:else}
									Créteil, Paris, Toulouse, Versailles...
								{/if}
							</span>
						</button>
					{/each}
				</div>
			</div>

			<div class="modal-actions">
				<button
					type="button"
					class="btn-secondary"
					onclick={() => (showImportModal = false)}
					disabled={isSubmitting}
				>
					Annuler
				</button>
				<button
					type="button"
					class="btn-primary"
					onclick={handleImport}
					disabled={isSubmitting}
				>
					{isSubmitting ? 'Import en cours...' : 'Importer'}
				</button>
			</div>
		</div>
	</div>
{/if}

<!-- Pedagogical day modal -->
{#if showPedagogicalModal}
	<div
		class="modal-overlay"
		onclick={() => (showPedagogicalModal = false)}
		onkeydown={(e) => e.key === 'Enter' && (showPedagogicalModal = false)}
		role="presentation"
	>
		<div
			class="modal-content"
			onclick={(e) => e.stopPropagation()}
			onkeydown={(e) => e.stopPropagation()}
			role="dialog"
			tabindex="-1"
			aria-modal="true"
			aria-label="Ajouter une journée pédagogique"
		>
			<h2>Ajouter une journée pédagogique</h2>

			<form
				onsubmit={(e) => {
					e.preventDefault();
					handleAddPedagogicalDay();
				}}
			>
				<div class="form-group">
					<label for="ped-date">Date</label>
					<input
						type="date"
						id="ped-date"
						bind:value={pedDate}
						required
					/>
				</div>

				<div class="form-group">
					<label for="ped-label">Libellé</label>
					<input
						type="text"
						id="ped-label"
						bind:value={pedLabel}
						required
						minlength="2"
						maxlength="100"
						placeholder="Ex : Formation enseignants"
					/>
				</div>

				<div class="form-group">
					<label for="ped-description">Description (optionnel)</label>
					<textarea
						id="ped-description"
						bind:value={pedDescription}
						rows="3"
						placeholder="Détails sur la journée pédagogique..."
					></textarea>
				</div>

				<div class="modal-actions">
					<button
						type="button"
						class="btn-secondary"
						onclick={() => (showPedagogicalModal = false)}
						disabled={isSubmitting}
					>
						Annuler
					</button>
					<button
						type="submit"
						class="btn-primary"
						disabled={isSubmitting || !pedDate || !pedLabel.trim()}
					>
						{isSubmitting ? 'Ajout en cours...' : 'Ajouter'}
					</button>
				</div>
			</form>
		</div>
	</div>
{/if}

<style>
	.page-header {
		margin-bottom: 1.5rem;
	}

	.header-top {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: 1rem;
		margin-bottom: 1rem;
		flex-wrap: wrap;
	}

	h1 {
		font-size: 1.5rem;
		font-weight: 700;
		color: var(--text-primary, #1f2937);
		margin: 0;
	}

	.header-actions {
		display: flex;
		gap: 0.5rem;
		flex-wrap: wrap;
	}

	/* Year selector */
	.year-selector {
		display: flex;
		gap: 0.25rem;
		background: var(--surface-elevated, #fff);
		border: 1px solid var(--border-subtle, #e2e8f0);
		border-radius: 0.5rem;
		padding: 0.25rem;
		width: fit-content;
	}

	.year-tab {
		padding: 0.5rem 1rem;
		font-size: 0.875rem;
		font-weight: 500;
		border: none;
		background: transparent;
		border-radius: 0.375rem;
		cursor: pointer;
		color: var(--text-secondary, #64748b);
		transition: all 0.15s;
	}

	.year-tab:hover {
		background: var(--surface-primary, #f8fafc);
		color: var(--text-primary, #1f2937);
	}

	.year-tab-active {
		background: var(--accent-primary, #0ea5e9);
		color: white;
	}

	.year-tab-active:hover {
		background: var(--accent-primary, #0ea5e9);
		color: white;
	}

	/* Zone badge */
	.zone-badge {
		display: inline-block;
		padding: 0.25rem 0.75rem;
		font-size: 0.8125rem;
		font-weight: 600;
		color: var(--accent-primary, #0ea5e9);
		background: var(--accent-primary-light, #e0f2fe);
		border-radius: 1rem;
		margin-bottom: 1rem;
	}

	/* View toggle */
	.view-toggle {
		display: flex;
		gap: 0.25rem;
		background: var(--surface-elevated, #fff);
		border: 1px solid var(--border-subtle, #e2e8f0);
		border-radius: 0.5rem;
		padding: 0.25rem;
		width: fit-content;
		margin-bottom: 1rem;
	}

	.toggle-btn {
		padding: 0.375rem 0.75rem;
		font-size: 0.8125rem;
		font-weight: 500;
		border: none;
		background: transparent;
		border-radius: 0.375rem;
		cursor: pointer;
		color: var(--text-secondary, #64748b);
		transition: all 0.15s;
	}

	.toggle-btn:hover {
		background: var(--surface-primary, #f8fafc);
		color: var(--text-primary, #1f2937);
	}

	.toggle-btn-active {
		background: var(--accent-primary, #0ea5e9);
		color: white;
	}

	.toggle-btn-active:hover {
		background: var(--accent-primary, #0ea5e9);
		color: white;
	}

	/* Legend */
	.legend {
		display: flex;
		gap: 1rem;
		flex-wrap: wrap;
		margin-bottom: 1.5rem;
		padding: 0.75rem 1rem;
		background: var(--surface-elevated, #fff);
		border: 1px solid var(--border-subtle, #e2e8f0);
		border-radius: 0.5rem;
	}

	.legend-item {
		display: flex;
		align-items: center;
		gap: 0.375rem;
		font-size: 0.8125rem;
		color: var(--text-secondary, #64748b);
	}

	.legend-dot {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		flex-shrink: 0;
	}

	/* Entry sections */
	.entry-section {
		margin-bottom: 1.5rem;
	}

	.section-title {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		font-size: 1rem;
		font-weight: 600;
		color: var(--text-primary, #1f2937);
		margin: 0 0 0.75rem;
	}

	.section-dot {
		width: 12px;
		height: 12px;
		border-radius: 50%;
		flex-shrink: 0;
	}

	.entries-list {
		display: grid;
		gap: 0.5rem;
	}

	.entry-card {
		display: flex;
		align-items: baseline;
		gap: 1rem;
		padding: 0.75rem 1rem;
		background: var(--surface-elevated, #fff);
		border: 1px solid var(--border-subtle, #e2e8f0);
		border-radius: 0.5rem;
		flex-wrap: wrap;
	}

	.entry-date {
		font-size: 0.8125rem;
		color: var(--text-secondary, #64748b);
		min-width: 180px;
	}

	.entry-label {
		font-size: 0.875rem;
		font-weight: 500;
		color: var(--text-primary, #1f2937);
	}

	.entry-description {
		font-size: 0.8125rem;
		color: var(--text-secondary, #64748b);
		width: 100%;
	}

	.entry-type-badge {
		font-size: 0.6875rem;
		font-weight: 600;
		color: white;
		padding: 0.125rem 0.5rem;
		border-radius: 1rem;
	}

	/* Empty state */
	.empty-state {
		text-align: center;
		padding: 3rem 1.5rem;
		background: var(--surface-elevated, #fff);
		border: 1px solid var(--border-subtle, #e2e8f0);
		border-radius: 0.75rem;
	}

	.empty-icon {
		font-size: 3rem;
		margin-bottom: 1rem;
	}

	.empty-state h2 {
		font-size: 1.125rem;
		font-weight: 600;
		color: var(--text-primary, #1f2937);
		margin: 0 0 0.5rem;
	}

	.empty-state p {
		font-size: 0.875rem;
		color: var(--text-secondary, #64748b);
		margin: 0 0 1.5rem;
		max-width: 400px;
		margin-left: auto;
		margin-right: auto;
	}

	/* Alerts */
	.alert {
		padding: 0.75rem 1rem;
		border-radius: 0.5rem;
		margin-bottom: 1rem;
		font-size: 0.875rem;
	}

	.alert-success {
		background: #ecfdf5;
		color: #065f46;
		border: 1px solid #a7f3d0;
	}

	.alert-error {
		background: #fef2f2;
		color: #991b1b;
		border: 1px solid #fecaca;
	}

	/* Loading */
	.loading-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1rem;
		padding: 3rem;
		color: var(--text-secondary, #64748b);
	}

	.spinner {
		width: 24px;
		height: 24px;
		border: 3px solid var(--border-subtle, #e2e8f0);
		border-top-color: var(--accent-primary, #0ea5e9);
		border-radius: 50%;
		animation: spin 0.8s linear infinite;
	}

	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}

	/* Buttons */
	.btn-primary {
		padding: 0.5rem 1rem;
		font-size: 0.875rem;
		font-weight: 500;
		background: var(--accent-primary, #0ea5e9);
		color: white;
		border: none;
		border-radius: 0.5rem;
		cursor: pointer;
		transition: background 0.15s;
	}

	.btn-primary:hover:not(:disabled) {
		background: #0284c7;
	}

	.btn-primary:disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}

	.btn-secondary {
		padding: 0.5rem 1rem;
		font-size: 0.875rem;
		font-weight: 500;
		background: var(--surface-elevated, #fff);
		color: var(--text-secondary, #64748b);
		border: 1px solid var(--border-subtle, #e2e8f0);
		border-radius: 0.5rem;
		cursor: pointer;
		transition: all 0.15s;
	}

	.btn-secondary:hover:not(:disabled) {
		background: var(--surface-primary, #f8fafc);
		color: var(--text-primary, #1f2937);
	}

	.btn-secondary:disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}

	/* Modal */
	.modal-overlay {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.4);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 300;
		padding: 1rem;
	}

	.modal-content {
		background: var(--surface-elevated, #fff);
		border-radius: 0.75rem;
		padding: 1.5rem;
		width: 100%;
		max-width: 480px;
		max-height: 90vh;
		overflow-y: auto;
	}

	.modal-content h2 {
		font-size: 1.125rem;
		font-weight: 600;
		color: var(--text-primary, #1f2937);
		margin: 0 0 0.5rem;
	}

	.modal-description {
		font-size: 0.875rem;
		color: var(--text-secondary, #64748b);
		margin: 0 0 1.25rem;
	}

	.modal-actions {
		display: flex;
		justify-content: flex-end;
		gap: 0.5rem;
		margin-top: 1.5rem;
	}

	/* Form */
	.form-group {
		margin-bottom: 1rem;
	}

	.form-group label {
		display: block;
		font-size: 0.8125rem;
		font-weight: 600;
		color: var(--text-primary, #1f2937);
		margin-bottom: 0.375rem;
	}

	.form-group input[type='text'],
	.form-group input[type='date'],
	.form-group textarea {
		width: 100%;
		padding: 0.625rem 0.75rem;
		font-size: 0.875rem;
		border: 1px solid var(--border-subtle, #d1d5db);
		border-radius: 0.375rem;
		background: white;
		color: var(--text-primary, #1f2937);
		transition: border-color 0.15s;
		box-sizing: border-box;
	}

	.form-group input:focus,
	.form-group textarea:focus {
		outline: none;
		border-color: var(--accent-primary, #3b82f6);
		box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
	}

	/* Zone selector cards */
	.zone-cards {
		display: grid;
		gap: 0.5rem;
	}

	.zone-card {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
		padding: 0.75rem 1rem;
		background: white;
		border: 2px solid var(--border-subtle, #e2e8f0);
		border-radius: 0.5rem;
		cursor: pointer;
		text-align: left;
		transition: all 0.15s;
	}

	.zone-card:hover {
		border-color: var(--accent-primary, #0ea5e9);
	}

	.zone-selected {
		border-color: var(--accent-primary, #0ea5e9);
		background: var(--accent-primary-light, #e0f2fe);
	}

	.zone-letter {
		font-size: 0.875rem;
		font-weight: 600;
		color: var(--text-primary, #1f2937);
	}

	.zone-detail {
		font-size: 0.75rem;
		color: var(--text-secondary, #64748b);
	}

	@media (min-width: 768px) {
		.zone-cards {
			grid-template-columns: repeat(3, 1fr);
		}
	}
</style>
