<div class="overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-soft">
  <div class="overflow-x-auto">
    <table class="min-w-full divide-y divide-slate-200 text-sm">
      <thead class="bg-slate-50 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">
        <tr>
          <th class="px-4 py-3">Client</th>
          <th class="px-4 py-3">Service / Task</th>
          <th class="px-4 py-3">Due</th>
          <th class="px-4 py-3">Status</th>
          <th class="px-4 py-3">Priority</th>
          <th class="px-4 py-3">Docs / Notes</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="text-xs font-semibold uppercase tracking-wide text-brand-600">{{ row.service_name }}</div>
            <div class="font-medium text-slate-900">{{ row.task_name }}</div>
            <div class="text-xs text-slate-500">Period: {{ row.period }}</div>
          </td>
          <td class="px-4 py-3">
            {% if row.due_date %}
              <div class="font-medium {% if row.is_overdue %}text-red-700{% elif row.is_due_today %}text-amber-700{% else %}text-slate-700{% endif %}">{{ row.due_date.strftime('%d-%b-%Y') }}</div>
              {% if row.is_overdue %}<div class="text-xs text-red-600">{{ row.days_overdue }} day(s) overdue</div>{% endif %}
            {% else %}
              <span class="text-slate-400">No due date</span>
            {% endif %}
          </td>
          <td class="px-4 py-3"><span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-700">{{ row.status_label }}</span></td>
          <td class="px-4 py-3"><span class="rounded-full bg-brand-50 px-3 py-1 text-xs font-semibold text-brand-700">{{ row.priority|title }}</span></td>
          <td class="px-4 py-3 text-xs text-slate-500">Docs: {{ row.document_count }}<br>Notes: {{ row.comment_count }}</td>
          <td class="px-4 py-3 text-right"><a href="{{ row.href }}" class="rounded-xl bg-brand-600 px-3 py-2 text-xs font-semibold text-white hover:bg-brand-700">Open</a></td>
        </tr>
        {% else %}
        <tr><td colspan="7" class="px-4 py-10 text-center text-sm text-slate-500">No tasks found for this view.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
