<div class="space-y-6">
  <section class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft">
    <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
      <div><h3 class="text-lg font-semibold text-slate-900">Services & Documents</h3><p class="mt-1 text-sm text-slate-500">Track services handled by the firm and documents visible to you.</p></div>
      <div class="flex flex-wrap gap-2">
        <button type="button" onclick="window.loadClientDashboardTab && window.loadClientDashboardTab('services')" class="af-btn af-btn-secondary">Services</button>
        <button type="button" onclick="window.loadClientDashboardTab && window.loadClientDashboardTab('documents')" class="af-btn af-btn-secondary">Documents</button>
        <a href="/client/documents" class="af-btn af-btn-primary">Upload Documents</a>
      </div>
    </div>
  </section>
  {% include "modules/clients/templates/clients/portal_partials/services.html" %}
  {% include "modules/clients/templates/clients/portal_partials/documents.html" %}
</div>
