style(frontend): mobile responsive polish for Dashboard/Providers/Upload/Reconciliation

src/pages/Dashboard.tsx

@@ -108,7 +108,7 @@ export function Dashboard() {
   const sectionBase = kpiBase + kpiStep * 5 + 60; // after the last KPI
 
   return (
-    <div className="space-y-10">
+    <div className="space-y-6 md:space-y-10">
       {/* Hero */}
       <header
         className="relative animate-fade-in overflow-hidden"
@@ -129,13 +129,13 @@ export function Dashboard() {
             {fmt.usd(kpis.billed)}
           </div>
 
-          <div className="relative z-10 flex items-end justify-between gap-6 flex-wrap">
-            <div>
+          <div className="relative z-10 flex items-end justify-between gap-4 sm:gap-6 flex-wrap">
+            <div className="min-w-0">
               <div className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-muted-foreground mb-2 flex items-center gap-2">
                 <span className="inline-block h-px w-6 bg-border" />
                 Today · {fmt.date(new Date().toISOString())}
               </div>
-              <h1 className="text-[28px] leading-[1.15] font-semibold tracking-tight">
+              <h1 className="text-[22px] sm:text-[28px] leading-[1.15] font-semibold tracking-tight">
                 Good morning, Jordan.
               </h1>
               <p className="text-muted-foreground mt-1.5 max-w-xl text-[14px] leading-relaxed">
@@ -157,7 +157,7 @@ export function Dashboard() {
       {/* KPIs — every card carries a trend. */}
       <section
         aria-label="Key performance indicators"
-        className="grid gap-4 grid-cols-2 lg:grid-cols-5"
+        className="grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5"
       >
         <KpiCard
           label="Claims"