update

frontend/src/components/AvailabilityHeatmapV2.tsx

@@ -343,12 +343,18 @@ export const AvailabilityHeatmapV2 = ({
 
                       // Styling
                       let bgClass = ""; // Default transparent
-                      if (!slot) bgClass = "bg-muted/10 pattern-diagonal-lines opacity-50";
-                      else if (isFull) bgClass = "bg-emerald-500/90 hover:bg-emerald-600 shadow-sm";
-                      else if (isPartial) bgClass = "bg-amber-400/80 hover:bg-amber-500 shadow-sm";
-                      else if (isNone || isPartialHidden) bgClass = "bg-transparent hover:bg-muted/20";
 
-                      if (tooSoon && slot) bgClass = cn(bgClass, "opacity-30 cursor-not-allowed pattern-diagonal-lines");
+                      if (!slot) {
+                        bgClass = "bg-muted/10 pattern-diagonal-lines opacity-50";
+                      } else if (tooSoon) {
+                        bgClass = "bg-muted/20 pattern-diagonal-lines cursor-not-allowed border border-border/10";
+                      } else if (isFull) {
+                        bgClass = "bg-emerald-500/90 hover:bg-emerald-600 shadow-sm";
+                      } else if (isPartial) {
+                        bgClass = "bg-amber-400/80 hover:bg-amber-500 shadow-sm";
+                      } else if (isNone || isPartialHidden) {
+                        bgClass = "bg-muted/50 hover:bg-muted/70 border border-border/20";
+                      }
 
                       return (
                         <div key={date.toISOString()} className="p-1 h-[52px] border-r border-border/30 last:border-0">
@@ -364,7 +370,7 @@ export const AvailabilityHeatmapV2 = ({
                                   {isFull && <Check className="w-4 h-4 text-white opacity-0 group-hover/cell:opacity-100 transition-opacity" />}
                                 </div>
                               </PopoverTrigger>
-                              <PopoverContent className="w-72 p-0 rounded-xl overflow-hidden shadow-xl border-border" side="right" align="start">
+                              <PopoverContent className="w-72 p-0 rounded-xl overflow-hidden shadow-xl border-border" side="right" align={hour >= 12 ? "end" : "start"}>
                                 <div className="p-4 bg-muted/30 border-b border-border/50">
                                   <h4 className="font-semibold text-base flex items-center gap-2">
                                     <CalendarIcon className="w-4 h-4 text-muted-foreground" />
@@ -439,11 +445,11 @@ export const AvailabilityHeatmapV2 = ({
             </div>
           )}
           <div className="flex items-center gap-2">
-            <div className="w-3 h-3 rounded border border-slate-300 bg-slate-100 dark:bg-slate-800 dark:border-slate-700"></div>
+            <div className="w-3 h-3 rounded bg-muted/50 border border-border/20"></div>
             <span className="text-muted-foreground">Busy / No Match</span>
           </div>
           <div className="flex items-center gap-2">
-            <div className="w-3 h-3 rounded bg-muted/30 pattern-diagonal-lines ring-1 ring-border/50"></div>
+            <div className="w-3 h-3 rounded bg-muted/20 pattern-diagonal-lines border border-border/10"></div>
             <span className="text-muted-foreground">Past / Too Soon</span>
           </div>
         </div>

frontend/src/index.css

@@ -233,3 +233,15 @@
   0%, 100% { opacity: 1; }
   50% { opacity: 0.7; }
 }
+
+.pattern-diagonal-lines {
+  background-image: repeating-linear-gradient(
+    45deg,
+    currentColor,
+    currentColor 1px,
+    transparent 1px,
+    transparent 10px
+  );
+  background-size: 10px 10px;
+  opacity: 0.1;
+}

frontend/src/pages/Index.tsx

@@ -392,13 +392,16 @@ const Index = ({ defaultTab = 'schedule' }: IndexProps) => {
                             )}
                           </div>
 
-                          <div className="border-t border-border pt-4">
+                          <div className="border-t border-border pt-4 mt-8">
+                            <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-3 block">
+                              Danger Zone
+                            </Label>
                             <AlertDialog>
                               <AlertDialogTrigger asChild>
                                 <Button
-                                  variant="destructive"
+                                  variant="outline"
                                   size="sm"
-                                  className="w-full"
+                                  className="text-destructive hover:text-destructive-foreground hover:bg-destructive border-destructive/30"
                                 >
                                   Clear All Bookings
                                 </Button>