@datatechsolutions/ui 2.7.127 → 2.7.128

package/dist/{chunk-S4MECSAK.js → chunk-IMLJ5FAZ.js}

@@ -9959,7 +9959,7 @@ var Textarea = React11__namespace.forwardRef(({ className, ...props }, ref) => {
     "textarea",
     {
       className: clsx__default.default(
-        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "flex min-h-[80px] w-full rounded-xl liquid-surface border border-white/50 dark:border-white/10 px-3 py-2.5 text-sm text-slate-900 dark:text-white outline-none placeholder:text-slate-400 dark:placeholder:text-slate-500 focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50",
         className
       ),
       ref,
@@ -12577,51 +12577,96 @@ var Link4 = React11.forwardRef(function Link5(props, ref) {
 });
 var styles2 = {
   base: [
-    "relative inline-flex items-center justify-center gap-x-2 rounded-lg border text-sm font-semibold",
-    "px-3.5 py-2.5 transition-colors",
-    "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 dark:focus:ring-offset-zinc-900",
+    "relative inline-flex items-center justify-center gap-x-2 rounded-xl text-sm font-semibold",
+    "px-3.5 py-2.5 transition-all duration-200",
+    "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 dark:focus:ring-offset-slate-900",
     "disabled:opacity-50 disabled:pointer-events-none",
     "[&>svg]:size-4 [&>svg]:shrink-0"
   ],
-  solid: ["border-transparent shadow-sm"],
+  solid: ["liquid-button-primary rounded-xl"],
   outline: [
-    "border-zinc-300 bg-transparent hover:bg-zinc-50 text-zinc-900",
-    "dark:border-zinc-600 dark:hover:bg-zinc-800 dark:text-zinc-100"
+    "liquid-button rounded-xl"
   ],
   plain: [
-    "border-transparent text-zinc-700 hover:bg-zinc-100",
-    "dark:text-zinc-300 dark:hover:bg-zinc-800"
+    "border-transparent text-slate-700 hover:bg-white/30 dark:hover:bg-white/[0.08]",
+    "dark:text-slate-300"
   ],
   colors: {
-    "dark/zinc": ["bg-zinc-900 text-white hover:bg-zinc-800"],
+    "dark/zinc": [
+      "bg-slate-900/80 text-white backdrop-blur-xl border border-white/10 hover:bg-slate-800/80"
+    ],
     light: [
-      "bg-white text-zinc-900 hover:bg-zinc-50 dark:bg-zinc-800 dark:text-white dark:hover:bg-zinc-700"
+      "bg-white/60 text-slate-900 backdrop-blur-xl border border-white/30 hover:bg-white/80 dark:bg-white/10 dark:text-white dark:border-white/20 dark:hover:bg-white/20"
     ],
     "dark/white": [
-      "bg-zinc-900 text-white hover:bg-zinc-800 dark:bg-white dark:text-zinc-900 dark:hover:bg-zinc-100"
+      "bg-slate-900/80 text-white backdrop-blur-xl border border-white/10 hover:bg-slate-800/80 dark:bg-white/90 dark:text-slate-900 dark:border-white/30 dark:hover:bg-white/80"
+    ],
+    dark: [
+      "bg-slate-900/80 text-white backdrop-blur-xl border border-white/10 hover:bg-slate-800/80"
+    ],
+    white: [
+      "bg-white/60 text-slate-900 backdrop-blur-xl border border-white/30 hover:bg-white/80"
+    ],
+    zinc: [
+      "bg-slate-600/80 text-white backdrop-blur-xl border border-white/10 hover:bg-slate-700/80"
+    ],
+    indigo: [
+      "bg-indigo-500/80 text-white backdrop-blur-xl border border-indigo-400/30 hover:bg-indigo-600/80"
+    ],
+    cyan: [
+      "bg-cyan-300/80 text-cyan-950 backdrop-blur-xl border border-cyan-200/30 hover:bg-cyan-400/80"
+    ],
+    red: [
+      "bg-red-600/80 text-white backdrop-blur-xl border border-red-500/30 hover:bg-red-700/80"
+    ],
+    orange: [
+      "bg-orange-500/80 text-white backdrop-blur-xl border border-orange-400/30 hover:bg-orange-600/80"
+    ],
+    amber: [
+      "bg-amber-400/80 text-amber-950 backdrop-blur-xl border border-amber-300/30 hover:bg-amber-500/80"
+    ],
+    yellow: [
+      "bg-yellow-300/80 text-yellow-950 backdrop-blur-xl border border-yellow-200/30 hover:bg-yellow-400/80"
+    ],
+    lime: [
+      "bg-lime-300/80 text-lime-950 backdrop-blur-xl border border-lime-200/30 hover:bg-lime-400/80"
+    ],
+    green: [
+      "bg-green-600/80 text-white backdrop-blur-xl border border-green-500/30 hover:bg-green-700/80"
+    ],
+    emerald: [
+      "bg-emerald-600/80 text-white backdrop-blur-xl border border-emerald-500/30 hover:bg-emerald-700/80"
+    ],
+    teal: [
+      "bg-teal-600/80 text-white backdrop-blur-xl border border-teal-500/30 hover:bg-teal-700/80"
+    ],
+    sky: [
+      "bg-sky-500/80 text-white backdrop-blur-xl border border-sky-400/30 hover:bg-sky-600/80"
+    ],
+    blue: [
+      "bg-blue-600/80 text-white backdrop-blur-xl border border-blue-500/30 hover:bg-blue-700/80"
+    ],
+    brand: [
+      "bg-brand-600/80 text-white backdrop-blur-xl border border-brand-500/30 hover:bg-brand-700/80"
+    ],
+    accent: [
+      "bg-accent/80 text-accent-foreground backdrop-blur-xl border border-accent/30 hover:bg-accent/70"
+    ],
+    violet: [
+      "bg-violet-500/80 text-white backdrop-blur-xl border border-violet-400/30 hover:bg-violet-600/80"
     ],
-    dark: ["bg-zinc-900 text-white hover:bg-zinc-800"],
-    white: ["bg-white text-zinc-900 hover:bg-zinc-50"],
-    zinc: ["bg-zinc-600 text-white hover:bg-zinc-700"],
-    indigo: ["bg-indigo-500 text-white hover:bg-indigo-600"],
-    cyan: ["bg-cyan-300 text-cyan-950 hover:bg-cyan-400"],
-    red: ["bg-red-600 text-white hover:bg-red-700"],
-    orange: ["bg-orange-500 text-white hover:bg-orange-600"],
-    amber: ["bg-amber-400 text-amber-950 hover:bg-amber-500"],
-    yellow: ["bg-yellow-300 text-yellow-950 hover:bg-yellow-400"],
-    lime: ["bg-lime-300 text-lime-950 hover:bg-lime-400"],
-    green: ["bg-green-600 text-white hover:bg-green-700"],
-    emerald: ["bg-emerald-600 text-white hover:bg-emerald-700"],
-    teal: ["bg-teal-600 text-white hover:bg-teal-700"],
-    sky: ["bg-sky-500 text-white hover:bg-sky-600"],
-    blue: ["bg-blue-600 text-white hover:bg-blue-700"],
-    brand: ["bg-brand-600 text-white hover:bg-brand-700"],
-    accent: ["bg-accent text-accent-foreground hover:bg-accent/90"],
-    violet: ["bg-violet-500 text-white hover:bg-violet-600"],
-    purple: ["bg-purple-500 text-white hover:bg-purple-600"],
-    fuchsia: ["bg-fuchsia-500 text-white hover:bg-fuchsia-600"],
-    pink: ["bg-pink-500 text-white hover:bg-pink-600"],
-    rose: ["bg-rose-500 text-white hover:bg-rose-600"]
+    purple: [
+      "bg-purple-500/80 text-white backdrop-blur-xl border border-purple-400/30 hover:bg-purple-600/80"
+    ],
+    fuchsia: [
+      "bg-fuchsia-500/80 text-white backdrop-blur-xl border border-fuchsia-400/30 hover:bg-fuchsia-600/80"
+    ],
+    pink: [
+      "bg-pink-500/80 text-white backdrop-blur-xl border border-pink-400/30 hover:bg-pink-600/80"
+    ],
+    rose: [
+      "bg-rose-500/80 text-white backdrop-blur-xl border border-rose-400/30 hover:bg-rose-600/80"
+    ]
   }
 };
 var Button6 = React11.forwardRef(function Button7({
@@ -12709,14 +12754,14 @@ function InputGroup({
         "has-[[data-slot=icon]:first-child]:[&_input]:pl-10 has-[[data-slot=icon]:last-child]:[&_input]:pr-10 sm:has-[[data-slot=icon]:first-child]:[&_input]:pl-8 sm:has-[[data-slot=icon]:last-child]:[&_input]:pr-8",
         "*:data-[slot=icon]:pointer-events-none *:data-[slot=icon]:absolute *:data-[slot=icon]:top-3 *:data-[slot=icon]:z-10 *:data-[slot=icon]:size-5 sm:*:data-[slot=icon]:top-2.5 sm:*:data-[slot=icon]:size-4",
         "[&>[data-slot=icon]:first-child]:left-3 sm:[&>[data-slot=icon]:first-child]:left-2.5 [&>[data-slot=icon]:last-child]:right-3 sm:[&>[data-slot=icon]:last-child]:right-2.5",
-        "*:data-[slot=icon]:text-zinc-500"
+        "*:data-[slot=icon]:text-slate-500"
       ),
       children
     }
   );
 }
 var dateTypes = ["date", "datetime-local", "month", "time", "week"];
-var Input3 = React11.forwardRef(function Input4({
+React11.forwardRef(function Input4({
   className,
   "aria-label": ariaLabel,
   "aria-describedby": ariaDescribedBy,
@@ -12735,7 +12780,7 @@ var Input3 = React11.forwardRef(function Input4({
         // Basic layout
         "relative block w-full",
         // Focus ring
-        "after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-transparent after:ring-inset sm:focus-within:after:ring-2 sm:focus-within:after:ring-blue-500",
+        "after:pointer-events-none after:absolute after:inset-0 after:rounded-xl after:ring-transparent after:ring-inset sm:focus-within:after:ring-2 sm:focus-within:after:ring-indigo-500",
         // Disabled state
         "has-data-disabled:opacity-50"
       ]),
@@ -12771,19 +12816,19 @@ var Input3 = React11.forwardRef(function Input4({
               "[&::-webkit-datetime-edit-meridiem-field]:p-0"
             ],
             // Basic layout
-            "relative block w-full appearance-none rounded-lg px-3.5 py-2.5 sm:px-3 sm:py-1.5",
+            "relative block w-full appearance-none rounded-xl px-3 py-2.5",
             // Typography
-            "text-base/6 text-zinc-950 dark:text-zinc-100 placeholder:text-zinc-500 dark:placeholder:text-zinc-400 sm:text-sm/6",
+            "text-sm text-slate-900 dark:text-white placeholder:text-slate-400 dark:placeholder:text-slate-500",
             // Border
-            "border border-zinc-950/10 data-hover:border-zinc-950/20 dark:border-white/10 dark:data-hover:border-white/20",
-            // Background color
-            "bg-transparent dark:bg-white/5",
+            "border border-white/50 data-hover:border-white/70 dark:border-white/10 dark:data-hover:border-white/20",
+            // Background color — glass surface
+            "liquid-surface",
             // Hide default focus styles
             "focus:outline-none",
             // Invalid state
             "data-invalid:border-red-500 data-invalid:data-hover:border-red-500 dark:data-invalid:border-red-500 dark:data-invalid:data-hover:border-red-500",
             // Disabled state
-            "data-disabled:border-zinc-950/20 dark:data-disabled:border-white/15 dark:data-disabled:bg-white/2.5 dark:data-hover:data-disabled:border-white/15",
+            "data-disabled:border-white/30 dark:data-disabled:border-white/15 dark:data-disabled:bg-white/2.5 dark:data-hover:data-disabled:border-white/15",
             // System icons
             "dark:scheme-dark",
             // Autofill override styles
@@ -12791,10 +12836,10 @@ var Input3 = React11.forwardRef(function Input4({
             "[&:-webkit-autofill:hover]:!shadow-[inset_0_0_0_1000px_white] [&:-webkit-autofill:hover]:!text-black",
             "[&:-webkit-autofill:focus]:!shadow-[inset_0_0_0_1000px_white] [&:-webkit-autofill:focus]:!text-black",
             "[&:-webkit-autofill:active]:!shadow-[inset_0_0_0_1000px_white] [&:-webkit-autofill:active]:!text-black",
-            "dark:[&:-webkit-autofill]:!shadow-[inset_0_0_0_1000px_rgb(24,24,27)] dark:[&:-webkit-autofill]:!text-zinc-200",
-            "dark:[&:-webkit-autofill:hover]:!shadow-[inset_0_0_0_1000px_rgb(24,24,27)] dark:[&:-webkit-autofill:hover]:!text-zinc-200",
-            "dark:[&:-webkit-autofill:focus]:!shadow-[inset_0_0_0_1000px_rgb(24,24,27)] dark:[&:-webkit-autofill:focus]:!text-zinc-200",
-            "dark:[&:-webkit-autofill:active]:!shadow-[inset_0_0_0_1000px_rgb(24,24,27)] dark:[&:-webkit-autofill:active]:!text-zinc-200"
+            "dark:[&:-webkit-autofill]:!shadow-[inset_0_0_0_1000px_rgb(15,23,42)] dark:[&:-webkit-autofill]:!text-slate-200",
+            "dark:[&:-webkit-autofill:hover]:!shadow-[inset_0_0_0_1000px_rgb(15,23,42)] dark:[&:-webkit-autofill:hover]:!text-slate-200",
+            "dark:[&:-webkit-autofill:focus]:!shadow-[inset_0_0_0_1000px_rgb(15,23,42)] dark:[&:-webkit-autofill:focus]:!text-slate-200",
+            "dark:[&:-webkit-autofill:active]:!shadow-[inset_0_0_0_1000px_rgb(15,23,42)] dark:[&:-webkit-autofill:active]:!text-slate-200"
           ])
         }
       )
@@ -12901,7 +12946,7 @@ var Label3 = React11__namespace.default.forwardRef(
       "label",
       {
         ref,
-        className: `block text-sm font-medium text-gray-700 ${className}`,
+        className: `block text-sm font-medium text-slate-800 dark:text-slate-200 ${className}`,
         ...props,
         children: [
           children,
@@ -13309,12 +13354,12 @@ var Card2 = React11.memo(function Card3({
     lg: "p-6 sm:p-8"
   };
   const variantClasses2 = {
-    default: "bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 shadow-sm",
-    elevated: "bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 shadow-md",
-    outlined: "bg-transparent border-2 border-zinc-300 dark:border-zinc-600",
-    flat: "bg-zinc-50 dark:bg-zinc-800/50"
+    default: "liquid-surface border border-white/30 dark:border-white/10",
+    elevated: "liquid-surface-strong border border-white/30 dark:border-white/10",
+    outlined: "bg-transparent border-2 border-white/30 dark:border-white/10 backdrop-blur-sm",
+    flat: "liquid-surface"
   };
-  const hoverClasses = hover || onClick ? "hover:shadow-lg transition-shadow duration-200" : "";
+  const hoverClasses = hover || onClick ? "hover:shadow-md transition-shadow duration-200" : "";
   const clickableClasses = onClick ? "cursor-pointer" : "";
   const loadingClasses = loading ? "opacity-75 pointer-events-none" : "";
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -13323,7 +13368,7 @@ var Card2 = React11.memo(function Card3({
       role: onClick ? "button" : void 0,
       tabIndex: onClick ? 0 : void 0,
       className: clsx__default.default(
-        "rounded-lg",
+        "rounded-2xl",
         variantClasses2[variant],
         paddingClasses[padding],
         hoverClasses,
@@ -13352,8 +13397,8 @@ var CardHeader2 = React11.memo(function CardHeader3({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx__default.default("mb-4", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-zinc-900 dark:text-zinc-100 truncate", children: title }),
-        subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-zinc-600 dark:text-zinc-400 line-clamp-2", children: subtitle })
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-slate-900 dark:text-slate-100 truncate", children: title }),
+        subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-slate-600 dark:text-slate-400 line-clamp-2", children: subtitle })
       ] }),
       actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 flex items-center gap-2", children: actions })
     ] }),
@@ -13368,7 +13413,7 @@ var CardTitle2 = React11.memo(function CardTitle3({
     "h3",
     {
       className: clsx__default.default(
-        "text-lg font-semibold text-zinc-900 dark:text-zinc-100",
+        "text-lg font-semibold text-slate-900 dark:text-slate-100",
         className
       ),
       children
@@ -13379,13 +13424,13 @@ var CardDescription2 = React11.memo(function CardDescription3({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("p", { className: clsx__default.default("text-sm text-zinc-600 dark:text-zinc-400", className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { className: clsx__default.default("text-sm text-slate-600 dark:text-slate-400", className), children });
 });
 var CardContent2 = React11.memo(function CardContent3({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx__default.default("text-zinc-600 dark:text-zinc-400", className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx__default.default("text-slate-600 dark:text-slate-400", className), children });
 });
 var CardFooter2 = React11.memo(function CardFooter3({
   children,
@@ -13402,7 +13447,7 @@ var CardFooter2 = React11.memo(function CardFooter3({
     "div",
     {
       className: clsx__default.default(
-        "mt-4 pt-4 border-t border-zinc-200 dark:border-zinc-700 flex items-center gap-2",
+        "mt-4 pt-4 border-t border-white/30 dark:border-white/10 flex items-center gap-2",
         justifyClasses[justify],
         className
       ),
@@ -13422,14 +13467,14 @@ var StatCard2 = React11.memo(function StatCard3({
   const trendColors = {
     up: "text-green-600 dark:text-green-400",
     down: "text-red-600 dark:text-red-400",
-    neutral: "text-zinc-600 dark:text-zinc-400"
+    neutral: "text-slate-600 dark:text-slate-400"
   };
   return /* @__PURE__ */ jsxRuntime.jsx(Card2, { variant: "elevated", hover: true, className, loading, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start", children: [
-    icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 mr-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-12 h-12 rounded-lg bg-zinc-100 dark:bg-zinc-700 flex items-center justify-center", children: icon }) }),
+    icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 mr-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-12 h-12 rounded-lg bg-white/20 dark:bg-white/[0.08] flex items-center justify-center", children: icon }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-zinc-600 dark:text-zinc-400 truncate", children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-slate-600 dark:text-slate-400 truncate", children: title }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 flex items-baseline", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xl font-bold text-zinc-900 dark:text-zinc-100", children: loading ? "..." : value }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xl font-bold text-slate-900 dark:text-slate-100", children: loading ? "..." : value }),
         trend && !loading && /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -13447,8 +13492,8 @@ var StatCard2 = React11.memo(function StatCard3({
           }
         )
       ] }),
-      subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-zinc-600 dark:text-zinc-400", children: subtitle }),
-      trend && !loading && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-zinc-500 dark:text-zinc-500", children: trend.label })
+      subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-slate-600 dark:text-slate-400", children: subtitle }),
+      trend && !loading && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-slate-500 dark:text-slate-500", children: trend.label })
     ] })
   ] }) });
 });
@@ -13488,14 +13533,14 @@ function RequirementCheck({
     /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
-        className: `flex-shrink-0 w-3.5 h-3.5 rounded-full flex items-center justify-center text-[10px] font-bold ${met ? "bg-emerald-500 text-white" : "bg-zinc-200 dark:bg-zinc-700 text-zinc-400 dark:text-zinc-500"}`,
+        className: `flex-shrink-0 w-3.5 h-3.5 rounded-full flex items-center justify-center text-[10px] font-bold ${met ? "bg-emerald-500 text-white" : "bg-slate-200 dark:bg-slate-700 text-slate-400 dark:text-slate-500"}`,
         children: met ? "\u2713" : ""
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
-        className: met ? "text-emerald-600 dark:text-emerald-400" : "text-zinc-500 dark:text-zinc-400",
+        className: met ? "text-emerald-600 dark:text-emerald-400" : "text-slate-500 dark:text-slate-400",
         children: label
       }
     )
@@ -13533,9 +13578,9 @@ var PasswordInput2 = React11.forwardRef(
       medium: "w-2/3",
       strong: "w-full"
     }[strengthLevel];
-    const baseInputClasses = variant === "apple" ? "w-full px-4 py-3 pr-12 text-[17px] bg-white dark:bg-zinc-800 border border-[#d2d2d7] dark:border-zinc-700 text-[#1d1d1f] dark:text-white placeholder-[#86868b] dark:placeholder-zinc-500 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#0071e3] transition-all" : "w-full px-4 py-3.5 pr-12 text-base rounded-xl border transition-all duration-300 text-zinc-900 dark:text-white placeholder-zinc-500 dark:placeholder-zinc-500 focus:outline-none focus:ring-2 focus:border-transparent";
-    const buttonClasses = variant === "apple" ? "absolute top-1/2 -translate-y-1/2 right-3 p-1.5 hover:bg-[#f5f5f7] dark:hover:bg-zinc-700 rounded-lg transition-colors" : "absolute top-1/2 -translate-y-1/2 right-3 p-2 hover:bg-zinc-200/50 dark:hover:bg-zinc-700/50 rounded-lg transition-all duration-200";
-    const iconClasses = variant === "apple" ? "h-5 w-5 text-[#86868b] dark:text-zinc-400" : "h-5 w-5 text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200";
+    const baseInputClasses = variant === "apple" ? "w-full px-4 py-3 pr-12 text-[17px] bg-white/60 dark:bg-white/10 backdrop-blur-xl border border-white/30 dark:border-white/20 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-slate-500 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all" : "w-full px-4 py-3.5 pr-12 text-base rounded-xl border transition-all duration-300 bg-white/60 dark:bg-white/10 backdrop-blur-xl border-white/30 dark:border-white/20 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent";
+    const buttonClasses = variant === "apple" ? "absolute top-1/2 -translate-y-1/2 right-3 p-1.5 hover:bg-white/30 dark:hover:bg-white/[0.08] rounded-lg transition-colors" : "absolute top-1/2 -translate-y-1/2 right-3 p-2 hover:bg-white/30 dark:hover:bg-white/[0.08] rounded-lg transition-all duration-200";
+    const iconClasses = variant === "apple" ? "h-5 w-5 text-slate-400 dark:text-slate-400" : "h-5 w-5 text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200";
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -13561,7 +13606,7 @@ var PasswordInput2 = React11.forwardRef(
       ] }),
       showStrength && internalValue.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 space-y-2", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 h-1.5 bg-zinc-200 dark:bg-zinc-700 rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 h-1.5 bg-slate-200 dark:bg-slate-700 rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               className: `h-full rounded-full transition-all duration-300 ${strengthBarColor} ${strengthBarWidth}`
@@ -13772,222 +13817,101 @@ var SliderInput = ({
 };
 function DataPagination({
   pagination,
-  params,
   onUpdate,
   loading = false,
-  showSearch = true,
-  searchPlaceholder,
-  showPageSize = true,
-  pageSizeOptions = [10, 20, 50, 100]
+  showPageSize = false,
+  pageSizeOptions = [10, 20, 50],
+  params
 }) {
-  const tSearch = nextIntl.useTranslations("search");
-  const tPagination = nextIntl.useTranslations("pagination");
-  const tCommon = nextIntl.useTranslations("common");
-  const tAria = nextIntl.useTranslations("aria");
-  const [localSearchValue, setLocalSearchValue] = React11.useState(params.search || "");
-  React11.useEffect(() => {
-    const timeoutId = setTimeout(() => {
-      if (localSearchValue !== params.search) {
-        onUpdate({ search: localSearchValue, page: 1 });
-      }
-    }, 500);
-    return () => clearTimeout(timeoutId);
-  }, [localSearchValue, onUpdate, params.search]);
-  React11.useEffect(() => {
-    if (localSearchValue !== params.search) {
-      setLocalSearchValue(params.search || "");
-    }
-  }, [params.search, localSearchValue]);
-  const handleSearchChange = (value) => {
-    setLocalSearchValue(value);
-  };
-  const handlePageSizeChange = (value) => {
-    onUpdate({ limit: parseInt(value), page: 1 });
-  };
-  const handlePageChange = (page) => {
-    onUpdate({ page });
-  };
   const effectivePageSize = pagination.pageSize ?? pagination.limit ?? 10;
-  const skip = (pagination.page - 1) * effectivePageSize;
-  const startItem = skip + 1;
-  const endItem = Math.min(skip + effectivePageSize, pagination.total);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full space-y-4", children: [
-    showSearch && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-3 sm:space-y-0", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 max-w-full sm:max-w-sm", children: /* @__PURE__ */ jsxRuntime.jsx(
-        Input3,
+  const from = (pagination.page - 1) * effectivePageSize + 1;
+  const to = Math.min(pagination.page * effectivePageSize, pagination.total);
+  const handlePageChange = (page) => onUpdate({ page });
+  const handlePageSizeChange = (value) => onUpdate({ limit: parseInt(value), page: 1 });
+  if (pagination.totalPages <= 1 && !showPageSize) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 rounded-2xl liquid-surface px-4 py-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm tabular-nums text-slate-600 dark:text-slate-400", children: [
+      from,
+      "\u2013",
+      to,
+      " / ",
+      pagination.total
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      showPageSize && /* @__PURE__ */ jsxRuntime.jsx(
+        "select",
         {
-          type: "text",
-          placeholder: searchPlaceholder || tSearch("placeholder"),
-          value: localSearchValue,
-          onChange: (e) => handleSearchChange(e.target.value),
+          value: params?.limit ?? effectivePageSize,
+          onChange: (event) => handlePageSizeChange(event.target.value),
           disabled: loading,
-          className: "w-full min-h-[44px] text-base sm:text-sm"
+          className: "rounded-xl liquid-surface px-2 py-1.5 text-xs font-medium text-slate-700 outline-none dark:text-slate-300",
+          children: pageSizeOptions.map((size) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: size, children: size }, size))
         }
-      ) }),
-      showPageSize && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 sm:hidden", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300 whitespace-nowrap", children: tPagination("itemsPerPage") }),
+      ),
+      pagination.totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: "flex items-center gap-1", "aria-label": "Pagination", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          "select",
+          "button",
           {
-            value: params.limit,
-            onChange: (e) => handlePageSizeChange(e.target.value),
-            disabled: loading,
-            className: "rounded-md border border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-800 px-3 py-2 min-h-[44px] text-sm font-medium text-zinc-700 dark:text-zinc-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 touch-manipulation",
-            children: pageSizeOptions.map((size) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: size, children: size }, size))
+            type: "button",
+            disabled: pagination.page <= 1 || loading,
+            onClick: () => handlePageChange(pagination.page - 1),
+            className: "inline-flex h-9 w-9 items-center justify-center rounded-xl text-slate-500 transition hover:bg-white/40 disabled:opacity-30 dark:text-slate-400 dark:hover:bg-white/[0.08]",
+            children: /* @__PURE__ */ jsxRuntime.jsx(solid.ChevronLeftIcon, { className: "h-5 w-5" })
+          }
+        ),
+        getPageNumbers(pagination.page, pagination.totalPages).map(
+          (page, index) => page === "..." ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "inline-flex h-9 w-6 items-center justify-center text-xs text-slate-400",
+              children: "\u2026"
+            },
+            `ellipsis-${index}`
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              disabled: loading,
+              onClick: () => handlePageChange(page),
+              "aria-current": page === pagination.page ? "page" : void 0,
+              className: `inline-flex h-9 min-w-9 items-center justify-center rounded-xl px-2 text-sm font-medium transition ${page === pagination.page ? "liquid-surface liquid-surface-active text-slate-900 dark:text-white" : "text-slate-500 hover:bg-white/40 dark:text-slate-400 dark:hover:bg-white/[0.08]"}`,
+              children: page
+            },
+            `page-${page}`
+          )
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            disabled: pagination.page >= pagination.totalPages || loading,
+            onClick: () => handlePageChange(pagination.page + 1),
+            className: "inline-flex h-9 w-9 items-center justify-center rounded-xl text-slate-500 transition hover:bg-white/40 disabled:opacity-30 dark:text-slate-400 dark:hover:bg-white/[0.08]",
+            children: /* @__PURE__ */ jsxRuntime.jsx(solid.ChevronRightIcon, { className: "h-5 w-5" })
           }
         )
       ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: `flex items-center justify-between bg-white dark:bg-zinc-800 rounded-lg shadow hover:shadow-md transition-all duration-200 px-6 py-4 ${loading ? "opacity-75 pointer-events-none" : "opacity-100"}`,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 justify-between items-center sm:hidden", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
-              {
-                onClick: () => handlePageChange(pagination.page - 1),
-                disabled: !pagination.hasPrev || loading,
-                className: "relative inline-flex items-center rounded-lg border border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-800 px-6 py-3 min-h-[44px] text-sm font-medium text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-700 disabled:opacity-50 disabled:cursor-not-allowed touch-manipulation",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.ChevronLeftIcon, { className: "h-5 w-5 mr-1" }),
-                  tPagination("previous")
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center text-xs text-zinc-600 dark:text-zinc-400", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
-                pagination.page,
-                " / ",
-                pagination.totalPages
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                pagination.total,
-                " ",
-                tCommon("items")
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
-              {
-                onClick: () => handlePageChange(pagination.page + 1),
-                disabled: !pagination.hasNext || loading,
-                className: "relative inline-flex items-center rounded-lg border border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-800 px-6 py-3 min-h-[44px] text-sm font-medium text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-700 disabled:opacity-50 disabled:cursor-not-allowed touch-manipulation",
-                children: [
-                  tPagination("next"),
-                  /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.ChevronRightIcon, { className: "h-5 w-5 ml-1" })
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden sm:flex sm:flex-1 sm:items-center sm:justify-between", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-indigo-600" }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-zinc-700 dark:text-zinc-300", children: tPagination("showing", {
-                  start: String(startItem),
-                  end: String(endItem),
-                  total: String(pagination.total)
-                }) })
-              ] }),
-              showPageSize && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden sm:flex items-center gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300 whitespace-nowrap", children: tPagination("itemsPerPage") }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "select",
-                  {
-                    value: params.limit,
-                    onChange: (e) => handlePageSizeChange(e.target.value),
-                    disabled: loading,
-                    className: "rounded-md border border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-800 px-3 py-1 text-sm font-medium text-zinc-700 dark:text-zinc-300 focus:outline-none focus:ring-2 focus:ring-indigo-500",
-                    children: pageSizeOptions.map((size) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: size, children: size }, size))
-                  }
-                )
-              ] })
-            ] }),
-            pagination.totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsxs(
-              "nav",
-              {
-                "aria-label": tAria("pagination"),
-                className: "isolate inline-flex -space-x-px rounded-md shadow-sm",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(
-                    "button",
-                    {
-                      onClick: () => handlePageChange(pagination.page - 1),
-                      disabled: !pagination.hasPrev || loading,
-                      className: "relative inline-flex items-center justify-center rounded-l-md px-3 py-2 min-h-[44px] min-w-[44px] text-zinc-400 ring-1 ring-zinc-300 dark:ring-zinc-600 ring-inset hover:bg-zinc-50 dark:hover:bg-zinc-700 focus:z-20 focus:outline-offset-0 disabled:opacity-50 disabled:cursor-not-allowed touch-manipulation",
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: tPagination("previous") }),
-                        /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.ChevronLeftIcon, { "aria-hidden": "true", className: "h-5 w-5" })
-                      ]
-                    }
-                  ),
-                  getPageNumbers(pagination.page, pagination.totalPages).map(
-                    (page, index) => page === "..." ? /* @__PURE__ */ jsxRuntime.jsx(
-                      "span",
-                      {
-                        className: "relative inline-flex items-center px-4 py-2 text-sm font-semibold text-zinc-700 dark:text-zinc-300 ring-1 ring-zinc-300 dark:ring-zinc-600 ring-inset focus:outline-offset-0",
-                        children: "..."
-                      },
-                      `ellipsis-${index}`
-                    ) : /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
-                      {
-                        onClick: () => handlePageChange(page),
-                        disabled: loading,
-                        "aria-current": page === pagination.page ? "page" : void 0,
-                        className: `relative inline-flex items-center justify-center px-4 py-2 min-h-[44px] min-w-[44px] text-sm font-semibold focus:z-20 focus:outline-offset-0 touch-manipulation ${page === pagination.page ? "z-10 bg-indigo-600 text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" : "text-zinc-900 dark:text-zinc-300 ring-1 ring-zinc-300 dark:ring-zinc-600 ring-inset hover:bg-zinc-50 dark:hover:bg-zinc-700"}`,
-                        children: page
-                      },
-                      `page-${page}`
-                    )
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsxs(
-                    "button",
-                    {
-                      onClick: () => handlePageChange(pagination.page + 1),
-                      disabled: !pagination.hasNext || loading,
-                      className: "relative inline-flex items-center justify-center rounded-r-md px-3 py-2 min-h-[44px] min-w-[44px] text-zinc-400 ring-1 ring-zinc-300 dark:ring-zinc-600 ring-inset hover:bg-zinc-50 dark:hover:bg-zinc-700 focus:z-20 focus:outline-offset-0 disabled:opacity-50 disabled:cursor-not-allowed touch-manipulation",
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: tPagination("next") }),
-                        /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.ChevronRightIcon, { "aria-hidden": "true", className: "h-5 w-5" })
-                      ]
-                    }
-                  )
-                ]
-              }
-            )
-          ] })
-        ]
-      }
-    )
+    ] })
   ] });
 }
 function getPageNumbers(currentPage, totalPages) {
   if (totalPages <= 7) {
     return Array.from({ length: totalPages }, (_, i) => i + 1);
   }
-  const pages = [];
-  pages.push(1);
+  const pages = [1];
   if (currentPage <= 4) {
-    for (let i = 2; i <= Math.min(5, totalPages); i++) {
-      pages.push(i);
-    }
+    for (let i = 2; i <= Math.min(5, totalPages); i++) pages.push(i);
     if (totalPages > 5) {
       pages.push("...");
       pages.push(totalPages);
     }
   } else if (currentPage >= totalPages - 3) {
     pages.push("...");
-    for (let i = Math.max(totalPages - 4, 2); i <= totalPages; i++) {
+    for (let i = Math.max(totalPages - 4, 2); i <= totalPages; i++)
       pages.push(i);
-    }
   } else {
     pages.push("...");
-    for (let i = currentPage - 1; i <= currentPage + 1; i++) {
-      pages.push(i);
-    }
+    for (let i = currentPage - 1; i <= currentPage + 1; i++) pages.push(i);
     pages.push("...");
     pages.push(totalPages);
   }
@@ -14052,13 +13976,13 @@ var PageHeader = React11.memo(function PageHeader2({
           "h1",
           {
             className: clsx__default.default(
-              "font-bold text-zinc-900 dark:text-zinc-100 truncate",
+              "font-bold text-slate-900 dark:text-slate-100 truncate",
               size === "large" ? "text-3xl" : "text-2xl"
             ),
             children: title
           }
         ),
-        subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-zinc-600 dark:text-zinc-400 line-clamp-2", children: subtitle })
+        subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-slate-600 dark:text-slate-400 line-clamp-2", children: subtitle })
       ] }),
       actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 flex items-center gap-2 flex-wrap", children: actions })
     ] }),
@@ -14075,8 +13999,8 @@ var PageSectionHeader = React11.memo(function PageSectionHeader2({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx__default.default("mb-4", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg sm:text-xl font-semibold text-zinc-900 dark:text-zinc-100", children: title }),
-        subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-zinc-600 dark:text-zinc-400 line-clamp-2", children: subtitle })
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg sm:text-xl font-semibold text-slate-900 dark:text-slate-100", children: title }),
+        subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-slate-600 dark:text-slate-400 line-clamp-2", children: subtitle })
       ] }),
       actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 flex items-center gap-2 flex-wrap", children: actions })
     ] }),
@@ -14093,8 +14017,8 @@ var CardSectionHeader = React11.memo(function CardSectionHeader2({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx__default.default("mb-3", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base sm:text-lg font-medium text-zinc-900 dark:text-zinc-100", children: title }),
-        subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs sm:text-sm text-zinc-600 dark:text-zinc-400 line-clamp-1", children: subtitle })
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base sm:text-lg font-medium text-slate-900 dark:text-slate-100", children: title }),
+        subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs sm:text-sm text-slate-600 dark:text-slate-400 line-clamp-1", children: subtitle })
       ] }),
       actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 flex items-center gap-1 flex-wrap", children: actions })
     ] }),
@@ -14113,10 +14037,10 @@ var MetricCard2 = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: `bg-zinc-50 dark:bg-zinc-800/50 rounded-2xl border border-zinc-200/50 dark:border-zinc-700/50 p-5 hover:border-zinc-300 dark:hover:border-zinc-600 transition-colors ${className}`,
+      className: `liquid-surface rounded-2xl border border-white/30 dark:border-white/10 p-5 hover:bg-white/40 dark:hover:bg-white/[0.08] transition-colors ${className}`,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between mb-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-zinc-500 dark:text-zinc-400", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-slate-500 dark:text-slate-400", children: title }),
           tooltip && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
@@ -14124,20 +14048,20 @@ var MetricCard2 = ({
                 type: "button",
                 onMouseEnter: () => setShowTooltip(true),
                 onMouseLeave: () => setShowTooltip(false),
-                className: "w-4 h-4 rounded-full bg-zinc-200 dark:bg-zinc-700 text-zinc-600 dark:text-zinc-400 text-xs flex items-center justify-center hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors",
+                className: "w-4 h-4 rounded-full bg-white/30 dark:bg-white/10 text-slate-600 dark:text-slate-400 text-xs flex items-center justify-center hover:bg-white/40 dark:hover:bg-white/[0.08] transition-colors",
                 "aria-label": "Info",
                 children: "?"
               }
             ),
-            showTooltip && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 top-6 z-10 w-64 p-3 bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 text-xs rounded-lg shadow-lg", children: [
+            showTooltip && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 top-6 z-10 w-64 p-3 liquid-surface-strong text-slate-900 dark:text-slate-100 text-xs rounded-lg", children: [
               tooltip,
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-2 top-0 -translate-y-1 w-2 h-2 bg-zinc-900 dark:bg-zinc-100 rotate-45" })
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-2 top-0 -translate-y-1 w-2 h-2 bg-white/60 dark:bg-white/20 rotate-45" })
             ] })
           ] })
         ] }),
         children ? children : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl font-semibold text-zinc-900 dark:text-zinc-100 mb-1", children: value }),
-          subtitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-zinc-500 dark:text-zinc-400", children: subtitle })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl font-semibold text-slate-900 dark:text-slate-100 mb-1", children: value }),
+          subtitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-slate-500 dark:text-slate-400", children: subtitle })
         ] })
       ]
     }
@@ -14152,14 +14076,14 @@ var MetricTooltip = ({ text }) => {
         type: "button",
         onMouseEnter: () => setShow(true),
         onMouseLeave: () => setShow(false),
-        className: "w-4 h-4 rounded-full bg-zinc-200 dark:bg-zinc-700 text-zinc-600 dark:text-zinc-400 text-xs flex items-center justify-center hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors",
+        className: "w-4 h-4 rounded-full bg-white/30 dark:bg-white/10 text-slate-600 dark:text-slate-400 text-xs flex items-center justify-center hover:bg-white/40 dark:hover:bg-white/[0.08] transition-colors",
         "aria-label": "Info",
         children: "?"
       }
     ),
-    show && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 top-6 z-10 w-64 p-3 bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 text-xs rounded-lg shadow-lg", children: [
+    show && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 top-6 z-10 w-64 p-3 liquid-surface-strong text-slate-900 dark:text-slate-100 text-xs rounded-lg", children: [
       text,
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-2 top-0 -translate-y-1 w-2 h-2 bg-zinc-900 dark:bg-zinc-100 rotate-45" })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-2 top-0 -translate-y-1 w-2 h-2 bg-white/60 dark:bg-white/20 rotate-45" })
     ] })
   ] });
 };
@@ -15259,5 +15183,5 @@ exports.useGeoMapState = useGeoMapState;
 exports.useNotifications = useNotifications;
 exports.usePlatformShellStore = usePlatformShellStore;
 exports.usePullToRefresh = usePullToRefresh;
-//# sourceMappingURL=chunk-S4MECSAK.js.map
-//# sourceMappingURL=chunk-S4MECSAK.js.map
+//# sourceMappingURL=chunk-IMLJ5FAZ.js.map
+//# sourceMappingURL=chunk-IMLJ5FAZ.js.map