<div class="overflow-x-auto rounded-2xl border border-slate-200 bg-white shadow-soft">
  <table class="min-w-full divide-y divide-slate-200 text-sm">
    <thead class="bg-slate-50 text-xs font-semibold uppercase tracking-wide text-slate-500">
      <tr>
        <th class="px-4 py-3 text-left">Client</th>
        <th class="px-4 py-3 text-left">Task</th>
        <th class="px-4 py-3 text-left">Service / Period</th>
        <th class="px-4 py-3 text-left">Due / Age</th>
        <th class="px-4 py-3 text-left">Assigned</th>
        <th class="px-4 py-3 text-left">Status</th>
        <th class="px-4 py-3 text-right">Action</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-slate-100">
      {% for row in rows %}
      <tr class="hover:bg-slate-50">
        <td class="px-4 py-3"><div class="font-semibold text-slate-900">{{ row.client_name }}</div><div class="text-xs text-slate-500">{{ row.client_code or '-' }}</div></td>
        <td class="px-4 py-3"><div class="font-semibold text-slate-900">{{ row.task_name }}</div><div class="text-xs text-slate-500">{{ row.comment_count }} timeline item(s)</div></td>
        <td class="px-4 py-3"><div>{{ row.service_name }}</div><div class="text-xs text-slate-500">{{ row.period }}</div></td>
        <td class="px-4 py-3"><span class="{% if row.is_overdue %}text-red-700 font-semibold{% elif row.is_due_today %}text-amber-700 font-semibold{% endif %}">{{ row.due_date or '-' }}</span>{% if row.days_overdue %}<div class="text-xs font-semibold text-red-600">{{ row.days_overdue }} day(s) overdue</div>{% endif %}</td>
        <td class="px-4 py-3">{{ row.assigned_to }}</td>
        <td class="px-4 py-3"><span class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-700">{{ row.status_label }}</span></td>
        <td class="px-4 py-3 text-right"><a href="{{ row.href }}" class="rounded-lg border border-slate-300 px-3 py-1.5 text-xs font-semibold text-slate-700 hover:bg-slate-50">Open</a></td>
      </tr>
      {% else %}
      <tr><td colspan="7" class="px-4 py-8 text-center text-sm text-slate-500">No records found for this view.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
