<div class="max-w-full min-w-0 space-y-6 overflow-hidden">
	<div class="grid min-w-0 grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4 xl:gap-6">
		<div class="flex min-w-0 items-center rounded-xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
			<div class="p-3 bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-300 rounded-lg mr-4">
				<i data-lucide="pie-chart" class="h-5 w-5"></i>
			</div>
			<div class="min-w-0">
				<p class="text-2xl font-bold text-slate-900 dark:text-slate-100"><?= round($project_progress, 2) ?>%</p>
				<p class="truncate text-xs font-medium text-slate-500 dark:text-slate-400"><?= lang('overall_completion') ?></p>
			</div>
		</div>
		<div class="flex min-w-0 items-center rounded-xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
			<div class="p-3 bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-300 rounded-lg mr-4">
				<i data-lucide="check-square" class="h-5 w-5"></i>
			</div>
			<div class="min-w-0">
				<p class="text-2xl font-bold text-slate-900 dark:text-slate-100"><?= $completed ?>/<?= $total_task ?></p>
				<p class="truncate text-xs font-medium text-slate-500 dark:text-slate-400"><?= lang('tasks_completed') ?></p>
			</div>
		</div>
		<div class="flex min-w-0 items-center rounded-xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
			<div class="p-3 bg-purple-50 dark:bg-purple-900/30 text-purple-600 dark:text-purple-300 rounded-lg mr-4">
				<i data-lucide="calendar" class="h-5 w-5"></i>
			</div>
			<div class="min-w-0">
				<p class="text-2xl font-bold text-slate-900 dark:text-slate-100"><?= $TotalGone ?></p>
				<p class="truncate text-xs font-medium text-slate-500 dark:text-slate-400"><?= $lang ?></p>
			</div>
		</div>
		<div class="flex min-w-0 items-center rounded-xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
			<div class="p-3 bg-emerald-50 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-300 rounded-lg mr-4">
				<i data-lucide="trending-up" class="h-5 w-5"></i>
			</div>
			<div class="min-w-0">
				<p class="text-2xl font-bold text-slate-900 dark:text-slate-100"><?= $health_score ?>%</p>
				<p class="truncate text-xs font-medium text-slate-500 dark:text-slate-400"><?= lang('health_score') ?></p>
			</div>
		</div>
	</div>

	<div class="grid min-w-0 gap-6 lg:grid-cols-[minmax(0,2fr)_minmax(280px,1fr)]">
		<div class="min-w-0 space-y-6">
			<div class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 shadow-sm">
				<h3 class="text-sm font-semibold text-slate-900 dark:text-slate-100 mb-3"><?= lang('project_scope') ?></h3>
				<p class="break-words text-sm text-slate-600 dark:text-slate-300">
					<?= !empty($project_details->description) ? nl2br(html_escape($project_details->description)) : lang('no_description') ?>
				</p>
				<div class="mt-4 flex flex-wrap items-center gap-4 text-xs text-slate-500">
					<span class="inline-flex items-center gap-2"><i data-lucide="calendar" class="h-3 w-3"></i><?= lang('start_date') ?>: <?= display_date($project_details->start_date) ?></span>
					<span class="inline-flex items-center gap-2"><i data-lucide="calendar" class="h-3 w-3"></i><?= lang('end_date') ?>: <?= display_date($project_details->end_date) ?></span>
					<span class="inline-flex items-center gap-2"><i data-lucide="briefcase" class="h-3 w-3"></i><?= lang('billing_type') ?>: <?= lang($project_details->billing_type) ?></span>
				</div>
			</div>

			<div class="grid min-w-0 gap-6 md:grid-cols-[minmax(0,1.6fr)_minmax(260px,1fr)]">
				<div class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 shadow-sm">
					<div class="flex items-center justify-between mb-4">
						<h3 class="text-sm font-semibold text-slate-900 dark:text-slate-100"><?= lang('recent_activity') ?></h3>
						<a href="<?= base_url() ?>client/projects/project_details/<?= $project_details->project_id ?>/activities" class="text-xs text-primary hover:underline">
							<?= lang('view_all') ?>
						</a>
					</div>
					<div class="space-y-4 text-sm text-slate-600 dark:text-slate-300">
						<div class="flex min-w-0 items-start gap-3">
							<span class="mt-1 h-2 w-2 rounded-full bg-blue-500"></span>
							<div class="min-w-0">
								<p class="break-words font-medium text-slate-700 dark:text-slate-200"><?= lang('project_status') ?>: <?= lang($status_key) ?></p>
								<p class="text-xs text-slate-500"><?= lang('updated') ?> <?= display_date($project_details->end_date) ?></p>
							</div>
						</div>
						<div class="flex min-w-0 items-start gap-3">
							<span class="mt-1 h-2 w-2 rounded-full bg-emerald-500"></span>
							<div class="min-w-0">
								<p class="font-medium text-slate-700 dark:text-slate-200"><?= lang('tasks_completed') ?></p>
								<p class="text-xs text-slate-500"><?= $completed ?> / <?= $total_task ?></p>
							</div>
						</div>
						<div class="flex min-w-0 items-start gap-3">
							<span class="mt-1 h-2 w-2 rounded-full bg-amber-500"></span>
							<div class="min-w-0">
								<p class="font-medium text-slate-700 dark:text-slate-200"><?= lang('budget_usage') ?></p>
								<p class="text-xs text-slate-500"><?= display_money($budget_spent, $currency->symbol) ?> / <?= display_money($budget_total, $currency->symbol) ?></p>
							</div>
						</div>
					</div>
				</div>

				<div class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 shadow-sm">
					<h3 class="text-sm font-semibold text-slate-900 dark:text-slate-100 mb-4"><?= lang('upcoming_milestones') ?></h3>
					<div class="space-y-3 text-sm text-slate-600 dark:text-slate-300">
						<div class="flex min-w-0 items-center justify-between gap-3 rounded-xl border border-slate-200 p-3 dark:border-slate-800">
							<div class="min-w-0">
								<p class="font-medium text-slate-700 dark:text-slate-200"><?= lang('start_date') ?></p>
								<p class="text-xs text-slate-500"><?= display_date($project_details->start_date) ?></p>
							</div>
							<span class="rounded-full bg-emerald-50 dark:bg-emerald-900/30 px-2 py-1 text-xs font-semibold text-emerald-700 dark:text-emerald-200"><?= lang('started') ?></span>
						</div>
						<div class="flex min-w-0 items-center justify-between gap-3 rounded-xl border border-slate-200 p-3 dark:border-slate-800">
							<div class="min-w-0">
								<p class="font-medium text-slate-700 dark:text-slate-200"><?= lang('end_date') ?></p>
								<p class="text-xs text-slate-500"><?= display_date($project_details->end_date) ?></p>
							</div>
							<span class="rounded-full bg-slate-100 dark:bg-slate-800 px-2 py-1 text-xs font-semibold text-slate-600 dark:text-slate-300"><?= $lang ?></span>
						</div>
						<a href="<?= base_url() ?>client/projects/project_details/<?= $project_details->project_id ?>/milestones" class="inline-flex items-center justify-center rounded-lg border border-slate-200 px-3 py-2 text-xs font-semibold text-slate-600 hover:border-slate-300">
							<?= lang('view_roadmap') ?>
						</a>
					</div>
				</div>
			</div>

			<div class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 shadow-sm">
				<div class="flex items-center justify-between mb-4">
					<h3 class="text-sm font-semibold text-slate-900 dark:text-slate-100"><?= lang('key_assets') ?></h3>
					<a href="<?= base_url() ?>client/projects/project_details/<?= $project_details->project_id ?>/attachments" class="text-xs text-primary hover:underline">
						<?= lang('view_all') ?>
					</a>
				</div>
				<div class="grid gap-3 md:grid-cols-2">
					<div class="rounded-xl border border-slate-200 dark:border-slate-800 p-4 text-sm text-slate-600 dark:text-slate-300">
						<p class="font-medium text-slate-700 dark:text-slate-200"><?= lang('attachments') ?></p>
						<p class="text-xs text-slate-500"><?= total_rows('tbl_attachments', array('module' => 'projects', 'module_field_id' => $project_details->project_id)) ?> <?= lang('files') ?></p>
					</div>
					<div class="rounded-xl border border-slate-200 dark:border-slate-800 p-4 text-sm text-slate-600 dark:text-slate-300">
						<p class="font-medium text-slate-700 dark:text-slate-200"><?= lang('comments') ?></p>
						<p class="text-xs text-slate-500"><?= total_rows('tbl_task_comment', array('module' => 'projects', 'module_field_id' => $project_details->project_id)) ?> <?= lang('updates') ?></p>
					</div>
				</div>
			</div>
		</div>

		<aside class="min-w-0 space-y-6">
			<div class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 shadow-sm">
				<p class="text-xs font-semibold uppercase text-slate-400"><?= lang('at_a_glance') ?></p>
				<div class="mt-4 flex items-center gap-3">
					<div class="h-10 w-10 rounded-xl bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-200 flex items-center justify-center font-semibold">
						<?= strtoupper(mb_substr($name, 0, 1)) ?>
					</div>
					<div class="min-w-0">
						<p class="break-words text-sm font-semibold text-slate-900 dark:text-slate-100"><?= html_escape($name) ?></p>
						<p class="text-xs text-slate-500"><?= lang('client') ?></p>
					</div>
				</div>
				<?php if (!empty($client_info) && !empty($client_info->email)) { ?>
					<a class="mt-3 inline-flex max-w-full break-all text-xs text-primary hover:underline" href="mailto:<?= html_escape($client_info->email) ?>">
						<?= html_escape($client_info->email) ?>
					</a>
				<?php } ?>

				<div class="mt-6">
					<p class="text-xs font-semibold text-slate-500 mb-3"><?= lang('project_team') ?></p>
					<div class="space-y-3">
						<?php if (!empty($participants)) { ?>
							<?php foreach ($participants as $member) { ?>
								<div class="flex min-w-0 items-center gap-3">
									<img src="<?= base_url() . $member->avatar ?>" class="h-8 w-8 rounded-full ring-2 ring-white dark:ring-slate-900" alt="<?= html_escape($member->fullname) ?>">
									<div class="min-w-0">
										<p class="truncate text-sm font-medium text-slate-800 dark:text-slate-100"><?= html_escape($member->fullname) ?></p>
										<p class="text-xs text-slate-500"><?= $member->role_id == 1 ? lang('admin') : lang('staff') ?></p>
									</div>
								</div>
							<?php } ?>
						<?php } else { ?>
							<p class="text-sm text-slate-500"><?= lang('everyone') ?></p>
						<?php } ?>
					</div>
				</div>

				<?php if (!empty($staff_finance)) { ?>
					<div class="mt-6">
						<div class="flex items-center justify-between">
							<p class="text-xs font-semibold text-slate-500"><?= lang('budget_usage') ?></p>
							<span class="text-xs font-semibold text-slate-700 dark:text-slate-200"><?= round($budget_percent) ?>%</span>
						</div>
						<div class="mt-2 h-2 w-full rounded-full bg-slate-100 dark:bg-slate-800">
							<div class="h-2 rounded-full bg-emerald-500" style="width: <?= round($budget_percent) ?>%"></div>
						</div>
						<div class="mt-3 flex items-center justify-between text-xs text-slate-500">
							<span><?= lang('spent') ?> <?= display_money($budget_spent, $currency->symbol) ?></span>
							<span><?= lang('total') ?> <?= display_money($budget_total, $currency->symbol) ?></span>
						</div>
					</div>
				<?php } ?>

				<div class="mt-6">
					<p class="text-xs font-semibold text-slate-500 mb-2"><?= lang('tags') ?></p>
					<div class="flex flex-wrap gap-2">
						<?= get_tags($project_details->tags, true) ?>
					</div>
				</div>
			</div>
		</aside>
	</div>
</div>
