Enhance user interface with mobile optimizations and visual improvements

Adds CSS keyframes and mobile-first responsive utilities in index.css, adjusts styles in NewSaleForm.tsx and SaleDetailsModal.tsx and SalesHistory.tsx.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 91318273-c764-4fd4-be04-bdc12c38af32
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/0715008c-7244-40f4-befc-26c014852236/b77c9129-16e4-4c03-a447-09edfb2aa967.jpg

client/src/components/SalesHistory.tsx

@@ -264,7 +264,7 @@ export default function SalesHistory({ canDelete = false }: SalesHistoryProps) {
       </CardHeader>
       <CardContent className="mobile-card-content mobile-form-responsive">
         {/* Filters */}
-        <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 items-start sm:items-end mobile-form-section bg-muted/30 rounded-xl border border-border/50">
+        <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 items-start sm:items-end mobile-form-section bg-muted bg-opacity-30 rounded-xl border border-border border-opacity-50">
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 flex-1 w-full">
             <div>
               <label className="responsive-caption font-medium">Date de début</label>