feat(admin): overhaul stops page with modal-based Add Stop

- AddStopModal: new modal component for creating stops inline
- ScheduleImportModal: fixed colors to match warm earth-tone theme
- StopsHeaderActions: use modals instead of page navigation
- Consistent emerald/stone palette with rounded cards

src/components/admin/StopsHeaderActions.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import ScheduleImportModal from "@/components/admin/ScheduleImportModal";
+import AddStopModal from "@/components/admin/AddStopModal";
 import { useRouter } from "next/navigation";
 
 type Props = {
@@ -9,10 +10,15 @@ type Props = {
 };
 
 export default function StopsHeaderActions({ brandId }: Props) {
-  const [open, setOpen] = useState(false);
+  const [showImport, setShowImport] = useState(false);
+  const [showAdd, setShowAdd] = useState(false);
   const router = useRouter();
 
-  function handleComplete(count: number) {
+  function handleImportComplete(count: number) {
+    router.refresh();
+  }
+
+  function handleAddSuccess(stopId: string) {
     router.refresh();
   }
 
@@ -20,26 +26,37 @@ export default function StopsHeaderActions({ brandId }: Props) {
     <>
       <div className="flex gap-3">
         <button
-          onClick={() => setOpen(true)}
-          className="rounded-xl border border-zinc-700 bg-zinc-900 px-4 py-3 text-sm font-medium text-zinc-300 hover:bg-zinc-800 hover:border-zinc-600 transition-colors"
+          onClick={() => setShowImport(true)}
+          className="flex items-center gap-2 rounded-xl border border-stone-300 bg-white px-4 py-2.5 text-sm font-medium text-stone-700 hover:bg-stone-50 hover:border-stone-400 transition-colors"
         >
+          <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
+          </svg>
           Upload Schedule
         </button>
-        <a
-          href="/admin/stops/new"
-          className="rounded-xl bg-emerald-600 hover:bg-emerald-500 active:bg-emerald-700 px-5 py-3 text-sm font-semibold text-white transition-colors shadow-lg shadow-emerald-900/30"
+        <button
+          onClick={() => setShowAdd(true)}
+          className="flex items-center gap-2 rounded-xl bg-emerald-600 hover:bg-emerald-500 active:bg-emerald-700 px-5 py-2.5 text-sm font-semibold text-white transition-colors shadow-sm shadow-emerald-200"
         >
-          + Add Stop
-        </a>
+          <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
+          </svg>
+          Add Stop
+        </button>
       </div>
 
-      {open && (
-        <ScheduleImportModal
-          brandId={brandId}
-          onClose={() => setOpen(false)}
-          onComplete={handleComplete}
-        />
-      )}
+      <ScheduleImportModal
+        brandId={brandId}
+        onClose={() => setShowImport(false)}
+        onComplete={handleImportComplete}
+      />
+
+      <AddStopModal
+        isOpen={showAdd}
+        onClose={() => setShowAdd(false)}
+        brandId={brandId}
+        onSuccess={handleAddSuccess}
+      />
     </>
   );
 }