{% comment %}
Column visibility picker for runs table. Expects parent Alpine scope: colsOpen, cols
{% endcomment %}
<div class="relative overflow-visible">
  <button @click="colsOpen = !colsOpen" class="h-9 px-3 rounded-md border border-input bg-background text-sm hover:bg-muted/50 flex items-center gap-1">
    Columns <span class="text-muted-foreground">▼</span>
  </button>
  <div x-show="colsOpen" @click.outside="colsOpen = false" @click.stop
       class="absolute left-0 top-full mt-1 min-w-[220px] rounded-md border border-border bg-card p-3 shadow-lg z-50">
    <div class="space-y-3 text-sm">
      <div>
        <p class="text-[11px] font-semibold text-muted-foreground uppercase tracking-wide mb-1.5">Tokens & Cost</p>
        <div class="space-y-1.5">
          <label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" x-model="cols.input_tokens" class="h-4 w-4 shrink-0 rounded border-input" /> Input tokens</label>
          <label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" x-model="cols.output_tokens" class="h-4 w-4 shrink-0 rounded border-input" /> Output tokens</label>
          <label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" x-model="cols.cost_input" class="h-4 w-4 shrink-0 rounded border-input" /> Cost per input token</label>
          <label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" x-model="cols.cost_output" class="h-4 w-4 shrink-0 rounded border-input" /> Cost per output token</label>
        </div>
      </div>
    </div>
  </div>
</div>