fix: sidebar width/centering + kanban card badge & table details

- Sidebar: expanded 256->200px, collapsed 80->64px; collapsed state now
  renders icon-only (label removed from flow) so icons are centered, not
  pushed left by an invisible text span
- Kanban cards: add StatusBadge + email line to match design reference
- Lead table: add "Mostrando N lead" footer and center/right-align
  Stato/Tag/Azioni headers per reference

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/components/admin/leads/LeadTable.tsx

@@ -14,6 +14,7 @@ import {
   renameLeadTag,
 } from "@/app/admin/pipeline/actions";
 import type { LeadWithTags, LeadFieldOptions } from "@/lib/admin-queries";
+import { cn } from "@/lib/utils";
 
 const COLUMN_HEADERS = [
   "Nome",
@@ -26,6 +27,11 @@ const COLUMN_HEADERS = [
   "Azioni",
 ];
 const COL_COUNT = COLUMN_HEADERS.length;
+const HEADER_ALIGN: Record<string, string> = {
+  Stato: "text-center",
+  Tag: "text-center",
+  Azioni: "text-right",
+};
 
 function StatusCell({
   lead,
@@ -196,7 +202,7 @@ export function LeadTable({
           <thead>
             <tr className="border-b border-border bg-muted/50 text-muted-foreground text-[11px] font-semibold uppercase tracking-wider">
               {COLUMN_HEADERS.map((header) => (
-                <th key={header} className="py-4 px-6">
+                <th key={header} className={cn("py-4 px-6", HEADER_ALIGN[header])}>
                   {header}
                 </th>
               ))}
@@ -213,6 +219,10 @@ export function LeadTable({
       {leads.length === 0 && (
         <div className="text-center py-8 text-muted-foreground">Nessun lead trovato</div>
       )}
+
+      <div className="border-t border-border px-6 py-4 text-xs text-muted-foreground">
+        Mostrando {leads.length} lead
+      </div>
     </div>
   );
 }

src/components/admin/leads/LeadsKanbanBoard.tsx

@@ -15,6 +15,7 @@ import {
 } from "@dnd-kit/core";
 import { updateLeadField } from "@/app/admin/pipeline/actions";
 import type { LeadWithTags } from "@/lib/admin-queries";
+import { StatusBadge } from "@/components/ui/StatusBadge";
 
 type LeadStage = "contacted" | "qualified" | "proposal_sent" | "negotiating" | "won" | "lost";
 
@@ -65,7 +66,7 @@ function DroppableColumn({
 
       <div className="flex-1 space-y-2">
         {leads.map((lead) => (
-          <DraggableLeadCard key={lead.id} lead={lead} isActive={activeId === lead.id} />
+          <DraggableLeadCard key={lead.id} lead={lead} status={id} isActive={activeId === lead.id} />
         ))}
         {leads.length === 0 && (
           <p className="text-xs text-muted-foreground italic text-center py-10 select-none">
@@ -77,7 +78,15 @@ function DroppableColumn({
   );
 }
 
-function DraggableLeadCard({ lead, isActive }: { lead: LeadWithTags; isActive: boolean }) {
+function DraggableLeadCard({
+  lead,
+  status,
+  isActive,
+}: {
+  lead: LeadWithTags;
+  status: LeadStage;
+  isActive: boolean;
+}) {
   const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({ id: lead.id });
 
   const style = transform
@@ -94,9 +103,15 @@ function DraggableLeadCard({ lead, isActive }: { lead: LeadWithTags; isActive: b
         isDragging ? "opacity-30" : "hover:border-primary/30 hover:shadow-card-hover"
       }`}
     >
-      <p className="text-sm font-medium text-foreground">{lead.name}</p>
+      <div className="flex items-start justify-between gap-2">
+        <p className="text-sm font-medium text-foreground">{lead.name}</p>
+        <StatusBadge status={status} className="rounded px-1.5 py-0.5 text-[9px]" />
+      </div>
+      {lead.email && (
+        <p className="text-xs text-muted-foreground mt-0.5 line-clamp-1">{lead.email}</p>
+      )}
       {lead.company && (
-        <p className="text-xs text-muted-foreground">{lead.company}</p>
+        <p className="text-xs text-muted-foreground mt-1">{lead.company}</p>
       )}
       {lead.next_action && (
         <p className="text-xs text-muted-foreground mt-1 line-clamp-1">{lead.next_action}</p>