<div class="flex flex-wrap items-center justify-between gap-3">
  <div><h3 class="text-lg font-semibold text-slate-900">My Reports</h3><p class="mt-1 text-sm text-slate-600">Quick self-service report shortcuts for your own work, attendance, leave, documents and payslips.</p></div>
</div>
<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
  <a href="/employee/work" class="rounded-2xl border border-slate-200 bg-white p-5 shadow-soft hover:border-brand-200"><div class="text-xs font-semibold uppercase text-slate-500">Work Report</div><h4 class="mt-2 text-base font-semibold text-slate-900">My Pending / Completed Work</h4><p class="mt-1 text-sm text-slate-600">Open your work board and filter by status or due date.</p></a>
  <a href="/employee/attendance" class="rounded-2xl border border-slate-200 bg-white p-5 shadow-soft hover:border-brand-200"><div class="text-xs font-semibold uppercase text-slate-500">Attendance Report</div><h4 class="mt-2 text-base font-semibold text-slate-900">My Attendance History</h4><p class="mt-1 text-sm text-slate-600">View punch records, approval status and attendance remarks.</p></a>
  <a href="/employee/leave" class="rounded-2xl border border-slate-200 bg-white p-5 shadow-soft hover:border-brand-200"><div class="text-xs font-semibold uppercase text-slate-500">Leave Report</div><h4 class="mt-2 text-base font-semibold text-slate-900">My Leave Balances</h4><p class="mt-1 text-sm text-slate-600">Review balances and leave request history.</p></a>
  <a href="/employee/documents" class="rounded-2xl border border-slate-200 bg-white p-5 shadow-soft hover:border-brand-200"><div class="text-xs font-semibold uppercase text-slate-500">Document Report</div><h4 class="mt-2 text-base font-semibold text-slate-900">My Documents</h4><p class="mt-1 text-sm text-slate-600">View uploaded documents and verification status.</p></a>
  <a href="/employee/payslips" class="rounded-2xl border border-slate-200 bg-white p-5 shadow-soft hover:border-brand-200"><div class="text-xs font-semibold uppercase text-slate-500">Payroll Report</div><h4 class="mt-2 text-base font-semibold text-slate-900">My Payslips</h4><p class="mt-1 text-sm text-slate-600">Open available payslips and payment status.</p></a>
  <a href="/alerts" class="rounded-2xl border border-slate-200 bg-white p-5 shadow-soft hover:border-brand-200"><div class="text-xs font-semibold uppercase text-slate-500">Alert Report</div><h4 class="mt-2 text-base font-semibold text-slate-900">My Alerts</h4><p class="mt-1 text-sm text-slate-600">View task, attendance, leave and system alerts.</p></a>
</div>
