@underverse-ui/underverse 0.2.55 → 0.2.56

package/dist/index.cjs

@@ -3650,6 +3650,23 @@ var useShadCNAnimations = () => {
 
 // ../../components/ui/Popover.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
+function assignRef(ref, value) {
+  if (!ref) return;
+  if (typeof ref === "function") {
+    ref(value);
+    return;
+  }
+  try {
+    ref.current = value;
+  } catch {
+  }
+}
+function getTransformOrigin(side, align) {
+  if (side === "top") return `${align === "end" ? "right" : "left"} bottom`;
+  if (side === "bottom") return `${align === "end" ? "right" : "left"} top`;
+  if (side === "left") return "right top";
+  return "left top";
+}
 function normalizePlacement(placement) {
   switch (placement) {
     case "top":
@@ -3738,10 +3755,10 @@ var Popover = ({
 }) => {
   const isControlled = open !== void 0;
   const [internalOpen, setInternalOpen] = React14.useState(false);
-  const [dropdownPosition, setDropdownPosition] = React14.useState(null);
-  const [lastTriggerRect, setLastTriggerRect] = React14.useState(null);
   const triggerRef = React14.useRef(null);
-  const popoverRef = React14.useRef(null);
+  const positionerRef = React14.useRef(null);
+  const panelRef = React14.useRef(null);
+  const lastAppliedRef = React14.useRef(null);
   useShadCNAnimations();
   const isOpen = isControlled ? open : internalOpen;
   const setIsOpen = React14.useCallback(
@@ -3753,27 +3770,44 @@ var Popover = ({
   );
   const offset = 4;
   const padding = 8;
-  const renderedWidth = matchTriggerWidth ? lastTriggerRect?.width : contentWidth;
+  const initialPlacement = React14.useMemo(() => normalizePlacement(placement), [placement]);
   const updatePosition = React14.useCallback(() => {
     const triggerEl = triggerRef.current;
-    const popoverEl = popoverRef.current;
-    if (!triggerEl || !popoverEl) return;
+    const positionerEl = positionerRef.current;
+    const panelEl = panelRef.current;
+    if (!triggerEl || !positionerEl || !panelEl) return;
     const triggerRect = triggerEl.getBoundingClientRect();
-    const measuredWidth = popoverEl.offsetWidth;
-    const measuredHeight = popoverEl.offsetHeight;
-    const contentRect = popoverEl.getBoundingClientRect();
-    const contentWidth2 = measuredWidth || contentRect.width;
-    const contentHeight = measuredHeight || contentRect.height;
+    const widthWanted = matchTriggerWidth ? triggerRect.width : contentWidth;
+    const widthPx = widthWanted == null ? void 0 : Math.max(0, Math.round(widthWanted));
+    if (widthPx == null) {
+      if (positionerEl.style.width) positionerEl.style.width = "";
+    } else if (positionerEl.style.width !== `${widthPx}px`) {
+      positionerEl.style.width = `${widthPx}px`;
+    }
+    const prevApplied = lastAppliedRef.current;
+    const measuredWidth = positionerEl.offsetWidth;
+    const measuredHeight = positionerEl.offsetHeight;
+    const contentRect = positionerEl.getBoundingClientRect();
+    const contentBoxWidth = measuredWidth || contentRect.width;
+    const contentBoxHeight = measuredHeight || contentRect.height;
     const next = computePopoverPosition({
       triggerRect,
-      contentSize: { width: contentWidth2, height: contentHeight },
+      contentSize: { width: contentBoxWidth, height: contentBoxHeight },
       placement,
       offset,
       padding,
       viewport: { width: window.innerWidth, height: window.innerHeight }
     });
-    setDropdownPosition(next);
-  }, [placement]);
+    const top = Math.round(next.top);
+    const left = Math.round(next.left);
+    const applied = prevApplied && Math.abs(prevApplied.top - top) < 0.5 && Math.abs(prevApplied.left - left) < 0.5 && prevApplied.side === next.side && prevApplied.align === next.align && prevApplied.width === widthPx;
+    if (applied) return;
+    lastAppliedRef.current = { top, left, side: next.side, align: next.align, width: widthPx };
+    positionerEl.style.transform = `translate3d(${left}px, ${top}px, 0)`;
+    panelEl.style.transformOrigin = getTransformOrigin(next.side, next.align);
+    if (positionerEl.style.visibility !== "visible") positionerEl.style.visibility = "visible";
+    if (positionerEl.style.pointerEvents !== "auto") positionerEl.style.pointerEvents = "auto";
+  }, [placement, matchTriggerWidth, contentWidth]);
   React14.useLayoutEffect(() => {
     if (!isOpen) return;
     updatePosition();
@@ -3787,7 +3821,17 @@ var Popover = ({
       cancelAnimationFrame(raf1);
       cancelAnimationFrame(raf2);
     };
-  }, [isOpen, updatePosition, renderedWidth]);
+  }, [isOpen, updatePosition]);
+  React14.useEffect(() => {
+    if (!isOpen) return;
+    let raf = 0;
+    const tick = () => {
+      updatePosition();
+      raf = window.requestAnimationFrame(tick);
+    };
+    raf = window.requestAnimationFrame(tick);
+    return () => window.cancelAnimationFrame(raf);
+  }, [isOpen, updatePosition]);
   React14.useEffect(() => {
     if (!isOpen) return;
     let raf = 0;
@@ -3798,34 +3842,34 @@ var Popover = ({
     handler();
     window.addEventListener("resize", handler);
     window.addEventListener("scroll", handler, true);
+    document.addEventListener("scroll", handler, true);
     return () => {
       cancelAnimationFrame(raf);
       window.removeEventListener("resize", handler);
       window.removeEventListener("scroll", handler, true);
+      document.removeEventListener("scroll", handler, true);
     };
   }, [isOpen, updatePosition]);
   React14.useEffect(() => {
     if (!isOpen) return;
-    if (!popoverRef.current) return;
     if (typeof ResizeObserver === "undefined") return;
     const ro = new ResizeObserver(() => updatePosition());
-    ro.observe(popoverRef.current);
+    if (positionerRef.current) ro.observe(positionerRef.current);
+    if (triggerRef.current) ro.observe(triggerRef.current);
     return () => ro.disconnect();
   }, [isOpen, updatePosition]);
   React14.useLayoutEffect(() => {
     if (!isOpen) {
-      setDropdownPosition(null);
+      lastAppliedRef.current = null;
       return;
     }
-    const rect = triggerRef.current?.getBoundingClientRect();
-    if (rect) setLastTriggerRect({ width: rect.width });
   }, [isOpen]);
   React14.useEffect(() => {
     if (!isOpen) return;
     const handleClickOutside = (event) => {
       const target = event.target;
       const triggerEl = triggerRef.current;
-      const popoverEl = popoverRef.current;
+      const popoverEl = positionerRef.current;
       if (!triggerEl || !popoverEl) return;
       if (triggerEl.contains(target)) return;
       if (popoverEl.contains(target)) return;
@@ -3847,56 +3891,53 @@ var Popover = ({
   }, [isOpen, setIsOpen]);
   const handleTriggerClick = () => {
     if (!disabled) {
-      const next = !isOpen;
-      if (next) {
-        const rect = triggerRef.current?.getBoundingClientRect();
-        if (rect) setLastTriggerRect({ width: rect.width });
-        setDropdownPosition(null);
-      }
-      setIsOpen(next);
+      setIsOpen(!isOpen);
     }
   };
   const popoverContent = isOpen && typeof window !== "undefined" ? (0, import_react_dom3.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "div",
       {
-        ref: popoverRef,
+        ref: positionerRef,
         "data-popover": true,
         style: {
           position: "fixed",
-          top: dropdownPosition?.top ?? 0,
-          left: dropdownPosition?.left ?? 0,
-          width: renderedWidth ?? void 0,
+          top: 0,
+          left: 0,
+          transform: "translate3d(0, 0, 0)",
           zIndex: 9999,
-          visibility: dropdownPosition ? "visible" : "hidden",
-          pointerEvents: dropdownPosition ? "auto" : "none",
-          transformOrigin: (() => {
-            const { side, align } = dropdownPosition ?? normalizePlacement(placement);
-            if (side === "top") return `${align === "end" ? "right" : "left"} bottom`;
-            if (side === "bottom") return `${align === "end" ? "right" : "left"} top`;
-            if (side === "left") return "right top";
-            return "left top";
-          })()
+          visibility: "hidden",
+          pointerEvents: "none",
+          willChange: "transform"
         },
-        "data-state": "open",
-        role: "dialog",
-        "aria-modal": modal || void 0,
-        className: cn(
-          "z-9999",
-          // shadcn-like enter animation
-          "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-          className
-        ),
+        className: "z-9999",
         children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "div",
           {
+            ref: panelRef,
+            "data-state": "open",
+            role: "dialog",
+            "aria-modal": modal || void 0,
+            style: {
+              transformOrigin: getTransformOrigin(initialPlacement.side, initialPlacement.align)
+            },
             className: cn(
-              "rounded-md border bg-popover text-popover-foreground shadow-md",
-              "backdrop-blur-sm bg-popover/95 border-border/60 p-4",
-              contentClassName
+              // shadcn-like enter animation
+              "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+              className
             ),
-            tabIndex: -1,
-            children
+            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              "div",
+              {
+                className: cn(
+                  "rounded-md border bg-popover text-popover-foreground shadow-md",
+                  "backdrop-blur-sm bg-popover/95 border-border/60 p-4",
+                  contentClassName
+                ),
+                tabIndex: -1,
+                children
+              }
+            )
           }
         )
       }
@@ -3907,7 +3948,10 @@ var Popover = ({
     (() => {
       const triggerEl = trigger;
       return React14.cloneElement(triggerEl, {
-        ref: triggerRef,
+        ref: (node) => {
+          triggerRef.current = node;
+          assignRef(triggerEl.props?.ref, node);
+        },
         onClick: (e) => {
           e.preventDefault();
           e.stopPropagation();
@@ -5678,7 +5722,6 @@ ScrollArea.displayName = "ScrollArea";
 // ../../components/ui/DatePicker.tsx
 var React23 = __toESM(require("react"), 1);
 var import_react15 = require("react");
-var import_react_dom7 = require("react-dom");
 var import_lucide_react14 = require("lucide-react");
 
 // ../../lib/utils/date.ts
@@ -5713,35 +5756,11 @@ var DatePicker = ({
   const t = useTranslations("DatePicker");
   const locale = useLocale();
   const [isOpen, setIsOpen] = React23.useState(false);
-  const [dropdownPosition, setDropdownPosition] = React23.useState(null);
   const [viewDate, setViewDate] = React23.useState(value || /* @__PURE__ */ new Date());
   const triggerRef = React23.useRef(null);
-  const dropdownRef = React23.useRef(null);
+  const wheelContainerRef = React23.useRef(null);
+  const wheelDeltaRef = React23.useRef(0);
   useShadCNAnimations();
-  const calculatePosition = React23.useCallback(() => {
-    if (!triggerRef.current) return null;
-    const rect = triggerRef.current.getBoundingClientRect();
-    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
-    return {
-      top: rect.bottom + scrollTop + 4,
-      left: rect.left + scrollLeft,
-      width: rect.width
-    };
-  }, []);
-  React23.useEffect(() => {
-    if (!isOpen) return;
-    const handler = () => {
-      const pos = calculatePosition();
-      if (pos) setDropdownPosition(pos);
-    };
-    window.addEventListener("resize", handler);
-    window.addEventListener("scroll", handler, true);
-    return () => {
-      window.removeEventListener("resize", handler);
-      window.removeEventListener("scroll", handler, true);
-    };
-  }, [isOpen, calculatePosition]);
   React23.useEffect(() => {
     if (value) {
       setViewDate(value);
@@ -5749,31 +5768,6 @@ var DatePicker = ({
       setViewDate(/* @__PURE__ */ new Date());
     }
   }, [value]);
-  React23.useEffect(() => {
-    if (!isOpen) return;
-    const handleClickOutside = (event) => {
-      const target = event.target;
-      const trigger = triggerRef.current;
-      const dropdown = dropdownRef.current;
-      if (!trigger || !dropdown) return;
-      const clickedOutsideTrigger = !trigger.contains(target);
-      const clickedOutsideDropdown = !dropdown.contains(target);
-      if (clickedOutsideTrigger && clickedOutsideDropdown) {
-        setIsOpen(false);
-      }
-    };
-    const handleEscape = (event) => {
-      if (event.key === "Escape") {
-        setIsOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    document.addEventListener("keydown", handleEscape);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("keydown", handleEscape);
-    };
-  }, [isOpen]);
   const handleDateSelect = (date) => {
     let selectedDate;
     if (value && (value.getHours() !== 0 || value.getMinutes() !== 0 || value.getSeconds() !== 0)) {
@@ -5798,19 +5792,52 @@ var DatePicker = ({
   const getFirstDayOfMonth = (date) => {
     return new Date(date.getFullYear(), date.getMonth(), 1).getDay();
   };
-  const navigateMonth = (direction) => {
+  const navigateMonth = React23.useCallback((direction) => {
     setViewDate((prev) => {
       const newDate = new Date(prev);
       newDate.setMonth(prev.getMonth() + (direction === "next" ? 1 : -1));
       return newDate;
     });
+  }, []);
+  const isElementVerticallyScrollable = (el) => {
+    const style = window.getComputedStyle(el);
+    const overflowY = style.overflowY;
+    if (overflowY !== "auto" && overflowY !== "scroll") return false;
+    const node = el;
+    return node.scrollHeight > node.clientHeight + 1;
   };
+  React23.useEffect(() => {
+    if (!isOpen) return;
+    const container = wheelContainerRef.current;
+    if (!container) return;
+    const onWheel = (event) => {
+      if (!container.contains(event.target)) return;
+      if (event.ctrlKey) return;
+      let node = event.target;
+      while (node && node !== container) {
+        if (isElementVerticallyScrollable(node)) return;
+        node = node.parentElement;
+      }
+      if (isElementVerticallyScrollable(container)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      wheelDeltaRef.current += event.deltaY;
+      const threshold = 70;
+      if (Math.abs(wheelDeltaRef.current) < threshold) return;
+      const steps = Math.trunc(wheelDeltaRef.current / threshold);
+      wheelDeltaRef.current -= steps * threshold;
+      const direction = steps > 0 ? "next" : "prev";
+      for (let i = 0; i < Math.abs(steps); i++) navigateMonth(direction);
+    };
+    container.addEventListener("wheel", onWheel, { passive: false });
+    return () => container.removeEventListener("wheel", onWheel);
+  }, [isOpen, navigateMonth]);
   const renderCalendar = () => {
     const daysInMonth = getDaysInMonth(viewDate);
     const firstDayOfMonth = getFirstDayOfMonth(viewDate);
     const days = [];
     for (let i = 0; i < firstDayOfMonth; i++) {
-      days.push(/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-8 h-8" }, `empty-${i}`));
+      days.push(/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: size === "sm" ? "w-7 h-7" : "w-8 h-8" }, `empty-${i}`));
     }
     const today = /* @__PURE__ */ new Date();
     today.setHours(0, 0, 0, 0);
@@ -5822,23 +5849,26 @@ var DatePicker = ({
       const totalDaysFromStart = firstDayOfMonth + day - 1;
       const rowIndex = Math.floor(totalDaysFromStart / 7);
       days.push(
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
           "button",
           {
             onClick: () => !isPastDate && handleDateSelect(date),
             disabled: isPastDate,
             style: {
-              animationDelay: isOpen ? `${rowIndex * 50}ms` : "0ms"
+              animationDelay: isOpen ? `${rowIndex * 40}ms` : "0ms"
             },
             className: cn(
               size === "sm" ? "w-7 h-7 text-[12px]" : "w-8 h-8 text-sm",
-              "datepicker-day rounded-md focus:outline-none",
-              "transition-colors",
-              isPastDate && "opacity-40 cursor-not-allowed text-muted-foreground",
-              isSelected ? "bg-primary! text-primary-foreground font-bold ring-2 ring-primary-foreground/60 shadow-lg scale-105 z-10 hover:bg-primary! focus:bg-primary! focus:text-primary-foreground" : !isPastDate && "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
-              isToday2 && !isSelected && "bg-accent text-accent-foreground font-semibold"
+              "datepicker-day rounded-lg focus:outline-none relative",
+              "transition-all duration-200 font-medium",
+              isPastDate && "opacity-30 cursor-not-allowed text-muted-foreground",
+              isSelected ? "bg-gradient-to-br from-primary to-primary/80 text-primary-foreground font-bold shadow-lg shadow-primary/30 scale-110 z-10 hover:from-primary hover:to-primary/70" : !isPastDate && "hover:bg-accent/80 hover:text-accent-foreground hover:scale-105 focus:bg-accent focus:text-accent-foreground",
+              isToday2 && !isSelected && "bg-primary/15 text-primary font-bold ring-2 ring-primary/30"
             ),
-            children: day
+            children: [
+              day,
+              isToday2 && !isSelected && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "absolute -bottom-0.5 left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-primary" })
+            ]
           },
           day
         )
@@ -5846,62 +5876,102 @@ var DatePicker = ({
     }
     return days;
   };
-  const datePickerContent = isOpen && dropdownPosition ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-    "div",
-    {
-      "data-datepicker": true,
-      style: {
-        position: "absolute",
-        top: dropdownPosition?.top || 0,
-        left: dropdownPosition?.left || 0,
-        width: size === "sm" ? dropdownPosition?.width || 224 : dropdownPosition?.width || 256,
-        zIndex: 9999,
-        pointerEvents: "none"
-      },
-      "data-state": isOpen ? "open" : "closed",
-      className: cn(
-        "z-9999",
-        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
+  const datePickerContent = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { ref: wheelContainerRef, "data-datepicker": true, className: "w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center justify-between mb-4 px-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => navigateMonth("prev"),
+          className: cn(
+            "p-2 rounded-xl transition-all duration-200",
+            "bg-muted/50 hover:bg-muted text-muted-foreground hover:text-foreground",
+            "hover:scale-110 active:scale-95 hover:shadow-md",
+            "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.ChevronLeft, { className: "h-4 w-4" })
+        }
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-sm font-bold text-foreground", children: viewDate.toLocaleDateString(locale === "vi" ? "vi-VN" : "en-US", { month: "long" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-xs text-muted-foreground font-medium", children: viewDate.getFullYear() })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => navigateMonth("next"),
+          className: cn(
+            "p-2 rounded-xl transition-all duration-200",
+            "bg-muted/50 hover:bg-muted text-muted-foreground hover:text-foreground",
+            "hover:scale-110 active:scale-95 hover:shadow-md",
+            "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.ChevronRight, { className: "h-4 w-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cn("grid grid-cols-7 gap-1 mb-2 px-0.5"), children: (weekdayLabels || (locale === "vi" ? ["CN", "T2", "T3", "T4", "T5", "T6", "T7"] : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"])).map(
+      (day, idx) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         "div",
         {
-          ref: dropdownRef,
           className: cn(
-            "rounded-md border bg-popover text-popover-foreground shadow-md",
-            "backdrop-blur-sm bg-popover/95 border-border/60",
-            size === "sm" ? "p-3 w-56" : "p-4 w-64"
+            "text-center font-bold uppercase tracking-wide",
+            size === "sm" ? "text-[9px] py-1" : "text-[10px] py-1.5",
+            idx === 0 || idx === 6 ? "text-primary/70" : "text-muted-foreground/60"
+          ),
+          children: day
+        },
+        day
+      )
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "grid grid-cols-7 gap-1 p-1 rounded-xl bg-muted/20", children: renderCalendar() }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-2 mt-4 pt-3 border-t border-border/50", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            const today = /* @__PURE__ */ new Date();
+            handleDateSelect(today);
+          },
+          className: cn(
+            "flex-1 px-3 py-2 text-xs font-semibold rounded-xl",
+            "bg-gradient-to-r from-primary/10 to-primary/5 border border-primary/30",
+            "text-primary hover:from-primary/20 hover:to-primary/10 hover:border-primary/50",
+            "transition-all duration-300 flex items-center justify-center gap-2",
+            "hover:scale-[1.02] active:scale-[0.98] hover:shadow-md hover:shadow-primary/10"
           ),
-          style: { pointerEvents: "auto" },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Button_default, { variant: "ghost", size: "sm", onClick: () => navigateMonth("prev"), className: "p-1 h-auto", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.ChevronLeft, { className: "h-4 w-4" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "text-sm font-semibold", children: viewDate.toLocaleDateString(locale === "vi" ? "vi-VN" : "en-US", { month: "long", year: "numeric" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Button_default, { variant: "ghost", size: "sm", onClick: () => navigateMonth("next"), className: "p-1 h-auto", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.ChevronRight, { className: "h-4 w-4" }) })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cn("grid grid-cols-7 gap-1", size === "sm" ? "mb-1" : "mb-2"), children: (weekdayLabels || (locale === "vi" ? ["CN", "T2", "T3", "T4", "T5", "T6", "T7"] : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"])).map(
-              (day) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cn("text-muted-foreground text-center font-medium", size === "sm" ? "text-[10px] py-0.5" : "text-xs py-1"), children: day }, day)
-            ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "grid grid-cols-7 gap-1", children: renderCalendar() }),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex items-center justify-end mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-              Button_default,
-              {
-                variant: "outline",
-                size: "sm",
-                onClick: () => {
-                  onChange(void 0);
-                  setIsOpen(false);
-                  setViewDate(/* @__PURE__ */ new Date());
-                },
-                children: clearLabel || t("clear")
-              }
-            ) })
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.Sparkles, { className: "w-3.5 h-3.5" }),
+            todayLabel || t("today")
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            onChange(void 0);
+            setIsOpen(false);
+            setViewDate(/* @__PURE__ */ new Date());
+          },
+          className: cn(
+            "flex-1 px-3 py-2 text-xs font-semibold rounded-xl",
+            "bg-gradient-to-r from-destructive/10 to-destructive/5 border border-destructive/30",
+            "text-destructive hover:from-destructive/20 hover:to-destructive/10 hover:border-destructive/50",
+            "transition-all duration-300 flex items-center justify-center gap-2",
+            "hover:scale-[1.02] active:scale-[0.98] hover:shadow-md hover:shadow-destructive/10"
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.X, { className: "w-3.5 h-3.5" }),
+            clearLabel || t("clear")
           ]
         }
       )
-    }
-  ) : null;
+    ] })
+  ] });
   const autoId = (0, import_react15.useId)();
   const resolvedId = id ? String(id) : `datepicker-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
@@ -5909,7 +5979,7 @@ var DatePicker = ({
   const radiusClass = size === "sm" ? "rounded-md" : "rounded-lg";
   const verticalGap = size === "sm" ? "space-y-1.5" : "space-y-2";
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cn("w-full group", verticalGap), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    label && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex items-center justify-between mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
       "label",
       {
         id: labelId,
@@ -5917,82 +5987,122 @@ var DatePicker = ({
         onClick: () => triggerRef.current?.focus(),
         className: cn(
           labelSize,
-          "font-medium transition-colors duration-200",
-          disabled ? "text-muted-foreground" : "text-foreground group-focus-within:text-primary"
+          "font-semibold transition-colors duration-300 cursor-pointer",
+          disabled ? "text-muted-foreground" : "text-foreground group-focus-within:text-primary hover:text-primary"
         ),
         children: [
           label,
-          required && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-destructive ml-1", children: "*" })
+          required && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-destructive ml-1 animate-pulse", children: "*" })
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
-      "button",
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      Popover,
       {
-        ref: triggerRef,
-        type: "button",
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        placement: "bottom-start",
         disabled,
-        id: resolvedId,
-        "aria-labelledby": labelId,
-        onClick: () => {
-          const next = !isOpen;
-          if (next) {
-            const pos = calculatePosition();
-            if (pos) setDropdownPosition(pos);
+        contentWidth: size === "sm" ? 240 : 280,
+        contentClassName: cn(
+          "p-0",
+          "backdrop-blur-xl bg-popover/95 border-border/40 shadow-2xl",
+          "rounded-2xl",
+          // Keep usable on small viewports (wheel scroll should stay within the popover if it overflows)
+          "max-w-[calc(100vw-1rem)] max-h-[calc(100vh-6rem)] overflow-auto overscroll-contain",
+          size === "sm" ? "p-4" : "p-5",
+          "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-300"
+        ),
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+          "button",
+          {
+            ref: triggerRef,
+            type: "button",
+            disabled,
+            id: resolvedId,
+            "aria-labelledby": labelId,
+            className: cn(
+              "group flex w-full items-center justify-between border bg-background/80 backdrop-blur-sm",
+              size === "sm" ? "rounded-lg" : "rounded-xl",
+              size === "sm" ? "px-2.5 py-1.5 text-sm h-8 md:h-7 md:text-xs md:py-1" : "px-3 py-2.5 text-sm h-11",
+              "border-border/60 hover:border-primary/40",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+              "disabled:opacity-50 disabled:cursor-not-allowed",
+              "hover:bg-accent/10 hover:shadow-lg hover:shadow-primary/5 hover:-translate-y-0.5",
+              "transition-all duration-300 ease-out",
+              isOpen && "ring-2 ring-primary/30 border-primary/50 shadow-lg shadow-primary/10",
+              className
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-2.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                  "div",
+                  {
+                    className: cn(
+                      "flex items-center justify-center rounded-lg p-1.5 transition-all duration-300",
+                      isOpen ? "bg-primary/15 text-primary" : "bg-muted/50 text-muted-foreground group-hover:bg-primary/10 group-hover:text-primary"
+                    ),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.Calendar, { className: cn(size === "sm" ? "h-3.5 w-3.5" : "h-4 w-4", "transition-transform duration-300", isOpen && "scale-110") })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                  "span",
+                  {
+                    className: cn("truncate font-medium transition-colors duration-200", !value && "text-muted-foreground", value && "text-foreground"),
+                    children: value ? formatDateDisplay(value) : placeholder || t("placeholder")
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-1", children: [
+                value && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                  "span",
+                  {
+                    role: "button",
+                    "aria-label": clearLabel || t("clear"),
+                    tabIndex: 0,
+                    onClick: (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      onChange(void 0);
+                      setViewDate(/* @__PURE__ */ new Date());
+                    },
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        onChange(void 0);
+                        setViewDate(/* @__PURE__ */ new Date());
+                      }
+                    },
+                    className: cn(
+                      "inline-flex items-center justify-center rounded-lg p-1",
+                      "text-muted-foreground hover:text-destructive hover:bg-destructive/10",
+                      "transition-all duration-200 cursor-pointer hover:scale-110"
+                    ),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.X, { className: "h-3.5 w-3.5" })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                  "span",
+                  {
+                    className: cn("transition-all duration-300 text-muted-foreground group-hover:text-foreground", isOpen && "rotate-180 text-primary"),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("svg", { className: size === "sm" ? "h-3.5 w-3.5" : "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })
+                  }
+                )
+              ] })
+            ]
           }
-          setIsOpen(next);
-        },
-        className: cn(
-          cn(
-            "flex w-full items-center justify-between border border-input bg-background",
-            radiusClass,
-            size === "sm" ? "px-2.5 py-1.5 text-sm h-8 md:h-7 md:text-xs md:py-1" : "px-3 py-2 text-sm h-10"
-          ),
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-          "disabled:opacity-50 disabled:cursor-not-allowed",
-          "hover:bg-accent/5 transition-colors",
-          className
         ),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: cn("truncate", !value && "text-muted-foreground"), children: value ? formatDateDisplay(value) : placeholder || t("placeholder") }),
-          value && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-            "span",
-            {
-              role: "button",
-              "aria-label": clearLabel || t("clear"),
-              tabIndex: 0,
-              onClick: (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                onChange(void 0);
-                setViewDate(/* @__PURE__ */ new Date());
-              },
-              onKeyDown: (e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  onChange(void 0);
-                  setViewDate(/* @__PURE__ */ new Date());
-                }
-              },
-              className: "absolute right-8 inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors cursor-pointer",
-              style: { width: 20, height: 20 },
-              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.X, { className: "h-3.5 w-3.5" })
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.Calendar, { className: "h-4 w-4 text-muted-foreground ml-2" })
-        ]
+        children: datePickerContent
       }
-    ),
-    isOpen && dropdownPosition && typeof window !== "undefined" && (0, import_react_dom7.createPortal)(datePickerContent, document.body)
+    )
   ] });
 };
 var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select date range...", className, disablePastDates = false }) => {
   const locale = useLocale();
   const [isOpen, setIsOpen] = React23.useState(false);
-  const [dropdownPosition, setDropdownPosition] = React23.useState(null);
-  const triggerRef = React23.useRef(null);
-  const panelRef = React23.useRef(null);
+  const wheelContainerRef = React23.useRef(null);
+  const wheelDeltaRef = React23.useRef(0);
   const [viewDate, setViewDate] = React23.useState(startDate || /* @__PURE__ */ new Date());
   const [tempStart, setTempStart] = React23.useState(startDate || null);
   const [tempEnd, setTempEnd] = React23.useState(endDate || null);
@@ -6003,43 +6113,6 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
   React23.useEffect(() => {
     setTempEnd(endDate || null);
   }, [endDate]);
-  const calculatePosition = React23.useCallback(() => {
-    if (!triggerRef.current) return null;
-    const rect = triggerRef.current.getBoundingClientRect();
-    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
-    return { top: rect.bottom + scrollTop + 4, left: rect.left + scrollLeft, width: rect.width };
-  }, []);
-  React23.useEffect(() => {
-    if (!isOpen) return;
-    const handler = () => {
-      const pos = calculatePosition();
-      if (pos) setDropdownPosition(pos);
-    };
-    window.addEventListener("resize", handler);
-    window.addEventListener("scroll", handler, true);
-    return () => {
-      window.removeEventListener("resize", handler);
-      window.removeEventListener("scroll", handler, true);
-    };
-  }, [isOpen, calculatePosition]);
-  React23.useEffect(() => {
-    if (!isOpen) return;
-    const handleClickOutside = (event) => {
-      if (triggerRef.current && !triggerRef.current.contains(event.target) && panelRef.current && !panelRef.current.contains(event.target)) {
-        setIsOpen(false);
-      }
-    };
-    const handleEscape = (event) => {
-      if (event.key === "Escape") setIsOpen(false);
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    document.addEventListener("keydown", handleEscape);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("keydown", handleEscape);
-    };
-  }, [isOpen]);
   const isSameDay2 = (a, b) => {
     if (!a || !b) return false;
     return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
@@ -6047,6 +6120,42 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
   const inRange = (d, s, e) => d > s && d < e;
   const getDaysInMonth = (d) => new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate();
   const getFirstDayOfMonth = (d) => new Date(d.getFullYear(), d.getMonth(), 1).getDay();
+  const navigateMonth = React23.useCallback((direction) => {
+    setViewDate((prev) => new Date(prev.getFullYear(), prev.getMonth() + (direction === "next" ? 1 : -1), 1));
+  }, []);
+  const isElementVerticallyScrollable = (el) => {
+    const style = window.getComputedStyle(el);
+    const overflowY = style.overflowY;
+    if (overflowY !== "auto" && overflowY !== "scroll") return false;
+    const node = el;
+    return node.scrollHeight > node.clientHeight + 1;
+  };
+  React23.useEffect(() => {
+    if (!isOpen) return;
+    const container = wheelContainerRef.current;
+    if (!container) return;
+    const onWheel = (event) => {
+      if (!container.contains(event.target)) return;
+      if (event.ctrlKey) return;
+      let node = event.target;
+      while (node && node !== container) {
+        if (isElementVerticallyScrollable(node)) return;
+        node = node.parentElement;
+      }
+      if (isElementVerticallyScrollable(container)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      wheelDeltaRef.current += event.deltaY;
+      const threshold = 70;
+      if (Math.abs(wheelDeltaRef.current) < threshold) return;
+      const steps = Math.trunc(wheelDeltaRef.current / threshold);
+      wheelDeltaRef.current -= steps * threshold;
+      const direction = steps > 0 ? "next" : "prev";
+      for (let i = 0; i < Math.abs(steps); i++) navigateMonth(direction);
+    };
+    container.addEventListener("wheel", onWheel, { passive: false });
+    return () => container.removeEventListener("wheel", onWheel);
+  }, [isOpen, navigateMonth]);
   const handleSelect = (date) => {
     const localDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
     if (!tempStart || tempStart && tempEnd) {
@@ -6105,16 +6214,16 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
             className: cn(
               "w-8 h-8 text-sm transition-all duration-200 focus:outline-none relative font-medium",
               // Disabled/past date state
-              isPastDate && "opacity-40 cursor-not-allowed text-muted-foreground",
+              isPastDate && "opacity-30 cursor-not-allowed text-muted-foreground",
               // Default state
-              !isPastDate && !isInRange && !isRangeStart && !isRangeEnd && "hover:bg-accent hover:text-accent-foreground rounded-md",
-              // Range selection styling - smooth continuous background
-              isInRange && "bg-primary/15 text-foreground shadow-sm",
-              (isRangeStart || isRangeEnd) && "bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm",
+              !isPastDate && !isInRange && !isRangeStart && !isRangeEnd && "hover:bg-accent/80 hover:text-accent-foreground hover:scale-105 rounded-lg",
+              // Range selection styling - smooth continuous background with gradient
+              isInRange && "bg-primary/15 text-foreground",
+              (isRangeStart || isRangeEnd) && "bg-gradient-to-br from-primary to-primary/80 text-primary-foreground hover:from-primary hover:to-primary/70 shadow-lg shadow-primary/25",
               // Only round the actual start and end of the range
-              isRangeStart && !isRangeEnd && "rounded-l-md rounded-r-none",
-              isRangeEnd && !isRangeStart && "rounded-r-md rounded-l-none",
-              isRangeStart && isRangeEnd && "rounded-md",
+              isRangeStart && !isRangeEnd && "rounded-l-lg rounded-r-none",
+              isRangeEnd && !isRangeStart && "rounded-r-lg rounded-l-none",
+              isRangeStart && isRangeEnd && "rounded-lg",
               // Single day selection
               // Hover effects for range
               isInRange && !isPastDate && "hover:bg-primary/25",
@@ -6128,81 +6237,115 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
     }
     return nodes;
   };
-  const panel = isOpen && dropdownPosition ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-    "div",
+  const panel = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { ref: wheelContainerRef, className: "w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center justify-between mb-4 px-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => navigateMonth("prev"),
+          className: cn(
+            "p-2 rounded-xl transition-all duration-200",
+            "bg-muted/50 hover:bg-muted text-muted-foreground hover:text-foreground",
+            "hover:scale-110 active:scale-95 hover:shadow-md",
+            "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.ChevronLeft, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-sm font-bold text-foreground", children: viewDate.toLocaleDateString(locale === "vi" ? "vi-VN" : "en-US", { month: "long" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-xs text-muted-foreground font-medium", children: viewDate.getFullYear() })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => navigateMonth("next"),
+          className: cn(
+            "p-2 rounded-xl transition-all duration-200",
+            "bg-muted/50 hover:bg-muted text-muted-foreground hover:text-foreground",
+            "hover:scale-110 active:scale-95 hover:shadow-md",
+            "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.ChevronRight, { className: "h-4 w-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "grid grid-cols-7 gap-1 mb-2 px-0.5", children: (locale === "vi" ? ["CN", "T2", "T3", "T4", "T5", "T6", "T7"] : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]).map((d, idx) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      "div",
+      {
+        className: cn(
+          "text-[10px] text-center py-1.5 font-bold uppercase tracking-wide",
+          idx === 0 || idx === 6 ? "text-primary/70" : "text-muted-foreground/60"
+        ),
+        children: d
+      },
+      d
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "grid grid-cols-7 gap-0.5 p-1 rounded-xl bg-muted/20", children: renderGrid() })
+  ] });
+  const displayFormat = (date) => formatDateShort(date);
+  const label = tempStart && tempEnd ? `${displayFormat(tempStart)} - ${displayFormat(tempEnd)}` : tempStart ? `${displayFormat(tempStart)} - ...` : placeholder;
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    Popover,
     {
-      style: { position: "absolute", top: dropdownPosition.top, left: dropdownPosition.left, width: dropdownPosition.width || 256, zIndex: 9999 },
-      "data-state": isOpen ? "open" : "closed",
-      className: cn(
-        "z-9999",
-        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
+      open: isOpen,
+      onOpenChange: setIsOpen,
+      placement: "bottom-start",
+      contentWidth: 280,
+      contentClassName: cn(
+        "p-0",
+        "backdrop-blur-xl bg-popover/95 border-border/40 shadow-2xl",
+        "rounded-2xl",
+        "max-w-[calc(100vw-1rem)] max-h-[calc(100vh-6rem)] overflow-auto overscroll-contain",
+        "p-5",
+        "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-300"
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
-        "div",
+      trigger: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+        "button",
         {
-          ref: panelRef,
-          className: cn("rounded-md border bg-popover text-popover-foreground shadow-md", "backdrop-blur-sm bg-popover/95 border-border/60 p-4 w-64"),
+          type: "button",
+          className: cn(
+            "group flex w-full items-center justify-between rounded-xl border bg-background/80 backdrop-blur-sm px-3 py-2.5 text-sm",
+            "border-border/60 hover:border-primary/40",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+            "hover:bg-accent/10 hover:shadow-lg hover:shadow-primary/5 hover:-translate-y-0.5",
+            "transition-all duration-300 ease-out",
+            isOpen && "ring-2 ring-primary/30 border-primary/50 shadow-lg shadow-primary/10",
+            className
+          ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-2.5", children: [
               /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-                Button_default,
+                "div",
                 {
-                  variant: "ghost",
-                  size: "sm",
-                  onClick: () => setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1)),
-                  className: "p-1 h-auto",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.ChevronLeft, { className: "h-4 w-4" })
+                  className: cn(
+                    "flex items-center justify-center rounded-lg p-1.5 transition-all duration-300",
+                    isOpen ? "bg-primary/15 text-primary" : "bg-muted/50 text-muted-foreground group-hover:bg-primary/10 group-hover:text-primary"
+                  ),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.Calendar, { className: cn("h-4 w-4 transition-transform duration-300", isOpen && "scale-110") })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "text-sm font-semibold", children: viewDate.toLocaleDateString(locale === "vi" ? "vi-VN" : "en-US", { month: "long", year: "numeric" }) }),
               /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-                Button_default,
+                "span",
                 {
-                  variant: "ghost",
-                  size: "sm",
-                  onClick: () => setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1)),
-                  className: "p-1 h-auto",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.ChevronRight, { className: "h-4 w-4" })
+                  className: cn(
+                    "truncate font-medium transition-colors duration-200",
+                    !tempStart && !tempEnd && "text-muted-foreground",
+                    (tempStart || tempEnd) && "text-foreground"
+                  ),
+                  children: label
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "grid grid-cols-7 gap-1 mb-2", children: (locale === "vi" ? ["CN", "T2", "T3", "T4", "T5", "T6", "T7"] : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]).map((d) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "text-xs text-muted-foreground text-center py-1 font-medium", children: d }, d)) }),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "grid grid-cols-7", children: renderGrid() })
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: cn("transition-all duration-300 text-muted-foreground group-hover:text-foreground", isOpen && "rotate-180 text-primary"), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
           ]
         }
-      )
+      ),
+      children: panel
     }
-  ) : null;
-  const displayFormat = (date) => formatDateShort(date);
-  const label = tempStart && tempEnd ? `${displayFormat(tempStart)} - ${displayFormat(tempEnd)}` : tempStart ? `${displayFormat(tempStart)} - ...` : placeholder;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
-      "button",
-      {
-        ref: triggerRef,
-        type: "button",
-        onClick: () => {
-          const next = !isOpen;
-          if (next) {
-            const pos = calculatePosition();
-            if (pos) setDropdownPosition(pos);
-          }
-          setIsOpen(next);
-        },
-        className: cn(
-          "flex w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-          className
-        ),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: cn("truncate", !tempStart && !tempEnd && "text-muted-foreground"), children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.Calendar, { className: "h-4 w-4 text-muted-foreground ml-2" })
-        ]
-      }
-    ),
-    isOpen && dropdownPosition && typeof window !== "undefined" && (0, import_react_dom7.createPortal)(panel, document.body)
-  ] });
+  );
 };
 
 // ../../components/ui/DateTimePicker.tsx
@@ -6496,6 +6639,175 @@ var React25 = __toESM(require("react"), 1);
 var import_lucide_react16 = require("lucide-react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var pad = (n) => n.toString().padStart(2, "0");
+var WHEEL_ITEM_HEIGHT = {
+  sm: 30,
+  md: 34,
+  lg: 40
+};
+var WHEEL_VISIBLE_ITEMS = 5;
+function WheelColumn({
+  labelText,
+  column,
+  items,
+  valueIndex,
+  onSelect,
+  scrollRef,
+  itemHeight,
+  animate,
+  focused,
+  setFocusedColumn,
+  onKeyDown
+}) {
+  const height = itemHeight * WHEEL_VISIBLE_ITEMS;
+  const paddingY = (height - itemHeight) / 2;
+  const rafRef = React25.useRef(0);
+  const lastIndexRef = React25.useRef(null);
+  const wheelDeltaRef = React25.useRef(0);
+  const scrollEndTimeoutRef = React25.useRef(null);
+  const suppressScrollSelectUntilRef = React25.useRef(0);
+  React25.useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const nextTop = Math.max(0, valueIndex) * itemHeight;
+    if (Math.abs(el.scrollTop - nextTop) > 1) {
+      el.scrollTo({ top: nextTop, behavior: animate ? "smooth" : "auto" });
+    }
+    lastIndexRef.current = valueIndex;
+    return () => {
+      if (scrollEndTimeoutRef.current != null) {
+        window.clearTimeout(scrollEndTimeoutRef.current);
+        scrollEndTimeoutRef.current = null;
+      }
+      cancelAnimationFrame(rafRef.current);
+    };
+  }, [animate, itemHeight, scrollRef, valueIndex]);
+  React25.useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const lastWheelSignRef = { current: 0 };
+    const lastStepAtRef = { current: 0 };
+    const lastStepSignRef = { current: 0 };
+    const onWheel = (event) => {
+      if (!el.contains(event.target)) return;
+      if (event.ctrlKey) return;
+      event.preventDefault();
+      event.stopPropagation();
+      setFocusedColumn(column);
+      if (document.activeElement !== el) el.focus({ preventScroll: true });
+      const sign = Math.sign(event.deltaY);
+      if (sign === 0) return;
+      if (lastWheelSignRef.current !== 0 && sign !== lastWheelSignRef.current) {
+        if (Date.now() - lastStepAtRef.current < 180 && lastStepSignRef.current !== 0) return;
+        wheelDeltaRef.current = 0;
+      }
+      lastWheelSignRef.current = sign;
+      let step = 0;
+      if (event.deltaMode !== 0 || Math.abs(event.deltaY) >= 40) {
+        step = sign;
+        wheelDeltaRef.current = 0;
+      } else {
+        wheelDeltaRef.current += event.deltaY;
+        const threshold = Math.min(12, Math.max(4, Math.round(itemHeight * 0.12)));
+        if (Math.abs(wheelDeltaRef.current) < threshold) return;
+        step = Math.sign(wheelDeltaRef.current);
+        wheelDeltaRef.current = 0;
+      }
+      const fromIndex = lastIndexRef.current ?? valueIndex;
+      const nextIndex = Math.max(0, Math.min(items.length - 1, fromIndex + step));
+      if (nextIndex === fromIndex) return;
+      lastStepAtRef.current = Date.now();
+      lastStepSignRef.current = step;
+      lastIndexRef.current = nextIndex;
+      suppressScrollSelectUntilRef.current = Date.now() + 350;
+      el.scrollTo({ top: nextIndex * itemHeight, behavior: animate ? "smooth" : "auto" });
+      onSelect(items[nextIndex]);
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => el.removeEventListener("wheel", onWheel);
+  }, [animate, column, itemHeight, items, onSelect, scrollRef, setFocusedColumn, valueIndex]);
+  const handleScroll = () => {
+    const el = scrollRef.current;
+    if (!el) return;
+    if (Date.now() < suppressScrollSelectUntilRef.current) return;
+    cancelAnimationFrame(rafRef.current);
+    rafRef.current = window.requestAnimationFrame(() => {
+      if (scrollEndTimeoutRef.current != null) {
+        window.clearTimeout(scrollEndTimeoutRef.current);
+      }
+      scrollEndTimeoutRef.current = window.setTimeout(() => {
+        const idx = Math.max(0, Math.min(items.length - 1, Math.round(el.scrollTop / itemHeight)));
+        if (lastIndexRef.current === idx) return;
+        lastIndexRef.current = idx;
+        suppressScrollSelectUntilRef.current = Date.now() + 350;
+        el.scrollTo({ top: idx * itemHeight, behavior: animate ? "smooth" : "auto" });
+        onSelect(items[idx]);
+      }, 120);
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex-1 min-w-[70px] max-w-[90px]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "text-[10px] font-bold uppercase tracking-wider text-muted-foreground/70 mb-3 text-center", children: labelText }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "relative rounded-xl bg-muted/30 overflow-hidden", style: { height }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        "div",
+        {
+          className: "pointer-events-none absolute inset-x-2 top-1/2 -translate-y-1/2 rounded-lg bg-gradient-to-r from-primary/20 via-primary/15 to-primary/20 border border-primary/30 shadow-sm shadow-primary/10",
+          style: { height: itemHeight }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "pointer-events-none absolute inset-x-0 top-0 h-12 bg-gradient-to-b from-background/95 via-background/60 to-transparent z-10" }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-12 bg-gradient-to-t from-background/95 via-background/60 to-transparent z-10" }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        "div",
+        {
+          ref: scrollRef,
+          className: cn(
+            "h-full overflow-y-auto overscroll-contain snap-y snap-mandatory scroll-smooth",
+            "scrollbar-none",
+            "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-xl"
+          ),
+          style: { paddingTop: paddingY, paddingBottom: paddingY },
+          role: "listbox",
+          "aria-label": `Select ${labelText.toLowerCase()}`,
+          tabIndex: focused ? 0 : -1,
+          onKeyDown: (e) => onKeyDown(e, column),
+          onFocus: () => setFocusedColumn(column),
+          onScroll: handleScroll,
+          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { children: items.map((n, index) => {
+            const dist = Math.abs(index - valueIndex);
+            const scale = 1 - Math.min(dist * 0.12, 0.36);
+            const opacity = 1 - Math.min(dist * 0.22, 0.75);
+            const isSelected = index === valueIndex;
+            return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                "aria-selected": isSelected,
+                className: cn(
+                  "w-full snap-center flex items-center justify-center rounded-lg transition-all duration-200 font-bold tabular-nums",
+                  isSelected ? "text-primary text-lg" : "text-muted-foreground hover:text-foreground/70"
+                ),
+                style: {
+                  height: itemHeight,
+                  transform: `scale(${scale})`,
+                  opacity
+                },
+                onClick: () => {
+                  const el = scrollRef.current;
+                  suppressScrollSelectUntilRef.current = Date.now() + 350;
+                  el?.scrollTo({ top: index * itemHeight, behavior: animate ? "smooth" : "auto" });
+                  onSelect(n);
+                },
+                children: pad(n)
+              },
+              n
+            );
+          }) })
+        }
+      )
+    ] })
+  ] });
+}
 function parseTime(input, fmt = "24", includeSeconds) {
   if (!input) return null;
   try {
@@ -6528,10 +6840,10 @@ function formatTime({ h, m, s, p }, fmt, includeSeconds) {
   return includeSeconds ? `${base}:${pad(s)}` : base;
 }
 var PRESETS = {
-  morning: { h: 9, m: 0, s: 0 },
-  afternoon: { h: 14, m: 0, s: 0 },
-  evening: { h: 18, m: 0, s: 0 },
-  night: { h: 21, m: 0, s: 0 }
+  morning: { h: 9, m: 0, s: 0, icon: import_lucide_react16.Coffee, label: "Morning", color: "from-amber-400 to-orange-400" },
+  afternoon: { h: 14, m: 0, s: 0, icon: import_lucide_react16.Sun, label: "Afternoon", color: "from-yellow-400 to-amber-400" },
+  evening: { h: 18, m: 0, s: 0, icon: import_lucide_react16.Sunset, label: "Evening", color: "from-orange-400 to-rose-400" },
+  night: { h: 21, m: 0, s: 0, icon: import_lucide_react16.Moon, label: "Night", color: "from-indigo-400 to-purple-400" }
 };
 function TimePicker({
   value,
@@ -6580,23 +6892,6 @@ function TimePicker({
       if (parsed) setParts(parsed);
     }
   }, [value, isControlled, format, includeSeconds]);
-  React25.useEffect(() => {
-    if (!open) return;
-    const scrollToSelected = (ref, targetValue, step) => {
-      if (!ref.current) return;
-      const buttons = ref.current.querySelectorAll("button");
-      const targetIndex = Math.floor(targetValue / step);
-      const targetButton = buttons[targetIndex];
-      if (targetButton) {
-        targetButton.scrollIntoView({ behavior: animate ? "smooth" : "auto", block: "center" });
-      }
-    };
-    setTimeout(() => {
-      scrollToSelected(hourScrollRef, parts.h, 1);
-      scrollToSelected(minuteScrollRef, parts.m, minuteStep);
-      if (includeSeconds) scrollToSelected(secondScrollRef, parts.s, secondStep);
-    }, 50);
-  }, [open, parts.h, parts.m, parts.s, minuteStep, secondStep, includeSeconds, animate]);
   const isTimeDisabled = React25.useCallback(
     (timeStr) => {
       if (!disabledTimes) return false;
@@ -6752,68 +7047,117 @@ function TimePicker({
       "aria-haspopup": "dialog",
       "aria-expanded": open,
       className: cn(
-        "flex w-full items-center justify-between border bg-background",
+        "group flex w-full items-center justify-between border bg-background/80 backdrop-blur-sm",
         sz.height,
         sz.padding,
         sz.text,
         radiusClass,
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
         "disabled:opacity-50 disabled:cursor-not-allowed",
-        "transition-all duration-200",
-        error && "border-destructive focus-visible:ring-destructive",
-        success && "border-green-500 focus-visible:ring-green-500",
-        !error && !success && "border-input hover:bg-accent/5",
-        animate && !disabled && "hover:shadow-md",
+        "transition-all duration-300 ease-out",
+        error && "border-destructive/60 focus-visible:ring-destructive/50 bg-destructive/5",
+        success && "border-green-500/60 focus-visible:ring-green-500/50 bg-green-500/5",
+        !error && !success && "border-border/60 hover:border-primary/40 hover:bg-accent/10",
+        animate && !disabled && "hover:shadow-lg hover:shadow-primary/5 hover:-translate-y-0.5",
+        open && "ring-2 ring-primary/30 border-primary/50 shadow-lg shadow-primary/10",
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.Clock, { className: cn(sz.icon, error ? "text-destructive" : success ? "text-green-500" : "text-muted-foreground") }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: cn("truncate", !value && !defaultValue && "text-muted-foreground"), children: value || defaultValue ? display : placeholder })
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-2.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+            "div",
+            {
+              className: cn(
+                "flex items-center justify-center rounded-md p-1.5 transition-all duration-300",
+                error ? "bg-destructive/10 text-destructive" : success ? "bg-green-500/10 text-green-500" : open ? "bg-primary/15 text-primary" : "bg-muted/50 text-muted-foreground group-hover:bg-primary/10 group-hover:text-primary"
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.Clock, { className: cn(sz.icon, "transition-transform duration-300", open && "rotate-12") })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+            "span",
+            {
+              className: cn(
+                "truncate font-medium transition-colors duration-200",
+                !value && !defaultValue && "text-muted-foreground",
+                value || defaultValue ? "text-foreground" : ""
+              ),
+              children: value || defaultValue ? display : placeholder
+            }
+          )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: cn("ml-2 transition-transform duration-200", open && "rotate-180"), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("svg", { className: sz.icon, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: cn("ml-2 transition-all duration-300 text-muted-foreground group-hover:text-foreground", open && "rotate-180 text-primary"), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("svg", { className: sz.icon, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
       ]
     }
   );
   const contentWidth = variant === "compact" ? 240 : variant === "inline" ? 320 : includeSeconds ? 340 : 300;
-  const itemSizeClasses = {
-    sm: { padding: "px-2 py-1", text: "text-xs" },
-    md: { padding: "px-3 py-2", text: "text-sm" },
-    lg: { padding: "px-4 py-3", text: "text-base" }
-  };
-  const itemSz = itemSizeClasses[size];
-  const timePickerContent = /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "space-y-3", children: [
-    allowManualInput && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-      Input_default,
-      {
-        placeholder: format === "12" ? "02:30 PM" : "14:30",
-        value: manualInput || display,
-        onChange: (e) => handleManualInput(e.target.value),
-        size: "sm",
-        variant: "outlined"
-      }
-    ) }),
-    showPresets && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "grid grid-cols-2 gap-2", children: Object.keys(PRESETS).map((preset) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-      "button",
-      {
-        type: "button",
-        className: cn(
-          "px-2 py-1.5 text-xs rounded-md border border-border hover:bg-accent/10 capitalize transition-all",
-          animate && "hover:scale-105 active:scale-95"
-        ),
-        onClick: () => setPreset(preset),
-        "aria-label": `Set time to ${preset}`,
-        children: preset
-      },
-      preset
-    )) }),
+  const itemHeight = WHEEL_ITEM_HEIGHT[size];
+  const setHourFromDisplay = (hourDisplay) => {
+    const period = parts.p ?? (parts.h >= 12 ? "PM" : "AM");
+    const nextH = format === "24" ? hourDisplay : (() => {
+      const base = hourDisplay % 12;
+      return period === "PM" ? base + 12 : base;
+    })();
+    const next = { ...parts, h: nextH, p: format === "12" ? period : parts.p };
+    setParts(next);
+    emit(next);
+  };
+  const timePickerContent = /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex items-center justify-center py-2 px-3 rounded-xl bg-gradient-to-r from-primary/10 via-primary/5 to-primary/10 border border-primary/20", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-2xl font-bold tabular-nums tracking-wide text-foreground", children: display }) }),
+    allowManualInput && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        Input_default,
+        {
+          placeholder: format === "12" ? "02:30 PM" : "14:30",
+          value: manualInput || display,
+          onChange: (e) => handleManualInput(e.target.value),
+          size: "sm",
+          variant: "outlined",
+          className: "pl-9"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.Clock, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" })
+    ] }),
+    showPresets && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "grid grid-cols-2 gap-2", children: Object.keys(PRESETS).map((preset) => {
+      const { icon: Icon, label: label2, color } = PRESETS[preset];
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: cn(
+            "group relative px-3 py-2.5 text-xs font-medium rounded-xl border border-border/50 overflow-hidden",
+            "bg-gradient-to-br from-background to-muted/30",
+            "hover:border-primary/40 hover:shadow-md transition-all duration-300",
+            animate && "hover:scale-[1.02] active:scale-[0.98]"
+          ),
+          onClick: () => setPreset(preset),
+          "aria-label": `Set time to ${label2}`,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              "div",
+              {
+                className: cn("absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300", "bg-gradient-to-r", color),
+                style: { opacity: 0.08 }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "relative flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { className: "w-3.5 h-3.5 text-muted-foreground group-hover:text-primary transition-colors" }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-foreground/80 group-hover:text-foreground transition-colors", children: label2 })
+            ] })
+          ]
+        },
+        preset
+      );
+    }) }),
     customPresets && customPresets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "grid grid-cols-2 gap-2", children: customPresets.map((preset, idx) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       "button",
       {
         type: "button",
         className: cn(
-          "px-2 py-1.5 text-xs rounded-md border border-border hover:bg-accent/10 transition-all",
-          animate && "hover:scale-105 active:scale-95"
+          "px-3 py-2.5 text-xs font-medium rounded-xl border border-border/50",
+          "bg-gradient-to-br from-background to-muted/30",
+          "hover:border-primary/40 hover:bg-primary/5 hover:shadow-md transition-all duration-300",
+          animate && "hover:scale-[1.02] active:scale-[0.98]"
         ),
         onClick: () => handleCustomPreset(preset.time),
         "aria-label": `Set time to ${preset.label}`,
@@ -6821,145 +7165,89 @@ function TimePicker({
       },
       idx
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex gap-3 w-fit max-w-full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "w-20", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "text-xs font-semibold text-muted-foreground mb-2 text-center", children: "Hour" }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-          "div",
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex gap-2 justify-center items-stretch", children: [
+      (() => {
+        const hourDisplay = format === "24" ? parts.h : parts.h % 12 || 12;
+        const hourIndex = Math.max(0, hours.indexOf(hourDisplay));
+        return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          WheelColumn,
           {
-            ref: hourScrollRef,
-            className: "max-h-48 overflow-y-auto pr-1 space-y-1 scrollbar-thin scroll-smooth",
-            role: "listbox",
-            "aria-label": "Select hour",
-            tabIndex: focusedColumn === "hour" ? 0 : -1,
-            onKeyDown: (e) => handleKeyDown(e, "hour"),
-            onFocus: () => setFocusedColumn("hour"),
-            children: hours.map((h) => {
-              const isSelected = format === "24" && parts.h === h || format === "12" && (parts.h % 12 || 12) === (h % 12 || 12);
-              return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-                "button",
-                {
-                  type: "button",
-                  role: "option",
-                  "aria-selected": isSelected,
-                  className: cn(
-                    "w-full text-center rounded-md transition-all font-medium",
-                    itemSz.padding,
-                    itemSz.text,
-                    "hover:bg-accent hover:scale-105 active:scale-95 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
-                    isSelected && "bg-primary text-primary-foreground shadow-md",
-                    !isSelected && "text-foreground/80",
-                    animate && "transition-transform duration-150"
-                  ),
-                  onClick: () => {
-                    const nextH = format === "24" ? h : (parts.p === "PM" ? h % 12 + 12 : h % 12) % 24;
-                    const next = { ...parts, h: format === "24" ? h : nextH === 0 && parts.p === "AM" ? 0 : nextH || (parts.p === "PM" ? 12 : 0) };
-                    setParts(next);
-                    emit(next);
-                  },
-                  children: pad(h)
-                },
-                h
-              );
-            })
+            labelText: "Hour",
+            column: "hour",
+            items: hours,
+            valueIndex: hourIndex,
+            onSelect: setHourFromDisplay,
+            scrollRef: hourScrollRef,
+            itemHeight,
+            animate,
+            focused: focusedColumn === "hour",
+            setFocusedColumn: (col) => setFocusedColumn(col),
+            onKeyDown: (e, col) => handleKeyDown(e, col)
           }
-        )
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-px bg-border/50 self-stretch my-8" }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "w-20", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "text-xs font-semibold text-muted-foreground mb-2 text-center", children: "Min" }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-          "div",
+        );
+      })(),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex flex-col items-center justify-center pt-8", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-1.5 h-1.5 rounded-full bg-primary/60" }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-1.5 h-1.5 rounded-full bg-primary/60" })
+      ] }) }),
+      (() => {
+        const minuteIndex = Math.max(0, Math.min(minutes.length - 1, Math.round(parts.m / minuteStep)));
+        return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          WheelColumn,
           {
-            ref: minuteScrollRef,
-            className: "max-h-48 overflow-y-auto pr-1 space-y-1 scrollbar-thin scroll-smooth",
-            role: "listbox",
-            "aria-label": "Select minute",
-            tabIndex: focusedColumn === "minute" ? 0 : -1,
-            onKeyDown: (e) => handleKeyDown(e, "minute"),
-            onFocus: () => setFocusedColumn("minute"),
-            children: minutes.map((m) => {
-              const isSelected = parts.m === m;
-              return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-                "button",
-                {
-                  type: "button",
-                  role: "option",
-                  "aria-selected": isSelected,
-                  className: cn(
-                    "w-full text-center rounded-md transition-all font-medium",
-                    itemSz.padding,
-                    itemSz.text,
-                    "hover:bg-accent hover:scale-105 active:scale-95 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
-                    isSelected && "bg-primary text-primary-foreground shadow-md",
-                    !isSelected && "text-foreground/80",
-                    animate && "transition-transform duration-150"
-                  ),
-                  onClick: () => {
-                    const next = { ...parts, m };
-                    setParts(next);
-                    emit(next);
-                  },
-                  children: pad(m)
-                },
-                m
-              );
-            })
+            labelText: "Min",
+            column: "minute",
+            items: minutes,
+            valueIndex: minuteIndex,
+            onSelect: (m) => {
+              const next = { ...parts, m };
+              setParts(next);
+              emit(next);
+            },
+            scrollRef: minuteScrollRef,
+            itemHeight,
+            animate,
+            focused: focusedColumn === "minute",
+            setFocusedColumn: (col) => setFocusedColumn(col),
+            onKeyDown: (e, col) => handleKeyDown(e, col)
           }
-        )
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-px bg-border/50 self-stretch my-8" }),
+        );
+      })(),
       includeSeconds && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "w-20", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "text-xs font-semibold text-muted-foreground mb-2 text-center", children: "Sec" }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-            "div",
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex flex-col items-center justify-center pt-8", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-1.5 h-1.5 rounded-full bg-primary/60" }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-1.5 h-1.5 rounded-full bg-primary/60" })
+        ] }) }),
+        (() => {
+          const secondIndex = Math.max(0, Math.min(seconds.length - 1, Math.round(parts.s / secondStep)));
+          return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+            WheelColumn,
             {
-              ref: secondScrollRef,
-              className: "max-h-48 overflow-y-auto pr-1 space-y-1 scrollbar-thin scroll-smooth",
-              role: "listbox",
-              "aria-label": "Select second",
-              tabIndex: focusedColumn === "second" ? 0 : -1,
-              onKeyDown: (e) => handleKeyDown(e, "second"),
-              onFocus: () => setFocusedColumn("second"),
-              children: seconds.map((s) => {
-                const isSelected = parts.s === s;
-                return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-                  "button",
-                  {
-                    type: "button",
-                    role: "option",
-                    "aria-selected": isSelected,
-                    className: cn(
-                      "w-full text-center rounded-md transition-all font-medium",
-                      itemSz.padding,
-                      itemSz.text,
-                      "hover:bg-accent hover:scale-105 active:scale-95 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
-                      isSelected && "bg-primary text-primary-foreground shadow-md",
-                      !isSelected && "text-foreground/80",
-                      animate && "transition-transform duration-150"
-                    ),
-                    onClick: () => {
-                      const next = { ...parts, s };
-                      setParts(next);
-                      emit(next);
-                    },
-                    children: pad(s)
-                  },
-                  s
-                );
-              })
+              labelText: "Sec",
+              column: "second",
+              items: seconds,
+              valueIndex: secondIndex,
+              onSelect: (s) => {
+                const next = { ...parts, s };
+                setParts(next);
+                emit(next);
+              },
+              scrollRef: secondScrollRef,
+              itemHeight,
+              animate,
+              focused: focusedColumn === "second",
+              setFocusedColumn: (col) => setFocusedColumn(col),
+              onKeyDown: (e, col) => handleKeyDown(e, col)
             }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-px bg-border/50 self-stretch my-8" })
+          );
+        })()
       ] }),
-      format === "12" && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "w-20", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "text-xs font-semibold text-muted-foreground mb-2 text-center", children: "Period" }),
+      format === "12" && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex-1 min-w-[70px] max-w-[90px]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "text-[10px] font-bold uppercase tracking-wider text-muted-foreground/70 mb-3 text-center", children: "Period" }),
         /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           "div",
           {
-            className: "flex flex-col gap-2",
+            className: "flex flex-col gap-2 p-1 rounded-xl bg-muted/30",
             role: "radiogroup",
             "aria-label": "Select AM or PM",
             tabIndex: focusedColumn === "period" ? 0 : -1,
@@ -6967,18 +7255,18 @@ function TimePicker({
             onFocus: () => setFocusedColumn("period"),
             children: ["AM", "PM"].map((p) => {
               const isSelected = parts.p === p;
-              return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
                 "button",
                 {
                   type: "button",
                   role: "radio",
                   "aria-checked": isSelected,
                   className: cn(
-                    "px-4 py-3 rounded-md transition-all text-sm font-semibold",
-                    "hover:bg-accent hover:scale-105 active:scale-95 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
-                    isSelected && "bg-primary text-primary-foreground shadow-md",
-                    !isSelected && "text-foreground/80 border border-border",
-                    animate && "transition-transform duration-150"
+                    "relative px-4 py-3 rounded-lg transition-all duration-300 text-sm font-bold overflow-hidden",
+                    "focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-1",
+                    isSelected && "bg-gradient-to-r from-primary to-primary/80 text-primary-foreground shadow-lg shadow-primary/25",
+                    !isSelected && "text-muted-foreground hover:text-foreground hover:bg-muted/50",
+                    animate && "hover:scale-[1.02] active:scale-[0.98]"
                   ),
                   onClick: () => {
                     const pVal = p;
@@ -6989,7 +7277,10 @@ function TimePicker({
                     setParts(next);
                     emit(next);
                   },
-                  children: p
+                  children: [
+                    isSelected && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "absolute inset-0 bg-gradient-to-tr from-white/20 to-transparent" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "relative", children: p })
+                  ]
                 },
                 p
               );
@@ -6998,14 +7289,17 @@ function TimePicker({
         )
       ] })
     ] }),
-    (showNow || clearable) && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center justify-between gap-2 pt-3 border-t border-border", children: [
+    (showNow || clearable) && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-2 pt-3 border-t border-border/50", children: [
       showNow && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
         "button",
         {
           type: "button",
           className: cn(
-            "px-3 py-2 text-xs rounded-md border border-border hover:bg-accent/10 transition-all flex items-center gap-2 font-medium",
-            animate && "hover:scale-105 active:scale-95"
+            "flex-1 px-4 py-2.5 text-xs font-semibold rounded-xl",
+            "bg-gradient-to-r from-primary/10 to-primary/5 border border-primary/30",
+            "text-primary hover:from-primary/20 hover:to-primary/10 hover:border-primary/50",
+            "transition-all duration-300 flex items-center justify-center gap-2",
+            animate && "hover:scale-[1.02] active:scale-[0.98] hover:shadow-md hover:shadow-primary/10"
           ),
           onClick: () => {
             setNow();
@@ -7018,14 +7312,16 @@ function TimePicker({
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex-1" }),
       clearable && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
         "button",
         {
           type: "button",
           className: cn(
-            "px-3 py-2 text-xs rounded-md border border-border hover:bg-destructive/10 hover:text-destructive transition-all flex items-center gap-2 font-medium",
-            animate && "hover:scale-105 active:scale-95"
+            "flex-1 px-4 py-2.5 text-xs font-semibold rounded-xl",
+            "bg-gradient-to-r from-destructive/10 to-destructive/5 border border-destructive/30",
+            "text-destructive hover:from-destructive/20 hover:to-destructive/10 hover:border-destructive/50",
+            "transition-all duration-300 flex items-center justify-center gap-2",
+            animate && "hover:scale-[1.02] active:scale-[0.98] hover:shadow-md hover:shadow-destructive/10"
           ),
           onClick: () => {
             setParts(initial);
@@ -7043,18 +7339,23 @@ function TimePicker({
   ] });
   if (variant === "inline") {
     return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "w-fit max-w-full", ...rest, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex items-center justify-between mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("label", { className: cn(sz.label, "font-medium", disabled ? "text-muted-foreground" : "text-foreground"), children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex items-center justify-between mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("label", { className: cn(sz.label, "font-semibold", disabled ? "text-muted-foreground" : "text-foreground"), children: [
         label,
         required && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-destructive ml-1", children: "*" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cn("p-3 rounded-lg border border-border bg-card shadow-sm", className), children: timePickerContent })
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cn("p-5 rounded-2xl border border-border/60 bg-card/95 backdrop-blur-sm shadow-xl", className), children: timePickerContent })
     ] });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "w-full", ...rest, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex items-center justify-between mb-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+    label && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex items-center justify-between mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
       "label",
       {
-        className: cn(sz.label, "font-medium", disabled ? "text-muted-foreground" : "text-foreground", "cursor-pointer"),
+        className: cn(
+          sz.label,
+          "font-semibold",
+          disabled ? "text-muted-foreground" : "text-foreground",
+          "cursor-pointer transition-colors hover:text-primary"
+        ),
         onClick: () => !disabled && handleOpenChange(true),
         children: [
           label,
@@ -7069,28 +7370,27 @@ function TimePicker({
         open,
         onOpenChange: handleOpenChange,
         placement: "bottom-start",
-        matchTriggerWidth: variant === "compact",
         contentWidth,
         contentClassName: cn(
-          "p-4 rounded-lg border bg-popover shadow-xl backdrop-blur-md",
-          error && "border-destructive",
-          success && "border-green-500",
-          !error && !success && "border-border",
-          animate && "animate-in fade-in-0 zoom-in-95 duration-200"
+          "p-5 rounded-2xl border bg-popover/95 backdrop-blur-xl shadow-2xl",
+          error && "border-destructive/40",
+          success && "border-green-500/40",
+          !error && !success && "border-border/60",
+          animate && "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-300"
         ),
         children: timePickerContent
       }
     ),
-    (error || success || helperText) && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cn("mt-1.5 flex items-start gap-1.5", sz.label), children: [
-      error && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-1.5 text-destructive", children: [
+    (error || success || helperText) && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cn("mt-2 flex items-start gap-2", sz.label), children: [
+      error && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-2 text-destructive bg-destructive/10 px-3 py-1.5 rounded-lg", children: [
         /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.X, { className: "w-3.5 h-3.5 shrink-0" }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { children: error })
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "font-medium", children: error })
       ] }),
-      success && !error && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-1.5 text-green-600", children: [
+      success && !error && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-2 text-green-600 bg-green-500/10 px-3 py-1.5 rounded-lg", children: [
         /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.Check, { className: "w-3.5 h-3.5 shrink-0" }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { children: "Valid time selected" })
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "font-medium", children: "Valid time selected" })
       ] }),
-      helperText && !error && !success && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-muted-foreground", children: helperText })
+      helperText && !error && !success && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-muted-foreground/80 italic", children: helperText })
     ] })
   ] });
 }
@@ -7309,7 +7609,7 @@ var DateTimePicker = ({
 // ../../components/ui/MultiCombobox.tsx
 var React27 = __toESM(require("react"), 1);
 var import_react16 = require("react");
-var import_react_dom8 = require("react-dom");
+var import_react_dom7 = require("react-dom");
 var import_lucide_react18 = require("lucide-react");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var MultiCombobox = ({
@@ -7551,7 +7851,7 @@ var MultiCombobox = ({
         ]
       }
     ),
-    open && dropdownPosition && typeof window !== "undefined" ? (0, import_react_dom8.createPortal)(
+    open && dropdownPosition && typeof window !== "undefined" ? (0, import_react_dom7.createPortal)(
       /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         "div",
         {
@@ -8613,19 +8913,26 @@ function CategoryTreeSelect(props) {
     const hasChildren = children.length > 0;
     const isExpanded = expandedNodes.has(category.id);
     const isSelected = valueArray.includes(category.id);
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "animate-in fade-in-50 duration-200", style: { animationDelay: `${level * 30}ms` }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
         "div",
         {
           className: cn(
-            "relative flex items-center gap-2 px-3 py-2 rounded-md transition-colors",
-            !viewOnly && "cursor-pointer hover:bg-accent",
-            // Selected state: subtle bg + square left indicator (only in select mode)
-            !viewOnly && isSelected && "bg-primary/10 rounded-r-md"
+            "relative flex items-center gap-2.5 px-3 py-2.5 rounded-xl transition-all duration-200",
+            !viewOnly && "cursor-pointer",
+            !viewOnly && !isSelected && "hover:bg-accent/60 hover:shadow-sm",
+            // Selected state
+            !viewOnly && isSelected && "bg-gradient-to-r from-primary/15 via-primary/10 to-primary/5 shadow-sm"
           ),
-          style: { paddingLeft: `${level * 1.5 + 0.75}rem` },
+          style: { paddingLeft: `${level * 1.25 + 0.75}rem` },
           children: [
-            !viewOnly && isSelected && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "aria-hidden": true, className: "absolute left-0 top-0 bottom-0 w-1 bg-primary" }),
+            !viewOnly && isSelected && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              "span",
+              {
+                "aria-hidden": true,
+                className: "absolute left-0 top-2 bottom-2 w-1 rounded-full bg-gradient-to-b from-primary to-primary/70 shadow-sm shadow-primary/30"
+              }
+            ),
             hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
               "button",
               {
@@ -8634,56 +8941,97 @@ function CategoryTreeSelect(props) {
                   e.stopPropagation();
                   toggleExpand(category.id);
                 },
-                className: "p-0.5 hover:bg-accent rounded",
-                children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react20.ChevronDown, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react20.ChevronRight, { className: "w-4 h-4" })
+                className: cn(
+                  "p-1.5 rounded-lg transition-all duration-200",
+                  "hover:bg-accent hover:scale-110 active:scale-95",
+                  "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50",
+                  isExpanded && "bg-accent/50 text-primary"
+                ),
+                children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cn("transition-transform duration-200", isExpanded && "rotate-90"), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react20.ChevronRight, { className: "w-4 h-4" }) })
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "w-5" }),
+            ) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "w-7" }),
             viewOnly ? (
-              // View-only mode: just display the name
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-sm", children: category.name })
+              // View-only mode: just display the name with folder icon
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-2.5", children: [
+                hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react20.FolderTree, { className: "w-4 h-4 text-muted-foreground/60" }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "w-1.5 h-1.5 rounded-full bg-muted-foreground/40" }),
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-sm font-medium", children: category.name })
+              ] })
             ) : singleSelect ? (
               // Single select mode: radio-style indicator
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { onClick: () => handleSelect(category.id, category), className: "flex items-center gap-2 flex-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { onClick: () => handleSelect(category.id, category), className: "flex items-center gap-2.5 flex-1", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                   "div",
                   {
                     className: cn(
-                      "w-4 h-4 border-2 rounded-full flex items-center justify-center transition-colors",
-                      isSelected ? "border-primary" : "border-muted-foreground/30"
+                      "w-5 h-5 border-2 rounded-full flex items-center justify-center transition-all duration-200",
+                      isSelected ? "border-primary bg-primary/10 shadow-sm shadow-primary/20" : "border-muted-foreground/30 hover:border-primary/50"
+                    ),
+                    children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "w-2.5 h-2.5 rounded-full bg-gradient-to-br from-primary to-primary/80 shadow-sm" })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                  "span",
+                  {
+                    className: cn(
+                      "text-sm transition-all duration-200",
+                      isSelected ? "font-semibold text-primary" : "text-foreground/80 hover:text-foreground"
                     ),
-                    children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "w-2 h-2 rounded-full bg-primary" })
+                    children: category.name
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: cn("text-sm", isSelected && "font-medium text-primary"), children: category.name })
+                hasChildren && !isSelected && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "ml-auto text-[10px] font-medium text-muted-foreground/50 bg-muted/50 px-1.5 py-0.5 rounded-md", children: children.length })
               ] })
             ) : (
               // Multi select mode: checkbox-style indicator
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { onClick: () => handleSelect(category.id, category), className: "flex items-center gap-2 flex-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { onClick: () => handleSelect(category.id, category), className: "flex items-center gap-2.5 flex-1", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                   "div",
                   {
                     className: cn(
-                      "w-4 h-4 border-2 rounded flex items-center justify-center transition-colors",
-                      isSelected ? "bg-primary border-primary" : "border-muted-foreground/30"
+                      "w-5 h-5 border-2 rounded-lg flex items-center justify-center transition-all duration-200",
+                      isSelected ? "bg-gradient-to-br from-primary to-primary/80 border-primary shadow-sm shadow-primary/25" : "border-muted-foreground/30 hover:border-primary/50 hover:bg-primary/5"
+                    ),
+                    children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react20.Check, { className: "w-3 h-3 text-primary-foreground", strokeWidth: 3 })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                  "span",
+                  {
+                    className: cn(
+                      "text-sm transition-all duration-200",
+                      isSelected ? "font-semibold text-primary" : "text-foreground/80 hover:text-foreground"
                     ),
-                    children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react20.Check, { className: "w-3 h-3 text-primary-foreground" })
+                    children: category.name
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: cn("text-sm", isSelected && "font-medium text-primary"), children: category.name })
+                hasChildren && !isSelected && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "ml-auto text-[10px] font-medium text-muted-foreground/50 bg-muted/50 px-1.5 py-0.5 rounded-md", children: children.length })
               ] })
             )
           ]
         }
       ),
-      hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { children: children.map((child) => renderCategory(child, level + 1)) })
+      hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cn("ml-2 pl-2 border-l-2 border-dashed border-border/50", "animate-in slide-in-from-top-2 fade-in-50 duration-200"), children: children.map((child) => renderCategory(child, level + 1)) })
     ] }, category.id);
   };
-  const renderTreeContent = () => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children: parentCategories.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: mergedLabels.emptyText }) : parentCategories.map((cat) => renderCategory(cat)) });
+  const renderTreeContent = () => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "space-y-0.5", children: parentCategories.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col items-center justify-center py-8 text-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "w-12 h-12 rounded-2xl bg-muted/50 flex items-center justify-center mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react20.Layers, { className: "w-6 h-6 text-muted-foreground/50" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-sm text-muted-foreground", children: mergedLabels.emptyText })
+  ] }) : parentCategories.map((cat) => renderCategory(cat)) });
   if (viewOnly) {
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cn("rounded-md border bg-background p-2", disabled && "opacity-50", className), children: renderTreeContent() });
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cn("rounded-2xl border border-border/60 bg-card/50 backdrop-blur-sm p-3 shadow-sm", disabled && "opacity-50", className), children: renderTreeContent() });
   }
   if (inline) {
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cn("rounded-md border bg-background p-2", disabled && "opacity-50 pointer-events-none", className), children: renderTreeContent() });
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      "div",
+      {
+        className: cn(
+          "rounded-2xl border border-border/60 bg-card/50 backdrop-blur-sm p-3 shadow-sm",
+          disabled && "opacity-50 pointer-events-none",
+          className
+        ),
+        children: renderTreeContent()
+      }
+    );
   }
   const selectedCount = valueArray.length;
   const displayText = singleSelect ? selectedCount > 0 ? categories.find((c) => c.id === valueArray[0])?.name || placeholder : placeholder : selectedCount > 0 ? mergedLabels.selectedText(selectedCount) : placeholder;
@@ -8695,17 +9043,32 @@ function CategoryTreeSelect(props) {
         onClick: () => !disabled && setIsOpen(!isOpen),
         disabled,
         className: cn(
-          // Match Combobox trigger outline + focus styles
-          "flex w-full items-center justify-between px-3 bg-background border border-input",
-          "rounded-md h-10 py-2 text-sm",
-          "hover:bg-accent/5 transition-colors hover:border-primary/40 focus:border-primary",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-          disabled && "opacity-50 cursor-not-allowed",
-          isOpen && "border-primary"
+          // Modern trigger button styling
+          "group flex w-full items-center justify-between px-3 py-2.5",
+          "bg-background/80 backdrop-blur-sm border border-border/60",
+          "rounded-xl h-11 text-sm",
+          "hover:bg-accent/10 hover:border-primary/40 hover:shadow-lg hover:shadow-primary/5 hover:-translate-y-0.5",
+          "transition-all duration-300 ease-out",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+          disabled && "opacity-50 cursor-not-allowed hover:transform-none hover:shadow-none",
+          isOpen && "ring-2 ring-primary/30 border-primary/50 shadow-lg shadow-primary/10"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: cn("text-sm", selectedCount === 0 && "text-muted-foreground"), children: displayText }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react20.ChevronDown, { className: cn("w-4 h-4 transition-transform", isOpen && "transform rotate-180") })
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-2.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              "div",
+              {
+                className: cn(
+                  "flex items-center justify-center rounded-lg p-1.5 transition-all duration-300",
+                  isOpen ? "bg-primary/15 text-primary" : "bg-muted/50 text-muted-foreground group-hover:bg-primary/10 group-hover:text-primary"
+                ),
+                children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react20.FolderTree, { className: cn("w-4 h-4 transition-transform duration-300", isOpen && "scale-110") })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: cn("font-medium transition-colors duration-200", selectedCount === 0 ? "text-muted-foreground" : "text-foreground"), children: displayText }),
+            selectedCount > 0 && !singleSelect && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "ml-1 px-2 py-0.5 text-xs font-bold rounded-full bg-primary/15 text-primary", children: selectedCount })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: cn("transition-all duration-300 text-muted-foreground group-hover:text-foreground", isOpen && "rotate-180 text-primary"), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react20.ChevronDown, { className: "w-4 h-4" }) })
         ]
       }
     ),
@@ -8715,11 +9078,13 @@ function CategoryTreeSelect(props) {
         "div",
         {
           className: cn(
-            "absolute z-20 mt-1 w-full max-h-80 overflow-auto",
-            "rounded-md border bg-popover text-popover-foreground shadow-md",
-            "backdrop-blur-sm bg-popover/95 border-border/60"
+            "absolute z-20 mt-2 w-full max-h-80 overflow-auto",
+            "rounded-2xl border border-border/40 bg-popover/95 text-popover-foreground",
+            "shadow-2xl backdrop-blur-xl",
+            "p-2",
+            "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-300"
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "p-1", children: renderTreeContent() })
+          children: renderTreeContent()
         }
       )
     ] })
@@ -9736,7 +10101,7 @@ var List_default = List;
 
 // ../../components/ui/Watermark.tsx
 var React35 = __toESM(require("react"), 1);
-var import_react_dom9 = require("react-dom");
+var import_react_dom8 = require("react-dom");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var PRESETS2 = {
   confidential: { text: "CONFIDENTIAL", color: "rgba(220, 38, 38, 0.15)", rotate: -22, fontSize: 16, fontWeight: "bold" },
@@ -10018,7 +10383,7 @@ var Watermark = ({
   if (fullPage) {
     return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
       children,
-      typeof window !== "undefined" ? (0, import_react_dom9.createPortal)(overlay, document.body) : null
+      typeof window !== "undefined" ? (0, import_react_dom8.createPortal)(overlay, document.body) : null
     ] });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: cn("relative", className), style, ...rest, children: [
@@ -10922,7 +11287,7 @@ var import_react23 = require("react");
 
 // ../../components/ui/ChartTooltip.tsx
 var import_react22 = require("react");
-var import_react_dom10 = require("react-dom");
+var import_react_dom9 = require("react-dom");
 var import_jsx_runtime46 = require("react/jsx-runtime");
 function ChartTooltip({ x, y, visible, label, value, color, secondaryLabel, secondaryValue, items, containerRef }) {
   const [isMounted, setIsMounted] = (0, import_react22.useState)(false);
@@ -10993,7 +11358,7 @@ function ChartTooltip({ x, y, visible, label, value, color, secondaryLabel, seco
       ]
     }
   );
-  return (0, import_react_dom10.createPortal)(tooltipContent, document.body);
+  return (0, import_react_dom9.createPortal)(tooltipContent, document.body);
 }
 
 // ../../components/ui/LineChart.tsx
@@ -13255,7 +13620,7 @@ function AccessDenied({
 // ../../components/ui/ThemeToggleHeadless.tsx
 var import_lucide_react31 = require("lucide-react");
 var import_react33 = require("react");
-var import_react_dom11 = require("react-dom");
+var import_react_dom10 = require("react-dom");
 var import_jsx_runtime62 = require("react/jsx-runtime");
 function ThemeToggleHeadless({
   theme,
@@ -13308,8 +13673,8 @@ function ThemeToggleHeadless({
       }
     ),
     isOpen && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [
-      typeof window !== "undefined" && (0, import_react_dom11.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "fixed inset-0 z-9998", onClick: () => setIsOpen(false) }), document.body),
-      typeof window !== "undefined" && dropdownPosition && (0, import_react_dom11.createPortal)(
+      typeof window !== "undefined" && (0, import_react_dom10.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "fixed inset-0 z-9998", onClick: () => setIsOpen(false) }), document.body),
+      typeof window !== "undefined" && dropdownPosition && (0, import_react_dom10.createPortal)(
         /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
           "div",
           {
@@ -13357,7 +13722,7 @@ function ThemeToggleHeadless({
 
 // ../../components/ui/LanguageSwitcherHeadless.tsx
 var import_react34 = require("react");
-var import_react_dom12 = require("react-dom");
+var import_react_dom11 = require("react-dom");
 var import_lucide_react32 = require("lucide-react");
 var import_jsx_runtime63 = require("react/jsx-runtime");
 function LanguageSwitcherHeadless({
@@ -13405,8 +13770,8 @@ function LanguageSwitcherHeadless({
       }
     ),
     isOpen && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
-      typeof window !== "undefined" && (0, import_react_dom12.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "fixed inset-0 z-9998", onClick: () => setIsOpen(false) }), document.body),
-      typeof window !== "undefined" && dropdownPosition && (0, import_react_dom12.createPortal)(
+      typeof window !== "undefined" && (0, import_react_dom11.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "fixed inset-0 z-9998", onClick: () => setIsOpen(false) }), document.body),
+      typeof window !== "undefined" && dropdownPosition && (0, import_react_dom11.createPortal)(
         /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
           "div",
           {