.upload-area {
	transition: all 0.3s ease;
}

.upload-area:hover {
	border-color: #3B82F6; /* blue-500 */
	background-color: #1f2937; /* gray-800 */
}

.upload-area.dragover {
	border-color: #2563eb; /* blue-600 */
	background-color: #374151; /* gray-700 */
}

.report-section {
	display: none;
	animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

.loading {
	text-align: center;
	padding: 40px;
	display: none;
}

.spinner {
	border: 4px solid #4b5563; /* gray-600 */
	border-top: 4px solid #3B82F6; /* blue-500 */
	border-radius: 50%;
	width: 40px;
	height: 40px;
	animation: spin 1s linear infinite;
	margin: 0 auto 20px;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Print styles for PDF export */
@media print {
	/* --- NEW: Universal box-sizing for predictable layout --- */
	* {
		box-sizing: border-box !important;
	}
	
	/* Hide non-essential elements */
	.no-print, 
	nav, 
	.upload-area, 
	.loading, 
	#errorMessage, 
	#newFileBtn { 
		display: none !important; 
	}
	
	/* Page setup */
	@page {
		/* --- MODIFIED: Slightly reduced margins for more content space --- */
		margin: 0.3in;
		size: A4 landscape;
	}
	
	/* Body styles */
	body, html {
		font-size: 8px !important;
		line-height: 1.1 !important;
		background: white !important;
		color: black !important;
		margin: 0 !important;
		padding: 0 !important;
		/* --- NEW: Ensure body and html respect page width --- */
		width: 100% !important;
		height: auto !important;
		overflow: visible !important;
	}
	
	/* Main container */
	.max-w-7xl {
		max-width: none !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	
	/* Main title with gradient background */
	.main-title {
		font-size: 14px !important;
		padding: 12px !important;
		margin: 0 0 15px 0 !important;
		background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #1d4ed8 100%) !important;
		color: white !important;
		page-break-after: avoid !important;
		text-align: center !important;
		border-radius: 8px !important;
		box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
		border: 1px solid #1e40af !important;
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}
	
	/* Section headers with gradient */
	.bg-gray-700 {
		font-size: 10px !important;
		padding: 6px 8px !important;
		margin: 12px 0 0 0 !important;
		background: linear-gradient(135deg, #374151 0%, #4b5563 50%, #374151 100%) !important;
		color: white !important;
		page-break-after: avoid !important;
		border-radius: 6px !important;
		border: 1px solid #6b7280 !important;
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}
	
	/* Table containers with rounded corners */
	.bg-gray-800 {
		background: white !important;
		box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
		border: 1px solid #d1d5db !important;
		page-break-inside: avoid !important;
		margin-bottom: 20px !important;
		border-radius: 10px !important;
		overflow: hidden !important;
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}
	
	.overflow-x-auto {
		overflow: visible !important;
		border-radius: 10px !important;
	}
	
	/* Tables */
	table {
		font-size: 6px !important;
		margin-bottom: 0 !important;
		width: 100% !important;
		/* --- KEY CHANGE: Force table to respect container width --- */
		table-layout: fixed !important; 
		border-collapse: separate !important;
		border-spacing: 0 !important;
		page-break-inside: auto !important;
		border-radius: 10px !important;
		overflow: hidden !important;
	}
	
	/* Table headers with gradient */
	thead {
		background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 50%, #d1d5db 100%) !important;
		display: table-header-group !important;
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}
	
	thead th {
		background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 50%, #d1d5db 100%) !important;
		color: #1f2937 !important;
		border: none !important;
		border-right: 1px solid #9ca3af !important;
		border-bottom: 2px solid #6b7280 !important;
		padding: 4px 6px !important;
		font-weight: bold !important;
		font-size: 6px !important;
		line-height: 1.2 !important;
		vertical-align: middle !important;
		/* --- KEY CHANGE: Ensure long header text wraps --- */
		overflow-wrap: break-word !important;
		hyphens: auto !important;
		text-transform: uppercase !important;
		letter-spacing: 0.02em !important;
		text-shadow: 0 1px 1px rgba(255,255,255,0.8) !important;
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}
	
	/* First and last header cells get rounded corners */
	thead th:first-child {
		border-top-left-radius: 10px !important;
		border-left: none !important;
	}
	
	thead th:last-child {
		border-top-right-radius: 10px !important;
		border-right: none !important;
	}
	
	/* Table body */
	tbody {
		background: white !important;
		display: table-row-group !important;
	}
	
	tbody tr {
		background: white !important;
		page-break-inside: avoid !important;
		page-break-after: auto !important;
		transition: background-color 0.2s ease !important;
	}
	
	tbody tr:nth-child(even) {
		background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%) !important;
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}
	
	tbody tr:hover {
		background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
	}
	
	/* Table cells */
	td {
		background: inherit !important;
		border: none !important;
		border-right: 1px solid #e5e7eb !important;
		border-bottom: 1px solid #f3f4f6 !important;
		padding: 4px 6px !important;
		font-size: 6px !important;
		line-height: 1.2 !important;
		vertical-align: middle !important;
		/* --- KEY CHANGE: Ensure long content breaks and wraps --- */
		overflow-wrap: break-word !important;
		word-wrap: break-word !important; 
		hyphens: auto !important;
		color: #374151 !important;
		white-space: normal !important;
		overflow: hidden !important; /* Hide any overflow that still occurs */
		text-overflow: clip !important;
		max-width: none !important;
	}
	
	/* Last column cells */
	td:last-child {
		border-right: none !important;
	}
	
	/* Last row cells get bottom rounded corners */
	tbody tr:last-child td:first-child {
		border-bottom-left-radius: 10px !important;
	}
	
	tbody tr:last-child td:last-child {
		border-bottom-right-radius: 10px !important;
	}
	
	tbody tr:last-child td {
		border-bottom: none !important;
	}
	
	/* Project info section styling */
	#projectInfoSection {
		margin-bottom: 15px !important;
		padding: 10px !important;
		background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
		border-radius: 8px !important;
		border: 1px solid #e2e8f0 !important;
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}
	
	/* Dynamic sections */
	#dynamicSections > div {
		margin-bottom: 18px !important;
		page-break-inside: avoid !important;
	}
	
	/* Force page breaks when needed */
	.page-break {
		page-break-before: always !important;
	}
	
	/* Ensure all content fits */
	.min-w-full {
		min-width: 100% !important;
		width: 100% !important;
	}
	
	/* Typography adjustments for readability */
	.text-xs,
	.text-sm {
		font-size: 6px !important;
	}
	
	.font-medium,
	.font-bold {
		font-weight: bold !important;
	}
	
	/* Padding and margin resets for print */
	.px-3,
	.px-4,
	.py-3,
	.py-4 {
		padding: 4px 6px !important;
	}
	
	.mb-6,
	.mb-8 {
		margin-bottom: 12px !important;
	}
	
	/* Enhanced visual elements */
	.shadow-lg,
	.rounded-lg,
	.rounded-t-lg,
	.rounded-b-lg {
		box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
		border-radius: 10px !important;
	}
	
	/* Special styling for key metrics or important data */
	.highlight-cell {
		background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
		font-weight: bold !important;
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}
	
	/* Status indicators */
	.status-success {
		background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%) !important;
		color: #166534 !important;
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}
	
	.status-warning {
		background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
		color: #92400e !important;
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}
	
	.status-error {
		background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%) !important;
		color: #991b1b !important;
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}
}