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/admin/OrderPaymentSection.tsx

@@ -1,9 +1,11 @@
 "use client";
 
 import { useState } from "react";
+import { useRouter } from "next/navigation";
 import { formatDate } from "@/lib/format-date";
 import { updateOrder } from "@/actions/orders/update-order";
 import { createRefund } from "@/actions/orders/create-refund";
+import { useToast, AdminButton, AdminInput } from "./design-system";
 
 type Refund = {
   id: string;
@@ -41,6 +43,8 @@ export default function OrderPaymentSection({
   payment_transaction_id,
   existingRefunds,
 }: OrderPaymentSectionProps) {
+  const router = useRouter();
+  const { success: showSuccess, error: showError } = useToast();
   const [processor, setProcessor] = useState(payment_processor ?? "");
   const [status, setStatus] = useState(payment_status ?? "manual");
   const [transactionId, setTransactionId] = useState(payment_transaction_id ?? "");
@@ -52,6 +56,28 @@ export default function OrderPaymentSection({
   const [saved, setSaved] = useState(false);
   const [refundSaved, setRefundSaved] = useState(false);
 
+  const totalRefunded = existingRefunds
+    .filter((r) => r.status === "completed")
+    .reduce((sum, r) => sum + Number(r.amount), 0);
+  const remainingBalance = Math.max(0, orderTotal - totalRefunded);
+
+  // Validation for refund
+  const [refundError, setRefundError] = useState<string | null>(null);
+
+  function validateRefund(): boolean {
+    const amount = Number(refundAmount);
+    if (!amount || amount <= 0) {
+      setRefundError("Please enter a valid refund amount");
+      return false;
+    }
+    if (amount > remainingBalance) {
+      setRefundError(`Amount cannot exceed remaining balance of ${formatCurrency(remainingBalance)}`);
+      return false;
+    }
+    setRefundError(null);
+    return true;
+  }
+
   async function handleSavePayment(e: React.FormEvent) {
     e.preventDefault();
     setSaving(true);
@@ -65,8 +91,10 @@ export default function OrderPaymentSection({
     });
 
     if (!result.success) {
+      showError("Failed to save", result.error ?? "Please try again");
       setError(result.error ?? "Failed to save");
     } else {
+      showSuccess("Payment saved", "Payment details have been updated");
       setSaved(true);
     }
     setSaving(false);
@@ -74,8 +102,9 @@ export default function OrderPaymentSection({
 
   async function handleRefund(e: React.FormEvent) {
     e.preventDefault();
+    if (!validateRefund()) return;
+
     const amount = Number(refundAmount);
-    if (!amount || amount <= 0) return;
 
     setRefunding(true);
     setError(null);
@@ -87,33 +116,55 @@ export default function OrderPaymentSection({
     });
 
     if (!result.success) {
+      showError("Failed to record refund", result.error ?? "Please try again");
       setError(result.error ?? "Failed to record refund");
     } else {
+      showSuccess("Refund recorded", `${formatCurrency(amount)} has been refunded`);
       setRefundAmount("");
       setRefundReason("");
       setRefundSaved(true);
+      router.refresh();
     }
     setRefunding(false);
   }
 
-  const totalRefunded = existingRefunds
-    .filter((r) => r.status === "completed")
-    .reduce((sum, r) => sum + Number(r.amount), 0);
-  const remainingBalance = Math.max(0, orderTotal - totalRefunded);
-
   return (
     <div className="space-y-5">
-      {error && (
-        <div className="rounded-xl bg-red-50 border border-red-200 p-4 text-sm text-red-600">
-          {error}
+      {/* Balance summary */}
+      <div className="rounded-xl border border-stone-200 bg-stone-50 p-4">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-xs font-medium text-stone-500">Order Total</p>
+            <p className="text-lg font-bold text-stone-900">{formatCurrency(orderTotal)}</p>
+          </div>
+          <div className="text-right">
+            <p className="text-xs font-medium text-stone-500">Refunded</p>
+            <p className="text-lg font-bold text-green-600">{formatCurrency(totalRefunded)}</p>
+          </div>
+          <div className="text-right">
+            <p className="text-xs font-medium text-stone-500">Balance Due</p>
+            <p className="text-lg font-bold text-[var(--admin-accent)]">{formatCurrency(remainingBalance)}</p>
+          </div>
         </div>
-      )}
+      </div>
 
       {/* Payment details */}
       <form onSubmit={handleSavePayment} className="space-y-4">
+        {error && (
+          <div className="rounded-xl bg-red-50 border border-red-200 p-4 text-sm text-red-600 flex items-start gap-3">
+            <svg className="h-5 w-5 shrink-0 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            {error}
+          </div>
+        )}
+
         {saved && (
-          <div className="rounded-xl bg-green-50 border border-green-200 p-4 text-sm text-green-700">
-            ✓ Payment details saved
+          <div className="rounded-xl bg-green-50 border border-green-200 p-4 text-sm text-green-700 flex items-center gap-3">
+            <svg className="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            Payment details saved
           </div>
         )}
 
@@ -123,9 +174,9 @@ export default function OrderPaymentSection({
             <select
               value={processor}
               onChange={(e) => setProcessor(e.target.value)}
-              className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2.5 text-sm outline-none focus:border-emerald-500"
+              className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2.5 text-sm outline-none focus:border-[var(--admin-accent)] focus:ring-2 focus:ring-[var(--admin-accent)]/20"
             >
-              <option value="">—</option>
+              <option value="">— None —</option>
               {["manual", "stripe", "square", "cash", "venmo", "other"].map((p) => (
                 <option key={p} value={p}>
                   {p.charAt(0).toUpperCase() + p.slice(1)}
@@ -139,7 +190,7 @@ export default function OrderPaymentSection({
             <select
               value={status}
               onChange={(e) => setStatus(e.target.value)}
-              className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2.5 text-sm outline-none focus:border-emerald-500"
+              className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2.5 text-sm outline-none focus:border-[var(--admin-accent)] focus:ring-2 focus:ring-[var(--admin-accent)]/20"
             >
               {["pending", "paid", "failed", "refunded", "cancelled"].map((s) => (
                 <option key={s} value={s}>
@@ -157,24 +208,25 @@ export default function OrderPaymentSection({
             value={transactionId}
             onChange={(e) => setTransactionId(e.target.value)}
             placeholder="External payment reference"
-            className="w-full rounded-xl border border-stone-200 bg-white px-4 py-2.5 text-sm outline-none focus:border-emerald-500"
+            className="w-full rounded-xl border border-stone-200 bg-white px-4 py-2.5 text-sm outline-none focus:border-[var(--admin-accent)] focus:ring-2 focus:ring-[var(--admin-accent)]/20"
           />
         </div>
 
-        <button
+        <AdminButton
           type="submit"
           disabled={saving}
-          className="rounded-xl bg-emerald-600 px-5 py-2.5 text-sm font-bold text-white hover:bg-emerald-700 disabled:opacity-50"
+          isLoading={saving}
+          variant="primary"
         >
           {saving ? "Saving..." : "Save Payment Details"}
-        </button>
+        </AdminButton>
       </form>
 
       {/* Refund history */}
       {existingRefunds.length > 0 && (
         <div>
           <p className="mb-3 text-sm font-semibold text-stone-700">
-            Refunds ({existingRefunds.length})
+            Refund History ({existingRefunds.length})
           </p>
           <div className="space-y-2">
             {existingRefunds.map((r) => (
@@ -196,8 +248,8 @@ export default function OrderPaymentSection({
                 <span
                   className={`rounded-full px-2.5 py-0.5 text-xs font-bold ${
                     r.status === "completed"
-                      ? "bg-green-50 text-green-700"
-                      : "bg-stone-100 text-stone-500"
+                      ? "bg-green-50 text-green-700 border border-green-200"
+                      : "bg-stone-100 text-stone-500 border border-stone-200"
                   }`}
                 >
                   {r.status}
@@ -205,56 +257,70 @@ export default function OrderPaymentSection({
               </div>
             ))}
           </div>
-          <div className="mt-2 flex justify-between rounded-xl border border-stone-200 bg-stone-50 px-4 py-2.5 text-sm">
-            <span className="text-stone-500">Total refunded</span>
-            <span className="font-semibold text-stone-900">
-              {formatCurrency(totalRefunded)}
-            </span>
-          </div>
         </div>
       )}
 
       {/* Record a refund */}
-      <div className="rounded-xl border border-dashed border-stone-300 bg-stone-50 p-4">
-        <p className="mb-3 text-sm font-semibold text-stone-700">Record a Refund</p>
-        {refundSaved && (
-          <div className="mb-3 rounded-xl bg-green-50 border border-green-200 p-3 text-sm text-green-700">
-            ✓ Refund recorded
-          </div>
-        )}
-        <form onSubmit={handleRefund} className="space-y-3">
-          <div>
-            <label className="mb-1 block text-xs font-semibold text-stone-500">Amount</label>
-            <input
-              type="number"
-              step="0.01"
-              min="0.01"
-              max={remainingBalance}
-              value={refundAmount}
-              onChange={(e) => setRefundAmount(e.target.value)}
-              placeholder={`Max ${formatCurrency(remainingBalance)}`}
-              className="w-full rounded-xl border border-stone-200 bg-white px-4 py-2.5 text-sm outline-none focus:border-emerald-500"
-            />
-          </div>
-          <div>
-            <label className="mb-1 block text-xs font-semibold text-stone-500">Reason</label>
-            <input
-              type="text"
-              value={refundReason}
-              onChange={(e) => setRefundReason(e.target.value)}
-              placeholder="Customer request, defective product, etc."
-              className="w-full rounded-xl border border-stone-200 bg-white px-4 py-2.5 text-sm outline-none focus:border-emerald-500"
-            />
-          </div>
-          <button
-            type="submit"
-            disabled={!refundAmount || Number(refundAmount) <= 0 || refunding}
-            className="w-full rounded-xl border border-red-200 bg-red-50 px-4 py-2.5 text-sm font-semibold text-red-600 hover:bg-red-100 disabled:opacity-50"
-          >
-            {refunding ? "Processing..." : "Record Refund"}
-          </button>
-        </form>
-      </div>
+      {remainingBalance > 0 && (
+        <div className="rounded-xl border border-dashed border-stone-300 bg-stone-50 p-4">
+          <p className="mb-3 text-sm font-semibold text-stone-700">Record a Refund</p>
+          {refundSaved && (
+            <div className="mb-3 rounded-xl bg-green-50 border border-green-200 p-3 text-sm text-green-700 flex items-center gap-2">
+              <svg className="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              Refund recorded successfully
+            </div>
+          )}
+          <form onSubmit={handleRefund} className="space-y-3">
+            <div>
+              <label className="mb-1 block text-xs font-semibold text-stone-500">Amount</label>
+              <div className="relative">
+                <span className="absolute left-3 top-1/2 -translate-y-1/2 text-stone-400 text-sm">$</span>
+                <input
+                  type="number"
+                  step="0.01"
+                  min="0.01"
+                  max={remainingBalance}
+                  value={refundAmount}
+                  onChange={(e) => {
+                    setRefundAmount(e.target.value);
+                    setRefundError(null);
+                  }}
+                  placeholder={`Max ${formatCurrency(remainingBalance)}`}
+                  className={`w-full rounded-xl border bg-white pl-8 pr-4 py-2.5 text-sm outline-none focus:ring-2 focus:ring-[var(--admin-accent)]/20 ${
+                    refundError
+                      ? "border-red-400 bg-red-50"
+                      : "border-stone-200 focus:border-[var(--admin-accent)]"
+                  }`}
+                />
+              </div>
+              {refundError && (
+                <p className="mt-1 text-xs text-red-500">{refundError}</p>
+              )}
+            </div>
+            <div>
+              <label className="mb-1 block text-xs font-semibold text-stone-500">Reason</label>
+              <input
+                type="text"
+                value={refundReason}
+                onChange={(e) => setRefundReason(e.target.value)}
+                placeholder="Customer request, defective product, etc."
+                className="w-full rounded-xl border border-stone-200 bg-white px-4 py-2.5 text-sm outline-none focus:border-[var(--admin-accent)] focus:ring-2 focus:ring-[var(--admin-accent)]/20"
+              />
+            </div>
+            <AdminButton
+              type="submit"
+              disabled={!refundAmount || Number(refundAmount) <= 0 || refunding}
+              isLoading={refunding}
+              variant="danger"
+              fullWidth
+            >
+              {refunding ? "Processing..." : `Record Refund (Max ${formatCurrency(remainingBalance)})`}
+            </AdminButton>
+          </form>
+        </div>
+      )}
     </div>
   );
 }