refactor(admin): compact UI styling for data-dense admin interface

- Reduce table cell padding (px-5 py-4 → px-3 py-2) across OrderTableBody, ProductTableBody, StopTableBody, AdminTable
- Narrow sidebar (w-60 → w-56) with smaller nav items
- Reduce page/card padding in admin-design-system.css
- Smaller default buttons (md → sm) in AdminButton
- Smaller page headers (text-2xl → text-xl, w-12 → w-10 icon)
- Tighter cards and filter tabs

Makes admin UI feel like professional B2B tool at 100% zoom

src/components/admin/design-system/AdminButton.tsx

@@ -38,7 +38,7 @@ const variantClasses: Record<ButtonVariant, string> = {
 };
 
 const sizeClasses: Record<ButtonSize, string> = {
-  sm: "px-3 py-1.5 text-xs rounded-lg gap-1.5",
+  sm: "px-2.5 py-1 text-xs rounded-lg gap-1",
   md: "px-4 py-2 text-sm rounded-xl gap-2",
   lg: "px-5 py-3 text-base rounded-xl gap-2",
 };
@@ -46,7 +46,7 @@ const sizeClasses: Record<ButtonSize, string> = {
 export default function AdminButton({
   children,
   variant = "primary",
-  size = "md",
+  size = "sm",
   icon,
   iconPosition = "left",
   isLoading = false,

src/components/admin/design-system/AdminCard.tsx

@@ -12,7 +12,7 @@ type AdminCardProps = {
 export default function AdminCard({ children, className = "", noPadding = false, style }: AdminCardProps) {
   return (
     <div 
-      className={`rounded-2xl border bg-white shadow-[var(--admin-shadow-sm)] transition-all duration-200 hover:shadow-[var(--admin-shadow-md)] ${noPadding ? "" : "p-5"} ${className}`}
+      className={`rounded-xl border bg-white shadow-[var(--admin-shadow-sm)] transition-all duration-200 hover:shadow-[var(--admin-shadow-md)] ${noPadding ? "" : "p-4"} ${className}`}
       style={{
         borderColor: 'var(--admin-border)',
         ...style

src/components/admin/design-system/AdminFilterTabs.tsx

@@ -31,11 +31,11 @@ type AdminFilterTabsProps = {
 const sizeClasses = {
   sm: {
     container: "p-0.5 gap-0.5",
-    tab: "px-2.5 sm:px-3 py-2 sm:py-1.5 text-xs sm:text-[10px]",
+    tab: "px-2 py-1.5 text-[10px]",
   },
   md: {
-    container: "p-1 gap-0.5",
-    tab: "px-3 sm:px-4 py-2.5 sm:py-1.5 text-sm sm:text-xs",
+    container: "p-0.5 gap-0.5",
+    tab: "px-2.5 py-1.5 text-xs",
   },
 };
 

src/components/admin/design-system/AdminTable.tsx

@@ -32,7 +32,7 @@ export default function AdminTable<T extends Record<string, unknown>>({
         <thead>
           <tr className="border-b border-[var(--admin-border)] bg-[var(--admin-bg-subtle)]">
             {columns.map((col) => (
-              <th key={col.key} className={`px-3 sm:px-5 py-3 text-xs sm:text-[10px] font-bold uppercase tracking-widest text-[var(--admin-text-muted)] whitespace-nowrap ${col.className ?? ""}`}>
+              <th key={col.key} className={`px-2 sm:px-3 py-2 text-xs sm:text-[10px] font-bold uppercase tracking-widest text-[var(--admin-text-muted)] whitespace-nowrap ${col.className ?? ""}`}>
                 {col.header}
               </th>
             ))}
@@ -59,7 +59,7 @@ export default function AdminTable<T extends Record<string, unknown>>({
                 style={{ animationDelay: `${index * 30}ms` }}
               >
                 {columns.map((col) => (
-                  <td key={col.key} className={`px-5 py-3.5 ${col.className ?? ""}`}>
+                  <td key={col.key} className={`px-3 py-2 ${col.className ?? ""}`}>
                     {col.render ? col.render(item) : String(item[col.key] ?? "")}
                   </td>
                 ))}

src/components/admin/design-system/PageHeader.tsx

@@ -56,18 +56,18 @@ export default function PageHeader({
       {/* Title Row with Icon and Actions */}
       <div className="flex items-center justify-between">
         {/* Left: Icon + Title + Subtitle */}
-        <div className="flex items-center gap-4">
+        <div className="flex items-center gap-3">
           {icon && (
-            <div className="flex items-center justify-center w-12 h-12 rounded-2xl bg-[var(--admin-accent-light)] text-[var(--admin-accent)] shadow-[var(--admin-shadow-sm)] transition-transform duration-200 hover:scale-105">
+            <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-[var(--admin-accent-light)] text-[var(--admin-accent)] shadow-[var(--admin-shadow-sm)] transition-transform duration-200 hover:scale-105">
               {icon}
             </div>
           )}
           <div>
-            <h1 className="text-2xl font-bold text-[var(--admin-text-primary)] tracking-tight">
+            <h1 className="text-xl font-bold text-[var(--admin-text-primary)] tracking-tight">
               {title}
             </h1>
             {subtitle && (
-              <p className="mt-1 text-sm text-[var(--admin-text-muted)]">
+              <p className="mt-0.5 text-xs text-[var(--admin-text-muted)]">
                 {subtitle}
               </p>
             )}