Report Header With Export

<header class="ws-report-header-export" style="--ws-report-header-bg: var(--ws-color-surface); --ws-report-header-text: var(--ws-color-text); --ws-report-header-text-soft: var(--ws-color-text-soft); --ws-report-header-border: var(--ws-color-border); --ws-report-header-accent: var(--ws-color-primary);">
  <div class="mx-auto max-w-5xl px-4 py-8 sm:px-6 lg:px-8">
    <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
      <div>
        <h1 class="text-2xl font-bold tracking-tight text-[var(--ws-report-header-text)]">Analytics Overview</h1>
        <p class="mt-1 text-sm text-[var(--ws-report-header-text-soft)]">Track your key metrics and performance indicators.</p>
      </div>
      <div class="flex flex-wrap items-center gap-3">
        <div class="flex items-center gap-2 rounded-lg border border-[var(--ws-report-header-border)] bg-[var(--ws-report-header-bg)] px-4 py-2 text-sm text-[var(--ws-report-header-text)]">
          <svg class="h-4 w-4 shrink-0 text-[var(--ws-report-header-text-soft)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
          <span>Mar 1 &ndash; Mar 21, 2026</span>
        </div>
        <div class="flex items-center gap-2">
          <button type="button" class="inline-flex items-center gap-1.5 rounded-lg border border-[var(--ws-report-header-border)] bg-[var(--ws-report-header-bg)] px-3 py-2 text-sm font-medium text-[var(--ws-report-header-text)] hover:bg-black/5 focus:outline-none focus:ring-2 focus:ring-[var(--ws-report-header-accent)] focus:ring-offset-2">
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
            Export CSV
          </button>
          <button type="button" class="inline-flex items-center gap-1.5 rounded-lg border border-[var(--ws-report-header-border)] bg-[var(--ws-report-header-bg)] px-3 py-2 text-sm font-medium text-[var(--ws-report-header-text)] hover:bg-black/5 focus:outline-none focus:ring-2 focus:ring-[var(--ws-report-header-accent)] focus:ring-offset-2">
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
            Export PDF
          </button>
          <button type="button" class="inline-flex items-center justify-center rounded-lg border border-[var(--ws-report-header-border)] bg-[var(--ws-report-header-bg)] p-2 text-[var(--ws-report-header-text-soft)] hover:bg-black/5 focus:outline-none focus:ring-2 focus:ring-[var(--ws-report-header-accent)] focus:ring-offset-2" aria-label="Refresh data">
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</header>