feat: comprehensive frontend polish - UI/UX improvements across all pages

Public Pages:
- Landing page with server/client split and metadata export
- Cart page with ARIA accessibility and loading states
- Checkout page with form accessibility and proper design system
- Contact page with SEO metadata and improved accessibility
- Pricing page with enhanced FAQ accessibility
- Login page with Suspense boundaries and secure patterns

Brand Storefronts:
- Premium loading skeletons for Tuxedo and Indian River Direct
- Branded error boundaries with animations
- Loading.tsx for about, contact, FAQ, stops pages
- Error.tsx for all storefront subpages

Admin Dashboard:
- AdminSidebar: ARIA labels, keyboard navigation, mobile improvements
- DashboardClient: Stats cards, quick actions, usage progress
- Admin layout: Toast provider integration

Admin Orders/Products/Stops:
- Toast notification system with auto-dismiss
- Skeleton loading components (Table, Card, Stats, Form)
- Bulk actions (mark picked up, publish stops)
- Form validation with error styling

Admin Communications:
- AnalyticsDashboard: sparklines, stat cards, engagement badges
- CampaignComposerPage: step wizard, template selection, email preview
- SegmentBuilderPage: empty state, active segment handling
- ContactListPanel: loading skeletons, professional empty states
- MessageLogPanel: stats cards, engagement indicators
- HarvestReachNav: branded tab navigation
- All pages: metadata exports and loading.tsx

Admin Settings:
- SquareSyncSettingsClient: design system colors, save/cancel UX
- ShippingSettingsForm: validation, dirty state tracking
- Integrations page: proper layout with AI and communications sections
- Billing: improved plan comparison, add-on cards
- PaymentSettings: toggle components, validation

Wholesale Portal:
- Portal: loading skeletons, quantity stepper, search/filter
- Login/Register: FormField validation, success states
- Success/Cancel pages: animated checkmarks
- Employee portal: skeletons, empty states, mobile responsive

Water Log:
- FieldClient: loading step, progress indicator, spinner
- AdminClient: loading skeletons
- Admin pages: loading.tsx files

New Components:
- Toast.tsx/ToastContainer.tsx: comprehensive notification system
- Skeleton.tsx: shimmer loading components
- AdminToggle.tsx: consistent toggle/switch
- CommunicationsLoading.tsx: loading skeleton for comms
- ToastExport.ts: exports

CSS Improvements:
- Shimmer animation keyframes
- Toast slide-in animation

Accessibility:
- ARIA labels throughout
- Keyboard navigation
- Focus states
- Semantic HTML
- Screen reader support

src/components/water/WaterAdminClient.tsx

@@ -123,6 +123,61 @@ const LABELS = {
   },
 };
 
+function SummarySkeleton() {
+  return (
+    <div className="rounded-xl border border-stone-200 bg-white p-4 animate-pulse">
+      <div className="flex items-center justify-between mb-3">
+        <div className="h-5 w-32 bg-stone-200 rounded" />
+        <div className="h-4 w-16 bg-stone-100 rounded" />
+      </div>
+      <div className="grid grid-cols-3 gap-4">
+        {[1, 2, 3].map(i => (
+          <div key={i} className="space-y-1">
+            <div className="h-3 w-20 bg-stone-100 rounded" />
+            <div className="h-6 w-16 bg-stone-200 rounded" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function TableSkeleton({ rows = 5 }: { rows?: number }) {
+  return (
+    <div className="rounded-xl border border-stone-200 bg-white overflow-hidden animate-pulse">
+      <div className="h-12 bg-stone-50 border-b border-stone-100" />
+      {Array.from({ length: rows }).map((_, i) => (
+        <div key={i} className="flex items-center gap-4 px-4 py-3 border-b border-stone-50 last:border-0">
+          <div className="h-4 w-32 bg-stone-100 rounded" />
+          <div className="h-4 w-20 bg-stone-100 rounded" />
+          <div className="h-4 w-16 bg-stone-100 rounded ml-auto" />
+          <div className="h-4 w-12 bg-stone-100 rounded" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function CardsSkeleton({ count = 4 }: { count?: number }) {
+  return (
+    <div className="rounded-xl border border-stone-200 bg-white p-4 animate-pulse">
+      <div className="flex items-center justify-between mb-3">
+        <div className="h-4 w-24 bg-stone-200 rounded" />
+        <div className="h-8 w-8 bg-stone-100 rounded-lg" />
+      </div>
+      <div className="flex gap-2 overflow-hidden">
+        {Array.from({ length: count }).map((_, i) => (
+          <div key={i} className="rounded-lg border border-stone-100 p-3 w-36 shrink-0">
+            <div className="h-4 w-20 bg-stone-100 rounded mb-2" />
+            <div className="h-6 w-16 bg-stone-100 rounded mb-1" />
+            <div className="h-3 w-12 bg-stone-100 rounded" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
 function formatDateTime(iso: string): string {
   return new Date(iso).toLocaleDateString("en-US", {
     month: "short",
@@ -247,6 +302,9 @@ export default function WaterAdminClient() {
 
   const t = LABELS[lang];
 
+  // Initial loading state
+  const [initialLoading, setInitialLoading] = useState(true);
+
   useEffect(() => {
     const savedLang = document.cookie.match(/wl_lang=(en|es)/)?.[1] as "en" | "es" | undefined;
     if (savedLang) setLang(savedLang);
@@ -266,6 +324,7 @@ export default function WaterAdminClient() {
     setHeadgates(headgatesData);
     setAlertLog(alertsData as AlertLogEntry[]);
     setLoading(false);
+    setInitialLoading(false);
   };
 
   const loadDisplaySummary = useCallback(async () => {
@@ -373,8 +432,10 @@ export default function WaterAdminClient() {
               {t.refreshIn}: {refreshCountdown}s
             </span>
           </div>
-          {displayLoading ? (
-            <div className="rounded-xl bg-white p-4 text-sm text-stone-400">Loading...</div>
+          {initialLoading ? (
+            <CardsSkeleton count={3} />
+          ) : displayLoading ? (
+            <CardsSkeleton count={3} />
           ) : displaySummary ? (
             <div className="space-y-3">
               <div>
@@ -471,8 +532,8 @@ export default function WaterAdminClient() {
 
           {showHeadgates && (
             <div className="space-y-1">
-              {loading ? (
-                <p className="text-sm text-stone-400 py-2">Loading...</p>
+              {initialLoading ? (
+                <TableSkeleton rows={3} />
               ) : headgates.length === 0 ? (
                 <p className="text-sm text-stone-400 py-2">{t.noHeadgates}</p>
               ) : (
@@ -571,8 +632,8 @@ export default function WaterAdminClient() {
 
           {showUsers && (
             <div className="space-y-1">
-              {loading ? (
-                <p className="text-sm text-stone-400 py-2">Loading...</p>
+              {initialLoading ? (
+                <TableSkeleton rows={3} />
               ) : users.length === 0 ? (
                 <p className="text-sm text-stone-400 py-2">No users</p>
               ) : (
@@ -666,8 +727,16 @@ export default function WaterAdminClient() {
                     </tr>
                   </thead>
                   <tbody>
-                    {loading ? (
-                      <tr><td colSpan={5} className="py-4 text-center text-stone-400">Loading...</td></tr>
+                    {initialLoading ? (
+                      Array.from({ length: 8 }).map((_, i) => (
+                        <tr key={i}>
+                          <td className="py-3"><div className="h-3 w-20 bg-stone-100 rounded animate-pulse" /></td>
+                          <td className="py-3"><div className="h-3 w-16 bg-stone-100 rounded animate-pulse hidden sm:table-cell" /></td>
+                          <td className="py-3"><div className="h-3 w-14 bg-stone-100 rounded animate-pulse" /></td>
+                          <td className="py-3"><div className="h-3 w-10 bg-stone-100 rounded animate-pulse ml-auto" /></td>
+                          <td className="py-3"><div className="h-5 w-8 bg-stone-100 rounded animate-pulse ml-auto" /></td>
+                        </tr>
+                      ))
                     ) : filteredEntries.length === 0 ? (
                       <tr><td colSpan={5} className="py-4 text-center text-stone-400">{allEntries.length === 0 ? t.noEntries : "No matches"}</td></tr>
                     ) : (

src/components/water/WaterFieldClient.tsx

@@ -121,7 +121,7 @@ function WaterFieldInner() {
   const qrHeadgateToken = searchParams.get("h");
 
   const [lang, setLang] = useState<Language>("en");
-  const [step, setStep] = useState<"lang" | "role" | "pin" | "form">("lang");
+  const [step, setStep] = useState<"loading" | "lang" | "role" | "pin" | "form">("loading");
   const [pin, setPin] = useState("");
   const [irrigatorName, setIrrigatorName] = useState("");
   const [selectedRole, setSelectedRole] = useState<"irrigator" | "water_admin" | null>(null);
@@ -146,18 +146,18 @@ function WaterFieldInner() {
 
   const t = LABELS[lang];
 
-  // Detect saved language preference
+  // Detect saved language preference + check session
   useEffect(() => {
     const saved = document.cookie.match(/wl_lang=(en|es)/)?.[1] as Language | undefined;
     if (saved) setLang(saved);
-  }, []);
 
-  // Check if already logged in (session cookie)
-  useEffect(() => {
     const match = document.cookie.match(/wl_session=([^;]+)/);
     if (match) {
-      setStep("form");
+      // Already logged in
       loadHeadgates();
+      setStep("form");
+    } else {
+      setStep("lang");
     }
   }, []);
 
@@ -177,6 +177,9 @@ function WaterFieldInner() {
     setHeadgates(hgs.filter((h) => h.active));
   }
 
+  // Show loading spinner next to headgate dropdown
+  const isLoadingHeadgates = step === "form" && headgates.length === 0;
+
   async function handleLangSelect(lang: Language) {
     setLang(lang);
     await setWaterLang(lang);
@@ -333,6 +336,18 @@ function WaterFieldInner() {
     setHeadgateLocked(false);
   }
 
+  // Language selection screen
+  if (step === "loading") {
+    return (
+      <div className="min-h-screen bg-stone-50 flex flex-col items-center justify-center p-6">
+        <div className="w-full max-w-xs text-center">
+          <div className="w-12 h-12 rounded-full border-3 border-stone-300 border-t-stone-600 animate-spin mx-auto mb-4" />
+          <p className="text-stone-500 text-base">Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
   // Language selection screen
   if (step === "lang") {
     return (
@@ -448,13 +463,32 @@ function WaterFieldInner() {
           </div>
           <button
             onClick={handleLogout}
-            className="rounded-lg bg-stone-700 px-3 py-2 text-sm font-medium text-white hover:bg-stone-600"
+            className="rounded-lg bg-stone-700 px-4 py-2 text-sm font-semibold text-white hover:bg-stone-600 transition-colors min-h-[44px]"
           >
             {t.logout}
           </button>
         </div>
       </div>
 
+      {/* Step progress indicator */}
+      <div className="bg-stone-100 border-b border-stone-200 px-4 py-2">
+        <div className="mx-auto max-w-lg">
+          <div className="flex items-center gap-1.5">
+            {["lang", "role", "pin", "form"].map((s, i) => {
+              const stepIndex = ["lang", "role", "pin", "form"].indexOf(step as string);
+              const isActive = step === s;
+              const isPast = stepIndex > i;
+              return (
+                <div key={s} className="flex items-center gap-1.5">
+                  <div className={`w-2 h-2 rounded-full ${isActive ? "bg-green-600" : isPast ? "bg-green-400" : "bg-stone-300"}`} />
+                  {i < 3 && <div className={`w-6 h-0.5 ${isPast ? "bg-green-400" : "bg-stone-300"}`} />}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+
       <div className="mx-auto max-w-lg px-4 py-6 space-y-5">
         {/* Success banner */}
         {success && (
@@ -478,6 +512,9 @@ function WaterFieldInner() {
           {headgateLocked ? (
             <div className="w-full rounded-xl border-2 border-amber-300 bg-amber-50 px-4 py-4 text-lg font-bold text-stone-900">
               <div className="flex items-center gap-2">
+                <svg className="w-5 h-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
+                </svg>
                 {selectedHg?.name ?? selectedHeadgate}
                 <span className="ml-1 inline-flex items-center gap-0.5 rounded bg-amber-200 px-2 py-0.5 text-xs font-bold text-amber-800">
                   🔒 {t.locked}
@@ -487,14 +524,20 @@ function WaterFieldInner() {
                 <ThresholdBadge high={selectedHg.high_threshold} low={selectedHg.low_threshold} t={t} />
               )}
             </div>
+          ) : isLoadingHeadgates ? (
+            <div className="w-full rounded-xl border-2 border-stone-300 bg-stone-100 px-4 py-5 flex items-center gap-3">
+              <div className="w-5 h-5 rounded-full border-2 border-stone-400 border-t-stone-700 animate-spin" />
+              <span className="text-stone-500 text-base font-medium">Loading headgates...</span>
+            </div>
           ) : (
             <select
               value={selectedHeadgate}
               onChange={(e) => setSelectedHeadgate(e.target.value)}
               required
-              className="w-full rounded-xl border-2 border-stone-300 bg-white px-4 py-4 text-lg outline-none focus:border-stone-900 min-h-[56px]"
+              className="w-full rounded-xl border-2 border-stone-300 bg-white px-4 py-4 text-lg outline-none focus:border-stone-900 min-h-[56px] appearance-none"
+              style={{ backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2371717b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E")`, backgroundRepeat: "no-repeat", backgroundPosition: "right 16px center", backgroundSize: "20px" }}
             >
-              <option value="">{t.selectHeadgate}</option>
+              <option value="" disabled>{t.selectHeadgate}</option>
               {headgates.length === 0 && <option disabled>{t.noHeadgates}</option>}
               {headgates.map((hg) => (
                 <option key={hg.id} value={hg.id}>
@@ -619,15 +662,25 @@ function WaterFieldInner() {
         <button
           type="submit"
           disabled={!selectedHeadgate || !measurement || loading}
-          className="w-full rounded-xl bg-green-600 px-6 py-5 text-xl font-bold text-white disabled:opacity-50 active:bg-green-700 min-h-[64px] shadow-lg"
+          className="w-full rounded-xl bg-green-600 px-6 py-5 text-xl font-bold text-white disabled:opacity-50 active:bg-green-700 min-h-[64px] shadow-lg shadow-green-900/20 flex items-center justify-center gap-2"
         >
           {loading ? (
-            <span className="flex items-center justify-center gap-2">
-              <span className="w-5 h-5 border-2 border-white/50 border-t-white rounded-full animate-spin" />
+            <>
+              <span className="w-5 h-5 rounded-full border-2 border-white/40 border-t-white animate-spin" />
               {t.submitting}
-            </span>
-          ) : t.submit}
+            </>
+          ) : (
+            <>
+              <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7"/>
+              </svg>
+              {t.submit}
+            </>
+          )}
         </button>
+        {loading && (
+          <p className="text-center text-xs text-stone-400 mt-1">Submitting your reading...</p>
+        )}
       </div>
     </div>
   );