refine admin cards and form headers

components/dashboard/stats-card.tsx

@@ -22,25 +22,25 @@ export function StatsCard({
   className,
 }: StatsCardProps) {
   return (
-    <AppCard level={3} className={className}>
-      <CardContent className="space-y-2.5 p-3">
-        <div className="flex items-start justify-between gap-3">
-          <div>
-            <p className="text-sm font-semibold text-foreground">{title}</p>
-            <p className="mt-1 text-3xl font-semibold text-foreground">{value}</p>
-          </div>
+    <AppCard level={3} layer="single" className={className}>
+      <CardContent className="p-3">
+        <div className="flex items-center gap-3">
           {Icon ? (
-            <div className="rounded-nested border border-border bg-muted/50 p-2 text-muted-foreground">
+            <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-nested border border-border bg-muted/50 text-muted-foreground">
               <Icon className="h-4 w-4" />
             </div>
           ) : null}
+          <div className="min-w-0">
+            <p className="text-xs uppercase tracking-[0.14em] text-muted-foreground">{title}</p>
+            <p className="mt-1 text-lg font-semibold text-foreground">{value}</p>
+          </div>
         </div>
 
         {description ? (
-          <p className="text-sm text-muted-foreground">{description}</p>
+          <p className="mt-2 text-sm text-muted-foreground">{description}</p>
         ) : null}
 
-        {footer ? footer : null}
+        {footer ? <div className="mt-2">{footer}</div> : null}
       </CardContent>
     </AppCard>
   );