@optifye/dashboard-core 6.5.2 → 6.5.4

package/dist/index.js

@@ -1905,7 +1905,29 @@ var WorkspaceHealthService = class _WorkspaceHealthService {
       throw error;
     }
     const processedData = (data || []).map((item) => this.processHealthStatus(item));
-    let filteredData = processedData;
+    let uptimeMap = /* @__PURE__ */ new Map();
+    if (options.companyId || data && data.length > 0) {
+      const companyId = options.companyId || data[0]?.company_id;
+      if (companyId) {
+        try {
+          uptimeMap = await this.calculateWorkspaceUptime(companyId);
+        } catch (error2) {
+          console.error("Error calculating uptime:", error2);
+        }
+      }
+    }
+    const dataWithUptime = processedData.map((workspace) => {
+      const uptimeDetails = uptimeMap.get(workspace.workspace_id);
+      if (uptimeDetails) {
+        return {
+          ...workspace,
+          uptimePercentage: uptimeDetails.percentage,
+          uptimeDetails
+        };
+      }
+      return workspace;
+    });
+    let filteredData = dataWithUptime;
     try {
       const { data: enabledWorkspaces, error: workspaceError } = await supabase.from("workspaces").select("workspace_id, display_name").eq("enable", true);
       if (!workspaceError && enabledWorkspaces && enabledWorkspaces.length > 0) {
@@ -1981,13 +2003,31 @@ var WorkspaceHealthService = class _WorkspaceHealthService {
     const healthyWorkspaces = workspaces.filter((w) => w.status === "healthy").length;
     const unhealthyWorkspaces = workspaces.filter((w) => w.status === "unhealthy").length;
     const warningWorkspaces = workspaces.filter((w) => w.status === "warning").length;
-    const uptimePercentage = totalWorkspaces > 0 ? healthyWorkspaces / totalWorkspaces * 100 : 0;
+    let uptimePercentage = 0;
+    let totalDowntimeMinutes = 0;
+    if (totalWorkspaces > 0) {
+      const workspacesWithUptime = workspaces.filter((w) => w.uptimePercentage !== void 0 && w.uptimeDetails !== void 0);
+      if (workspacesWithUptime.length > 0) {
+        const totalUptime = workspacesWithUptime.reduce((sum, w) => sum + (w.uptimePercentage || 0), 0);
+        uptimePercentage = totalUptime / workspacesWithUptime.length;
+        totalDowntimeMinutes = workspacesWithUptime.reduce((sum, w) => {
+          if (w.uptimeDetails) {
+            const downtime = Math.max(0, w.uptimeDetails.expectedMinutes - w.uptimeDetails.actualMinutes);
+            return sum + downtime;
+          }
+          return sum;
+        }, 0);
+      } else {
+        uptimePercentage = healthyWorkspaces / totalWorkspaces * 100;
+      }
+    }
     return {
       totalWorkspaces,
       healthyWorkspaces,
       unhealthyWorkspaces,
       warningWorkspaces,
       uptimePercentage,
+      totalDowntimeMinutes,
       lastUpdated: (/* @__PURE__ */ new Date()).toISOString()
     };
   }
@@ -2067,6 +2107,155 @@ var WorkspaceHealthService = class _WorkspaceHealthService {
   clearCache() {
     this.cache.clear();
   }
+  async calculateWorkspaceUptime(companyId) {
+    const supabase = _getSupabaseInstance();
+    if (!supabase) throw new Error("Supabase client not initialized");
+    const dashboardConfig = _getDashboardConfigInstance();
+    const timezone = dashboardConfig?.dateTimeConfig?.defaultTimezone || "UTC";
+    const shiftConfig = dashboardConfig?.shiftConfig;
+    const currentShiftInfo = getCurrentShift(timezone, shiftConfig);
+    const currentDate = currentShiftInfo.date;
+    const currentShiftId = currentShiftInfo.shiftId;
+    const now2 = /* @__PURE__ */ new Date();
+    const currentHour = now2.getHours();
+    const currentMinute = now2.getMinutes();
+    let shiftStartHour;
+    let shiftEndHour;
+    if (currentShiftId === 0) {
+      shiftStartHour = 9;
+      shiftEndHour = 18;
+    } else {
+      shiftStartHour = 20;
+      shiftEndHour = 3;
+    }
+    let elapsedMinutes = 0;
+    if (currentShiftId === 0) {
+      if (currentHour >= shiftStartHour && currentHour < shiftEndHour) {
+        elapsedMinutes = (currentHour - shiftStartHour) * 60 + currentMinute;
+      } else if (currentHour >= shiftEndHour) {
+        elapsedMinutes = (shiftEndHour - shiftStartHour) * 60;
+      }
+    } else {
+      if (currentHour >= shiftStartHour) {
+        elapsedMinutes = (currentHour - shiftStartHour) * 60 + currentMinute;
+      } else if (currentHour < shiftEndHour) {
+        elapsedMinutes = (24 - shiftStartHour + currentHour) * 60 + currentMinute;
+      }
+    }
+    const tableName = `performance_metrics_${companyId.replace(/-/g, "_")}`;
+    const query = `
+      WITH workspace_uptime AS (
+        SELECT 
+          workspace_id,
+          workspace_display_name,
+          idle_time_hourly,
+          output_hourly,
+          shift_start,
+          shift_end
+        FROM ${tableName}
+        WHERE date = $1::date
+          AND shift_id = $2
+      ),
+      calculated_uptime AS (
+        SELECT 
+          workspace_id,
+          workspace_display_name,
+          -- Calculate actual minutes from hourly data
+          (
+            SELECT COALESCE(SUM(
+              CASE 
+                WHEN jsonb_array_length(idle_time_hourly->key::text) >= 58 THEN 60
+                WHEN jsonb_array_length(idle_time_hourly->key::text) > 0 THEN jsonb_array_length(idle_time_hourly->key::text)
+                ELSE 0
+              END
+            ), 0)
+            FROM jsonb_object_keys(idle_time_hourly) AS key
+            WHERE key::int >= $3 AND key::int < $4
+          ) +
+          -- Add current hour's data if applicable
+          CASE 
+            WHEN $4::int >= $3 AND $4::int < $5 THEN
+              LEAST($6::int, 
+                    COALESCE(jsonb_array_length(idle_time_hourly->$4::text), 0))
+            ELSE 0
+          END as actual_minutes
+        FROM workspace_uptime
+      )
+      SELECT 
+        workspace_id,
+        workspace_display_name,
+        actual_minutes,
+        $7::int as expected_minutes,
+        ROUND(
+          CASE 
+            WHEN $7::int > 0 THEN (actual_minutes::numeric / $7::numeric) * 100
+            ELSE 100
+          END, 1
+        ) as uptime_percentage
+      FROM calculated_uptime
+    `;
+    try {
+      const { data, error } = await supabase.rpc("sql_query", {
+        query_text: query,
+        params: [
+          currentDate,
+          currentShiftId,
+          shiftStartHour,
+          currentHour,
+          shiftEndHour,
+          currentMinute,
+          elapsedMinutes
+        ]
+      }).single();
+      if (error) {
+        const { data: queryData, error: queryError } = await supabase.from(tableName).select("workspace_id, workspace_display_name, idle_time_hourly, output_hourly").eq("date", currentDate).eq("shift_id", currentShiftId);
+        if (queryError) {
+          console.error("Error fetching performance metrics:", queryError);
+          return /* @__PURE__ */ new Map();
+        }
+        const uptimeMap2 = /* @__PURE__ */ new Map();
+        for (const record of queryData || []) {
+          let actualMinutes = 0;
+          const idleTimeHourly = record.idle_time_hourly || {};
+          if (idleTimeHourly && typeof idleTimeHourly === "object") {
+            for (const [hour, dataArray] of Object.entries(idleTimeHourly)) {
+              const hourNum = parseInt(hour);
+              if (hourNum >= shiftStartHour && hourNum < currentHour) {
+                const arrayLength = Array.isArray(dataArray) ? dataArray.length : 0;
+                actualMinutes += arrayLength >= 58 ? 60 : arrayLength;
+              } else if (hourNum === currentHour && currentHour >= shiftStartHour) {
+                const arrayLength = Array.isArray(dataArray) ? dataArray.length : 0;
+                actualMinutes += Math.min(currentMinute, arrayLength);
+              }
+            }
+          }
+          const percentage = elapsedMinutes > 0 ? Math.round(actualMinutes / elapsedMinutes * 1e3) / 10 : 100;
+          uptimeMap2.set(record.workspace_id, {
+            expectedMinutes: elapsedMinutes,
+            actualMinutes,
+            percentage,
+            lastCalculated: (/* @__PURE__ */ new Date()).toISOString()
+          });
+        }
+        return uptimeMap2;
+      }
+      const uptimeMap = /* @__PURE__ */ new Map();
+      if (Array.isArray(data)) {
+        for (const record of data) {
+          uptimeMap.set(record.workspace_id, {
+            expectedMinutes: record.expected_minutes,
+            actualMinutes: record.actual_minutes,
+            percentage: record.uptime_percentage,
+            lastCalculated: (/* @__PURE__ */ new Date()).toISOString()
+          });
+        }
+      }
+      return uptimeMap;
+    } catch (error) {
+      console.error("Error calculating workspace uptime:", error);
+      return /* @__PURE__ */ new Map();
+    }
+  }
 };
 var workspaceHealthService = WorkspaceHealthService.getInstance();
 
@@ -19725,7 +19914,7 @@ var OptifyeLogoLoader = ({
             className: `${sizeClasses[size]} h-auto animate-pulse select-none pointer-events-none`
           }
         ),
-        message && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 text-gray-600 text-sm font-medium text-center", children: message })
+        message && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 text-gray-600 text-base sm:text-sm font-medium text-center", children: message })
       ]
     }
   );
@@ -21614,11 +21803,13 @@ var VideoCard = React19__namespace.default.memo(({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: `workspace-card relative bg-gray-950 rounded-md overflow-hidden cursor-pointer transform hover:scale-[1.005] transition-transform duration-200 shadow-sm ${className}`,
+      className: `workspace-card relative bg-gray-950 rounded-md overflow-hidden cursor-pointer transform hover:scale-[1.005] active:scale-[0.995] transition-transform duration-200 shadow-sm touch-manipulation ${className}`,
       style: { width: "100%", height: "100%" },
       onClick: handleClick,
       onMouseEnter,
       onMouseLeave,
+      onTouchStart: (e) => e.currentTarget.classList.add("touch-active"),
+      onTouchEnd: (e) => e.currentTarget.classList.remove("touch-active"),
       title: displayName,
       tabIndex: 0,
       "aria-label": `Open workspace ${displayName}`,
@@ -21636,8 +21827,8 @@ var VideoCard = React19__namespace.default.memo(({
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full h-full overflow-hidden bg-black", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black z-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "animate-pulse flex flex-col items-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Camera, { className: `${compact ? "w-4 h-4" : "w-6 h-6"} text-gray-500` }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${compact ? "text-[10px]" : "text-xs"} text-gray-500 mt-1`, children: "Loading..." })
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Camera, { className: `w-5 h-5 sm:${compact ? "w-4 h-4" : "w-6 h-6"} text-gray-500` }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-[11px] sm:${compact ? "text-[10px]" : "text-xs"} text-gray-500 mt-1`, children: "Loading..." })
           ] }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 z-10", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -21672,10 +21863,10 @@ var VideoCard = React19__namespace.default.memo(({
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `absolute bottom-0 left-0 right-0 bg-black bg-opacity-60 ${compact ? "p-1" : "p-1.5"} flex justify-between items-center z-10`, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `absolute bottom-0 left-0 right-0 bg-black bg-opacity-60 p-1.5 sm:${compact ? "p-1" : "p-1.5"} flex justify-between items-center z-10`, children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Camera, { size: compact ? 10 : 12, className: "text-white" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-white ${compact ? "text-[10px]" : "text-xs"} font-medium tracking-wide`, children: displayName })
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-white text-[11px] sm:${compact ? "text-[10px]" : "text-xs"} font-medium tracking-wide`, children: displayName })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center ${compact ? "gap-1" : "gap-1.5"}`, children: [
             trendInfo && /* @__PURE__ */ jsxRuntime.jsx(
@@ -21687,7 +21878,7 @@ var VideoCard = React19__namespace.default.memo(({
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${compact ? "w-1 h-1" : "w-1.5 h-1.5"} rounded-full bg-green-500` }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-white ${compact ? "text-[10px]" : "text-xs"}`, children: "Live" })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-white text-[11px] sm:${compact ? "text-[10px]" : "text-xs"}`, children: "Live" })
           ] })
         ] })
       ]
@@ -21897,10 +22088,10 @@ var VideoGridView = React19__namespace.default.memo(({
       view_type: "video_grid"
     });
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `relative overflow-hidden h-full w-full ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: "h-full w-full p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `relative overflow-hidden h-full w-full ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: "h-full w-full p-3 sm:p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: "grid h-full w-full gap-2",
+      className: "grid h-full w-full gap-3 sm:gap-2",
       style: {
         gridTemplateColumns: `repeat(${gridCols}, 1fr)`,
         gridTemplateRows: `repeat(${gridRows}, 1fr)`,
@@ -22685,15 +22876,15 @@ var BreakNotificationPopup = ({
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 bg-amber-500 rounded-full animate-pulse flex-shrink-0 mt-2" }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-semibold text-sm text-gray-900", children: breakItem.remarks || "Break" }),
-                  (activeBreaks.length > 1 || lineNames[breakItem.lineId]) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500 mt-0.5", children: lineNames[breakItem.lineId] || `Line ${breakItem.lineId.substring(0, 8)}` })
+                  /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-semibold text-base sm:text-sm text-gray-900", children: breakItem.remarks || "Break" }),
+                  (activeBreaks.length > 1 || lineNames[breakItem.lineId]) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm sm:text-xs text-gray-500 mt-0.5", children: lineNames[breakItem.lineId] || `Line ${breakItem.lineId.substring(0, 8)}` })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-gray-600 font-medium", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm sm:text-xs text-gray-600 font-medium", children: [
                   breakItem.startTime,
                   " - ",
                   breakItem.endTime
                 ] }) }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-gray-500", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm sm:text-xs text-gray-500", children: [
                   formatTime3(breakItem.elapsedMinutes),
                   " / ",
                   formatTime3(breakItem.duration)
@@ -22713,9 +22904,11 @@ var BreakNotificationPopup = ({
               "button",
               {
                 onClick: handleDismiss,
-                className: "ml-2 text-gray-400 hover:text-gray-600 transition-colors p-1 rounded-full hover:bg-gray-100",
+                onTouchStart: () => {
+                },
+                className: "ml-2 text-gray-400 hover:text-gray-600 transition-colors p-2 sm:p-1 rounded-full hover:bg-gray-100 active:bg-gray-200 touch-manipulation min-h-[44px] min-w-[44px] sm:min-h-0 sm:min-w-0 flex items-center justify-center",
                 "aria-label": "Dismiss notification",
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3 h-3" })
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4 sm:w-3 sm:h-3" })
               }
             )
           ] })
@@ -23411,7 +23604,7 @@ var TimeDisplay = ({ className, variant = "default" }) => {
       className: `flex items-center space-x-1.5 bg-white/60 backdrop-blur-sm px-2 py-0.5 rounded-md shadow-xs ${className || ""}`,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-3 w-3 text-[var(--primary-DEFAULT)]", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z", clipRule: "evenodd" }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[11px] font-medium text-gray-800 tabular-nums tracking-tight", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-[11px] font-medium text-gray-800 tabular-nums tracking-tight", children: [
           time2,
           " ",
           timeSuffix
@@ -25970,7 +26163,7 @@ var SelectTrigger = React19__namespace.forwardRef(({ className, children, ...pro
   {
     ref,
     className: cn(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-11 sm:h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 touch-manipulation",
       className
     ),
     ...props,
@@ -28087,23 +28280,23 @@ var WorkspaceGridItem = React19__namespace.default.memo(({
         isVeryLowEfficiency && !isInactive && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-10 left-1/2 -translate-x-1/2 z-30", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -inset-1 bg-red-400/50 rounded-full blur-sm animate-pulse" }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -inset-0.5 bg-red-500/30 rounded-full blur-md animate-ping [animation-duration:1.5s]" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-[#E34329] w-9 h-9 rounded-full flex items-center justify-center text-white font-bold text-lg shadow-lg ring-2 ring-red-400/40 border border-red-400/80 animate-pulse", children: "!" })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-[#E34329] w-8 h-8 sm:w-9 sm:h-9 rounded-full flex items-center justify-center text-white font-bold text-base sm:text-lg shadow-lg ring-2 ring-red-400/40 border border-red-400/80 animate-pulse", children: "!" })
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             onClick: handleClick,
-            className: `${styles2} ${colorClass} ${isBottleneck ? "ring-2 ring-red-500/70" : ""} ${isVeryLowEfficiency ? "ring-2 ring-red-500/50" : ""} ${isInactive ? "bg-gray-200" : ""} shadow-lg`,
+            className: `${styles2} ${colorClass} ${isBottleneck ? "ring-2 ring-red-500/70" : ""} ${isVeryLowEfficiency ? "ring-2 ring-red-500/50" : ""} ${isInactive ? "bg-gray-200" : ""} shadow-lg touch-manipulation active:scale-[0.98] transition-transform`,
             "aria-label": isInactive ? `Inactive workspace ${workspaceNumber}` : `View details for workspace ${workspaceNumber}`,
             title: isInactive ? `Inactive: ${getWorkspaceDisplayName(data.workspace_name, data.line_id)}` : getWorkspaceDisplayName(data.workspace_name, data.line_id),
-            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `font-semibold tracking-wide text-[min(4vw,2rem)] uppercase ${isInactive ? "text-gray-400" : "text-white"} drop-shadow-sm`, children: workspaceNumber })
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `font-semibold tracking-wide text-lg sm:text-xl md:text-[min(4vw,2rem)] uppercase ${isInactive ? "text-gray-400" : "text-white"} drop-shadow-sm`, children: workspaceNumber })
           }
         ),
         arrow && !isInactive && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: `absolute left-1/2 -translate-x-1/2 ${arrowPosition}
-          text-[min(3.5vw,2.25rem)] font-bold tracking-tight ${arrowColor} drop-shadow-sm`,
+          text-base sm:text-lg md:text-[min(3.5vw,2.25rem)] font-bold tracking-tight ${arrowColor} drop-shadow-sm`,
             style: { bottom: "-2.5rem", lineHeight: 1, display: "flex", alignItems: "center", justifyContent: "center" },
             children: arrow
           }
@@ -28133,11 +28326,11 @@ var WorkspaceGrid = React19__namespace.default.memo(({
   }, [workspaces.length]);
   const { VideoGridView: VideoGridViewComponent } = useRegistry();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative w-full h-full overflow-hidden ${className}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 left-2 sm:left-4 right-2 sm:right-8 z-20", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center justify-between py-1 sm:py-1.5 gap-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsx(Legend6, {}) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:hidden mt-1", children: /* @__PURE__ */ jsxRuntime.jsx(Legend6, {}) })
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 left-4 sm:left-4 right-4 sm:right-8 z-20", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center justify-between py-2 sm:py-1.5 gap-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsx(Legend6, {}) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:hidden mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(Legend6, {}) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-10 sm:top-16 left-0 right-0 bottom-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-12 sm:top-16 left-0 right-0 bottom-0", children: /* @__PURE__ */ jsxRuntime.jsx(
       VideoGridViewComponent,
       {
         workspaces,
@@ -28352,8 +28545,8 @@ var KPICard = ({
   const cardClasses = clsx(
     // Base classes
     "rounded-lg transition-all duration-200",
-    // Sizing based on compact mode - extra compact on mobile
-    "p-1.5 sm:p-3 md:p-4",
+    // Sizing based on compact mode - better padding on mobile
+    "p-2.5 sm:p-3 md:p-4",
     // Variant-specific styling
     {
       "bg-white/50 backdrop-blur-sm border border-gray-200/60 shadow-sm hover:shadow-md dark:bg-gray-800/50 dark:border-gray-700/60": style.variant === "default",
@@ -28361,10 +28554,10 @@ var KPICard = ({
       "bg-blue-50 border border-blue-200 dark:bg-blue-900/20 dark:border-blue-800/30": style.variant === "filled",
       "bg-gray-50/50 dark:bg-gray-800/30": style.variant === "subtle"
     },
-    // Width for src matching - compact on mobile, flexible on small screens
-    !className?.includes("w-") && "w-[120px] sm:w-[180px] md:w-[220px]",
-    // Interactive styling if onClick is provided
-    onClick && "cursor-pointer hover:scale-[1.01] active:scale-[0.99]",
+    // Width for src matching - better mobile width, flexible on small screens
+    !className?.includes("w-") && "w-[110px] sm:w-[180px] md:w-[220px]",
+    // Interactive styling if onClick is provided - better touch targets
+    onClick && "cursor-pointer hover:scale-[1.01] active:scale-[0.99] touch-manipulation min-h-[44px] min-w-[44px]",
     // Loading state
     isLoading && "animate-pulse",
     // User-provided classes
@@ -28375,20 +28568,22 @@ var KPICard = ({
     {
       className: cardClasses,
       onClick,
+      onTouchStart: onClick ? () => {
+      } : void 0,
       role: onClick ? "button" : void 0,
       tabIndex: onClick ? 0 : void 0,
       onKeyDown: onClick ? (e) => e.key === "Enter" && onClick() : void 0,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx(
           "font-medium text-gray-500 dark:text-gray-400",
-          "text-[9px] sm:text-xs md:text-sm",
-          "mb-0.5 sm:mb-1 md:mb-2",
-          "uppercase tracking-wider"
+          "text-[10px] sm:text-xs md:text-sm",
+          "mb-1 sm:mb-1 md:mb-2",
+          "uppercase tracking-wide sm:tracking-wider"
         ), children: title }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-0.5 sm:gap-2 flex-wrap", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx(
             "font-bold text-gray-900 dark:text-gray-50",
-            "text-sm sm:text-xl md:text-2xl"
+            "text-base sm:text-xl md:text-2xl"
           ), children: isLoading ? "\u2014" : formattedValue }),
           suffix && !isLoading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx(
             "font-medium text-gray-600 dark:text-gray-300",
@@ -28563,35 +28758,46 @@ var KPISection = React19.memo(({
   const outputDifference = kpis.outputProgress.current - kpis.outputProgress.idealOutput;
   const outputIsOnTarget = outputDifference >= 0;
   if (useSrcLayout) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex gap-1 sm:gap-3 overflow-x-auto sm:overflow-visible pb-1 sm:pb-0 ${className || ""}`, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        KPICard,
-        {
-          title: "Underperforming",
-          value: "2/3",
-          change: 0
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        KPICard,
-        {
-          title: "Efficiency",
-          value: kpis.efficiency.value,
-          change: kpis.efficiency.change,
-          suffix: "%"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        KPICard,
-        {
-          title: "Output Progress",
-          value: `${kpis.outputProgress.current}/${kpis.outputProgress.target}`,
-          change: kpis.outputProgress.change,
-          outputDifference,
-          showOutputDetails: true
-        }
-      )
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: `flex gap-2 sm:gap-3 overflow-x-auto sm:overflow-visible pb-2 sm:pb-0 ${className || ""}`,
+        style: {
+          scrollbarWidth: "none",
+          msOverflowStyle: "none",
+          WebkitScrollbar: { display: "none" }
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+            KPICard,
+            {
+              title: "Underperforming",
+              value: "2/3",
+              change: 0
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+            KPICard,
+            {
+              title: "Efficiency",
+              value: kpis.efficiency.value,
+              change: kpis.efficiency.change,
+              suffix: "%"
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+            KPICard,
+            {
+              title: "Output Progress",
+              value: `${kpis.outputProgress.current}/${kpis.outputProgress.target}`,
+              change: kpis.outputProgress.change,
+              outputDifference,
+              showOutputDetails: true
+            }
+          ) })
+        ]
+      }
+    );
   }
   const kpiCardData = [
     {
@@ -28724,6 +28930,19 @@ var WorkspaceHealthCard = ({
   const formatTimeAgo = (timeString) => {
     return timeString.replace("about ", "").replace(" ago", "");
   };
+  const formatDowntime = (uptimeDetails) => {
+    if (!uptimeDetails) return "";
+    const downtimeMinutes = Math.max(0, uptimeDetails.expectedMinutes - uptimeDetails.actualMinutes);
+    if (downtimeMinutes === 0) return "No downtime";
+    if (downtimeMinutes < 1) return "< 1 min downtime";
+    if (downtimeMinutes < 60) return `${downtimeMinutes} min downtime`;
+    const hours = Math.floor(downtimeMinutes / 60);
+    const minutes = downtimeMinutes % 60;
+    if (minutes === 0) {
+      return `${hours} hr downtime`;
+    }
+    return `${hours} hr ${minutes} min downtime`;
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     Card2,
     {
@@ -28757,13 +28976,32 @@ var WorkspaceHealthCard = ({
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: config.statusText })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "h-3.5 w-3.5 text-gray-400" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-gray-600 dark:text-gray-400 whitespace-nowrap", children: [
-            "Last seen: ",
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: formatTimeAgo(workspace.timeSinceLastUpdate) })
-          ] })
-        ] }) }) })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "h-3.5 w-3.5 text-gray-400" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-gray-600 dark:text-gray-400 whitespace-nowrap", children: [
+              "Last seen: ",
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: formatTimeAgo(workspace.timeSinceLastUpdate) })
+            ] })
+          ] }),
+          workspace.uptimePercentage !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Activity, { className: "h-3.5 w-3.5 text-gray-400" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-gray-600 dark:text-gray-400 whitespace-nowrap", children: [
+              "Uptime today: ",
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: clsx(
+                "font-medium",
+                workspace.uptimePercentage >= 97 ? "text-green-600 dark:text-green-400" : workspace.uptimePercentage >= 90 ? "text-yellow-600 dark:text-yellow-400" : "text-red-600 dark:text-red-400"
+              ), children: [
+                workspace.uptimePercentage.toFixed(1),
+                "%"
+              ] })
+            ] })
+          ] }),
+          workspace.uptimeDetails && workspace.uptimeDetails.expectedMinutes > workspace.uptimeDetails.actualMinutes && workspace.uptimePercentage !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx(
+            "inline-flex items-center px-2 py-0.5 rounded text-xs font-medium",
+            workspace.uptimePercentage >= 97 ? "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400" : workspace.uptimePercentage >= 90 ? "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400" : "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400"
+          ), children: formatDowntime(workspace.uptimeDetails) }) })
+        ] })
       ] })
     }
   );
@@ -28834,6 +29072,20 @@ var CompactWorkspaceHealthCard = ({
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+          workspace.uptimePercentage !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: clsx(
+              "text-xs font-medium",
+              workspace.uptimePercentage >= 97 ? "text-green-600 dark:text-green-400" : workspace.uptimePercentage >= 90 ? "text-yellow-600 dark:text-yellow-400" : "text-red-600 dark:text-red-400"
+            ), children: [
+              workspace.uptimePercentage.toFixed(1),
+              "%"
+            ] }),
+            workspace.uptimeDetails && workspace.uptimeDetails.expectedMinutes > workspace.uptimeDetails.actualMinutes && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-400 dark:text-gray-400", children: "\u2022" }),
+            workspace.uptimeDetails && workspace.uptimeDetails.expectedMinutes > workspace.uptimeDetails.actualMinutes && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
+              Math.max(0, workspace.uptimeDetails.expectedMinutes - workspace.uptimeDetails.actualMinutes),
+              "m down"
+            ] })
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: workspace.timeSinceLastUpdate }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("h-2 w-2 rounded-full", config.dot) })
         ] })
@@ -29055,33 +29307,33 @@ var DashboardHeader = React19.memo(({ lineTitle, className = "", headerControls
       return /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" }) });
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-row items-center justify-between w-full ${className}`, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col sm:flex-row items-start sm:items-center justify-between w-full gap-3 sm:gap-4 ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 sm:gap-2 md:gap-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-base sm:text-xl md:text-2xl lg:text-3xl font-bold text-gray-800 tracking-tight leading-none", children: lineTitle }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1 w-1 sm:h-1.5 sm:w-1.5 md:h-2 md:w-2 rounded-full bg-green-500 animate-pulse ring-1 sm:ring-2 ring-green-500/30 ring-offset-1" })
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2 md:gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl font-bold text-gray-800 tracking-tight leading-none truncate max-w-[200px] sm:max-w-[250px] md:max-w-[350px] lg:max-w-none", children: lineTitle }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 w-1.5 sm:h-1.5 sm:w-1.5 md:h-2 md:w-2 rounded-full bg-green-500 animate-pulse ring-2 sm:ring-2 ring-green-500/30 ring-offset-1 flex-shrink-0" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 inline-flex items-center gap-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-medium text-gray-600", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 sm:mt-2 inline-flex flex-wrap items-center gap-2 sm:gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[10px] sm:text-xs md:text-sm font-medium text-gray-600 whitespace-nowrap", children: [
           /* @__PURE__ */ jsxRuntime.jsx(ISTTimer2, {}),
           " IST"
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-600", children: getShiftIcon() }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium text-gray-600", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] sm:text-xs md:text-sm font-medium text-gray-600 whitespace-nowrap", children: [
             getShiftName(),
             " Shift"
           ] })
         ] })
       ] })
     ] }),
-    headerControls && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4", children: headerControls })
+    headerControls && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 sm:gap-3 md:gap-4 w-full sm:w-auto justify-end", children: headerControls })
   ] });
 });
 DashboardHeader.displayName = "DashboardHeader";
-var NoWorkspaceData = React19.memo(({ message = "No workspace data available", className = "" }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex h-full items-center justify-center ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg bg-white p-4 shadow-md", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2 text-gray-500", children: [
-  /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) }),
-  /* @__PURE__ */ jsxRuntime.jsx("span", { children: message })
+var NoWorkspaceData = React19.memo(({ message = "No workspace data available", className = "" }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex h-full items-center justify-center ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg bg-white p-5 sm:p-4 shadow-md", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-3 sm:space-x-2 text-gray-500", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6 sm:h-5 sm:w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) }),
+  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base sm:text-sm", children: message })
 ] }) }) }));
 NoWorkspaceData.displayName = "NoWorkspaceData";
 var WorkspaceMonthlyDataFetcher = ({
@@ -29206,10 +29458,10 @@ var HamburgerButton = ({
     "button",
     {
       type: "button",
-      className: `md:hidden p-2 rounded-md text-gray-500 hover:text-gray-600 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${className}`,
+      className: `md:hidden p-2.5 rounded-lg text-gray-600 hover:text-gray-900 hover:bg-gray-100 active:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors ${className}`,
       onClick,
       "aria-label": ariaLabel,
-      children: /* @__PURE__ */ jsxRuntime.jsx(outline.Bars3Icon, { className: "w-6 h-6" })
+      children: /* @__PURE__ */ jsxRuntime.jsx(outline.Bars3Icon, { className: "w-7 h-7" })
     }
   );
 };
@@ -29387,27 +29639,27 @@ var PageHeader = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-16 mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-14 sm:h-16 mx-auto px-3 sm:px-4 md:px-6 lg:px-8 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3 min-w-0 flex-1", children: [
             onMobileMenuOpen && /* @__PURE__ */ jsxRuntime.jsx(HamburgerButton, { onClick: onMobileMenuOpen }),
-            headerLogo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 mr-2 md:hidden", children: headerLogo }),
+            headerLogo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 mr-1 sm:mr-2 md:hidden", children: headerLogo }),
             " ",
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
               breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Breadcrumbs, { items: breadcrumbs }),
-              /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg md:text-xl font-semibold text-gray-900 dark:text-white truncate", title, children: title })
+              /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-sm sm:text-base md:text-lg lg:text-xl font-semibold text-gray-900 dark:text-white truncate", title, children: title })
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 md:gap-4", children: [
-            actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:flex items-center gap-2", children: actions }),
-            /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: toggleDarkMode, className: "p-1.5 rounded-md text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-indigo-500", children: [
-              darkMode ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, { className: "h-5 w-5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Moon, { className: "h-5 w-5" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3 md:gap-4 flex-shrink-0", children: [
+            actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:flex items-center gap-2", children: actions }),
+            /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: toggleDarkMode, className: "p-1 sm:p-1.5 rounded-md text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-indigo-500", children: [
+              darkMode ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, { className: "h-4 w-4 sm:h-5 sm:w-5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Moon, { className: "h-4 w-4 sm:h-5 sm:w-5" }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Toggle dark mode" })
             ] }),
-            showDateTime && /* @__PURE__ */ jsxRuntime.jsx(DateTimeDisplay, { className: "hidden lg:flex" }),
+            showDateTime && /* @__PURE__ */ jsxRuntime.jsx(DateTimeDisplay, { className: "hidden sm:flex text-xs sm:text-sm" }),
             userProfileConfig && /* @__PURE__ */ jsxRuntime.jsx(UserProfileDropdown, { config: userProfileConfig })
           ] })
         ] }),
-        actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:hidden px-4 pb-2 border-t border-gray-200 dark:border-gray-700 flex items-center justify-end gap-2", children: actions })
+        actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:hidden px-3 py-2 border-t border-gray-200 dark:border-gray-700 flex items-center justify-end gap-2", children: actions })
       ]
     }
   );
@@ -29431,9 +29683,9 @@ var SideNavBar = React19.memo(({
   const pathname = propPathname || router$1.pathname;
   const getButtonClasses = React19.useCallback((path) => {
     const isActive = pathname === path || pathname.startsWith(path + "/");
-    return `w-full flex flex-col items-center justify-center py-3 px-1 rounded-lg relative group
-      ${isActive ? "bg-blue-100 text-blue-700 shadow-md border border-blue-200 font-semibold" : "hover:bg-gray-50 text-gray-500 hover:text-gray-700 font-medium"}
-      transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2`;
+    return `w-full flex flex-col items-center justify-center py-4 sm:py-3 px-2 sm:px-1 rounded-lg relative group min-h-[44px] sm:min-h-0
+      ${isActive ? "bg-blue-100 text-blue-700 shadow-md border border-blue-200 font-semibold" : "hover:bg-gray-50 text-gray-500 hover:text-gray-700 font-medium active:bg-gray-100"}
+      transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 active:scale-[0.98]`;
   }, [pathname]);
   const handleHomeClick = React19.useCallback(() => {
     navigate("/", {
@@ -29597,7 +29849,7 @@ var SideNavBar = React19.memo(({
           "aria-selected": pathname === "/" || pathname.startsWith("//"),
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(outline.HomeIcon, { className: "w-5 h-5 mb-1" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Home" })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Home" })
           ]
         }
       ) }),
@@ -29613,7 +29865,7 @@ var SideNavBar = React19.memo(({
             "aria-selected": pathname === "/leaderboard" || pathname.startsWith("/leaderboard/"),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(outline.TrophyIcon, { className: "w-5 h-5 mb-1" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Leaders" })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Leaders" })
             ]
           }
         ),
@@ -29628,7 +29880,7 @@ var SideNavBar = React19.memo(({
             "aria-selected": pathname === "/kpis" || pathname.startsWith("/kpis/"),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(outline.ChartBarIcon, { className: "w-5 h-5 mb-1" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Lines" })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Lines" })
             ]
           }
         ),
@@ -29643,7 +29895,7 @@ var SideNavBar = React19.memo(({
             "aria-selected": pathname === "/targets" || pathname.startsWith("/targets/"),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(outline.AdjustmentsHorizontalIcon, { className: "w-5 h-5 mb-1" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Targets" })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Targets" })
             ]
           }
         ),
@@ -29658,7 +29910,7 @@ var SideNavBar = React19.memo(({
             "aria-selected": pathname === "/shifts" || pathname.startsWith("/shifts/"),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(outline.ClockIcon, { className: "w-5 h-5 mb-1" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Shifts" })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Shifts" })
             ]
           }
         ),
@@ -29673,7 +29925,7 @@ var SideNavBar = React19.memo(({
             "aria-selected": pathname === "/skus" || pathname.startsWith("/skus/"),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(outline.CubeIcon, { className: "w-5 h-5 mb-1" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium leading-tight", children: "SKUs" })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "SKUs" })
             ]
           }
         ),
@@ -29688,7 +29940,7 @@ var SideNavBar = React19.memo(({
             "aria-selected": pathname === "/ai-agent" || pathname.startsWith("/ai-agent/"),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, { className: "w-5 h-5 mb-1" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Axel" })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Axel" })
             ]
           }
         ),
@@ -29703,7 +29955,7 @@ var SideNavBar = React19.memo(({
             "aria-selected": pathname === "/help" || pathname.startsWith("/help/"),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(outline.QuestionMarkCircleIcon, { className: "w-5 h-5 mb-1" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Help" })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Help" })
             ]
           }
         ),
@@ -29718,7 +29970,7 @@ var SideNavBar = React19.memo(({
             "aria-selected": pathname === "/health" || pathname.startsWith("/health/"),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(outline.HeartIcon, { className: "w-5 h-5 mb-1" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Health" })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Health" })
             ]
           }
         )
@@ -29735,33 +29987,194 @@ var SideNavBar = React19.memo(({
         "aria-selected": pathname === "/profile" || pathname.startsWith("/profile/"),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(outline.UserCircleIcon, { className: "w-5 h-5 mb-1" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Profile" })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Profile" })
         ]
       }
     ) })
   ] });
+  const MobileNavigationContent = () => {
+    const isActive = (path) => {
+      if (path === "/" && pathname === "/") return true;
+      if (path !== "/" && pathname.startsWith(path)) return true;
+      return false;
+    };
+    const getMobileButtonClass = (path) => {
+      const active = isActive(path);
+      return `w-full flex items-center gap-3 px-5 py-3.5 rounded-lg transition-colors active:scale-[0.98] ${active ? "bg-blue-50 text-blue-700" : "text-gray-700 hover:bg-gray-100 active:bg-gray-200"}`;
+    };
+    const getIconClass = (path) => {
+      const active = isActive(path);
+      return `w-7 h-7 ${active ? "text-blue-600" : "text-gray-600"}`;
+    };
+    const handleMobileNavClick = (handler) => {
+      return () => {
+        handler();
+        onMobileMenuClose?.();
+      };
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: "px-5 py-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          onClick: handleMobileNavClick(handleHomeClick),
+          className: getMobileButtonClass("/"),
+          "aria-label": "Home",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(outline.HomeIcon, { className: getIconClass("/") }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium", children: "Home" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-6 space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: handleMobileNavClick(handleLeaderboardClick),
+            className: getMobileButtonClass("/leaderboard"),
+            "aria-label": "Leaderboard",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(outline.TrophyIcon, { className: getIconClass("/leaderboard") }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium", children: "Leaderboard" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: handleMobileNavClick(handleKPIsClick),
+            className: getMobileButtonClass("/kpis"),
+            "aria-label": "Lines",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(outline.ChartBarIcon, { className: getIconClass("/kpis") }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium", children: "Lines" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: handleMobileNavClick(handleTargetsClick),
+            className: getMobileButtonClass("/targets"),
+            "aria-label": "Targets",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(outline.AdjustmentsHorizontalIcon, { className: getIconClass("/targets") }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium", children: "Targets" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: handleMobileNavClick(handleShiftsClick),
+            className: getMobileButtonClass("/shifts"),
+            "aria-label": "Shift Management",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(outline.ClockIcon, { className: getIconClass("/shifts") }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium", children: "Shifts" })
+            ]
+          }
+        ),
+        skuEnabled && /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: handleMobileNavClick(handleSKUsClick),
+            className: getMobileButtonClass("/skus"),
+            "aria-label": "SKU Management",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(outline.CubeIcon, { className: getIconClass("/skus") }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium", children: "SKUs" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: handleMobileNavClick(handleAIAgentClick),
+            className: getMobileButtonClass("/ai-agent"),
+            "aria-label": "AI Manufacturing Expert",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, { className: getIconClass("/ai-agent") }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium", children: "Axel AI" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: handleMobileNavClick(handleHelpClick),
+            className: getMobileButtonClass("/help"),
+            "aria-label": "Help & Support",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(outline.QuestionMarkCircleIcon, { className: getIconClass("/help") }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium", children: "Help" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: handleMobileNavClick(handleHealthClick),
+            className: getMobileButtonClass("/health"),
+            "aria-label": "System Health",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(outline.HeartIcon, { className: getIconClass("/health") }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium", children: "System Health" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-8 pt-6 border-t border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          onClick: handleMobileNavClick(handleProfileClick),
+          className: getMobileButtonClass("/profile"),
+          "aria-label": "Profile & Settings",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(outline.UserCircleIcon, { className: getIconClass("/profile") }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium", children: "Profile" })
+          ]
+        }
+      ) })
+    ] });
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("aside", { className: `hidden md:flex w-20 h-screen bg-white shadow-lg border-r border-gray-100 flex-col items-center fixed ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx(NavigationContent, {}) }),
-    isMobileMenuOpen && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: "md:hidden fixed inset-0 bg-black bg-opacity-50 z-40",
+          className: `md:hidden fixed inset-0 bg-black/60 backdrop-blur-sm z-40 transition-opacity duration-300 ease-in-out ${isMobileMenuOpen ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"}`,
           onClick: onMobileMenuClose,
           "aria-hidden": "true"
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: "md:hidden fixed inset-y-0 left-0 w-20 bg-white shadow-lg border-r border-gray-100 flex flex-col items-center z-50", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: onMobileMenuClose,
-            className: "p-2 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500",
-            "aria-label": "Close menu",
-            children: /* @__PURE__ */ jsxRuntime.jsx(outline.XMarkIcon, { className: "w-5 h-5" })
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(NavigationContent, {})
+      /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: `md:hidden fixed inset-y-0 left-0 w-72 xs:w-80 bg-white shadow-2xl flex flex-col z-50 transform transition-transform duration-300 ease-in-out ${isMobileMenuOpen ? "translate-x-0" : "-translate-x-full"}`, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-5 py-4 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-white", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: "/optifye-logo.png",
+              alt: "Optifye",
+              className: "w-11 h-11 object-contain",
+              onError: (e) => {
+                e.currentTarget.style.display = "none";
+                if (e.currentTarget.parentElement) {
+                  e.currentTarget.parentElement.innerHTML = '<span class="text-blue-600 font-bold text-xl">Optifye</span>';
+                }
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: onMobileMenuClose,
+              className: "p-2.5 rounded-lg text-gray-600 hover:text-gray-900 hover:bg-gray-100 active:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all active:scale-95",
+              "aria-label": "Close menu",
+              children: /* @__PURE__ */ jsxRuntime.jsx(outline.XMarkIcon, { className: "w-7 h-7" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(MobileNavigationContent, {}) })
       ] })
     ] })
   ] });
@@ -29853,17 +30266,39 @@ var MainLayout = ({
   logo
 }) => {
   const router$1 = router.useRouter();
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = React19.useState(false);
+  const handleMobileMenuOpen = () => setIsMobileMenuOpen(true);
+  const handleMobileMenuClose = () => setIsMobileMenuOpen(false);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `min-h-screen ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("header", { className: "md:hidden bg-white border-b border-gray-200 shadow-sm px-5 py-3.5 flex items-center justify-between sticky top-0 z-40", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(HamburgerButton, { onClick: handleMobileMenuOpen }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: "/optifye-logo.png",
+          alt: "Optifye",
+          className: "h-9 w-9 object-contain",
+          onError: (e) => {
+            e.currentTarget.style.display = "none";
+            if (e.currentTarget.parentElement) {
+              e.currentTarget.parentElement.innerHTML = '<span class="text-blue-600 font-bold text-lg">Optifye</span>';
+            }
+          }
+        }
+      ) })
+    ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       SideNavBar,
       {
         navItems,
         currentPathname: router$1.pathname,
         currentQuery: router$1.query,
-        logo
+        logo,
+        isMobileMenuOpen,
+        onMobileMenuClose: handleMobileMenuClose
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("main", { className: "ml-20 bg-gray-50 min-h-screen", children })
+    /* @__PURE__ */ jsxRuntime.jsx("main", { className: "md:ml-20 bg-gray-50 min-h-screen transition-all duration-300", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full", children }) })
   ] });
 };
 var Header = ({
@@ -29882,29 +30317,32 @@ var Header = ({
   const handleLogout = async () => {
     await signOut();
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("header", { className: `fixed top-0 left-0 right-0 h-16 bg-white border-b border-gray-200 z-50 ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full max-w-[1920px] mx-auto px-6 flex items-center justify-between", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-6", children: /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl font-semibold text-gray-900", children: getPageTitle() }) }),
-    user && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("header", { className: `fixed top-0 left-0 right-0 h-14 sm:h-16 bg-white border-b border-gray-200 z-50 ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full max-w-[1920px] mx-auto px-3 sm:px-4 md:px-6 flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 sm:gap-4 md:gap-6 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-sm sm:text-base md:text-lg lg:text-xl font-semibold text-gray-900 truncate", children: getPageTitle() }) }),
+    user && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-shrink-0", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
           onClick: () => setShowDropdown(!showDropdown),
-          className: "flex items-center gap-2 px-3 py-2 rounded-md hover:bg-gray-100 transition-colors",
+          className: "flex items-center gap-1 sm:gap-2 px-2 sm:px-3 py-1 sm:py-2 rounded-md hover:bg-gray-100 transition-colors",
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-8 bg-indigo-600 rounded-full flex items-center justify-center text-white text-sm font-medium", children: user.email?.[0]?.toUpperCase() || "U" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-700", children: user.email }),
-            /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8 bg-indigo-600 rounded-full flex items-center justify-center text-white text-xs sm:text-sm font-medium flex-shrink-0", children: user.email?.[0]?.toUpperCase() || "U" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm text-gray-700 truncate max-w-[100px] sm:max-w-[150px] md:max-w-[200px] lg:max-w-none hidden sm:block", children: user.email }),
+            /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-3 h-3 sm:w-4 sm:h-4 text-gray-400 flex-shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
           ]
         }
       ),
-      showDropdown && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50", children: /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          onClick: handleLogout,
-          className: "block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100",
-          children: "Sign out"
-        }
-      ) })
+      showDropdown && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 mt-1 sm:mt-2 w-40 sm:w-48 bg-white rounded-md shadow-lg py-1 z-50", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "block sm:hidden px-4 py-2 text-xs text-gray-500 border-b border-gray-100", children: user.email }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: handleLogout,
+            className: "block w-full text-left px-4 py-2 text-xs sm:text-sm text-gray-700 hover:bg-gray-100",
+            children: "Sign out"
+          }
+        )
+      ] })
     ] })
   ] }) });
 };
@@ -30255,7 +30693,7 @@ var ThreadSidebar = ({
   ] });
 };
 var axelProfilePng = "/axel-profile.png";
-var ProfilePicture = React19__namespace.default.memo(({ alt = "Axel", className = "w-12 h-12" }) => {
+var ProfilePicture = React19__namespace.default.memo(({ alt = "Axel", className = "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12" }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${className} rounded-xl overflow-hidden shadow-sm`, children: /* @__PURE__ */ jsxRuntime.jsx(
     "img",
     {
@@ -31861,54 +32299,105 @@ var AIAgentView = () => {
           }
         `
     } }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex-1 flex flex-col h-screen transition-all duration-300 ${isSidebarOpen ? "mr-80" : "mr-0"}`, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("header", { className: "flex-shrink-0 bg-white px-8 py-6 shadow-sm border-b border-gray-200/80 sticky top-0 z-10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between relative", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-          BackButtonMinimal,
-          {
-            onClick: () => navigate("/"),
-            text: "Back",
-            size: "default",
-            "aria-label": "Navigate back to dashboard"
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 text-center mx-auto", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-3 mb-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Chat with Axel" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1 w-1 sm:h-1.5 sm:w-1.5 md:h-2 md:w-2 rounded-full bg-green-500 animate-pulse ring-1 sm:ring-2 ring-green-500/30 ring-offset-1" })
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex-1 flex flex-col h-screen transition-all duration-300 ${isSidebarOpen ? "lg:mr-80 mr-0" : "mr-0"}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex-shrink-0 bg-white px-3 sm:px-6 md:px-8 py-3 sm:py-5 md:py-6 shadow-sm border-b border-gray-200/80 sticky top-0 z-10", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm:hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              BackButtonMinimal,
+              {
+                onClick: () => navigate("/"),
+                text: "Back",
+                size: "sm",
+                "aria-label": "Navigate back to dashboard"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  onClick: handleNewThread,
+                  className: "flex items-center gap-1 px-2.5 py-1.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-xs font-medium",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "w-3.5 h-3.5" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "New" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: () => setIsSidebarOpen(!isSidebarOpen),
+                  className: "relative flex items-center gap-1 px-2.5 py-1.5 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors text-xs font-medium",
+                  "aria-label": "Toggle chat history",
+                  children: isSidebarOpen ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3.5 h-3.5" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Hide" })
+                  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "w-3.5 h-3.5" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "History" }),
+                    newChatCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 bg-red-500 text-white text-xs rounded-full px-1.5 py-0.5 font-medium", children: newChatCount })
+                  ] })
+                }
+              )
+            ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500", children: /* @__PURE__ */ jsxRuntime.jsx(ISTTimer_default, {}) }) })
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 mb-0.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-base font-semibold text-gray-900", children: "Chat with Axel" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1 w-1 rounded-full bg-green-500 animate-pulse ring-1 ring-green-500/30 ring-offset-1" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-500", children: /* @__PURE__ */ jsxRuntime.jsx(ISTTimer_default, {}) }) })
+          ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              onClick: handleNewThread,
-              className: "flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "w-4 h-4" }),
-                "New Chat"
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden sm:flex items-center justify-between relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+            BackButtonMinimal,
             {
-              onClick: () => setIsSidebarOpen(!isSidebarOpen),
-              className: "relative flex items-center gap-2 px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors text-sm font-medium",
-              "aria-label": "Toggle chat history",
-              children: isSidebarOpen ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Hide History" })
-              ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "w-4 h-4" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Chat History" }),
-                newChatCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 bg-red-500 text-white text-xs rounded-full px-2 py-0.5 font-medium", children: newChatCount })
-              ] })
+              onClick: () => navigate("/"),
+              text: "Back",
+              size: "default",
+              "aria-label": "Navigate back to dashboard"
             }
-          )
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 text-center mx-auto", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-3 mb-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900", children: "Chat with Axel" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 w-1.5 md:h-2 md:w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500", children: /* @__PURE__ */ jsxRuntime.jsx(ISTTimer_default, {}) }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: handleNewThread,
+                className: "flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "w-4 h-4" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "New Chat" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => setIsSidebarOpen(!isSidebarOpen),
+                className: "relative flex items-center gap-2 px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors text-sm font-medium",
+                "aria-label": "Toggle chat history",
+                children: isSidebarOpen ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Hide History" })
+                ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "w-4 h-4" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Chat History" }),
+                  newChatCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 bg-red-500 text-white text-xs rounded-full px-2 py-0.5 font-medium", children: newChatCount })
+                ] })
+              }
+            )
+          ] })
         ] })
-      ] }) }),
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "main",
         {
@@ -31916,16 +32405,16 @@ var AIAgentView = () => {
           className: `flex-1 bg-gray-50/50 min-h-0 ${displayMessages.length === 0 && !isTransitioning ? "flex items-center justify-center" : "overflow-y-auto"}`,
           children: !activeThreadId && displayMessages.length === 0 && !isTransitioning ? (
             /* Centered welcome and input for new chat */
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-3xl mx-auto px-4 sm:px-6 flex flex-col items-center justify-center space-y-12 -mt-16", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-3xl mx-auto px-3 sm:px-4 md:px-6 flex flex-col items-center justify-center space-y-8 sm:space-y-12 -mt-8 sm:-mt-16", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center mb-8", children: /* @__PURE__ */ jsxRuntime.jsx(ProfilePicture, { alt: "Axel - AI Manufacturing Expert", className: "w-24 h-24" }) }),
-                /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: "text-3xl font-semibold text-gray-900", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center mb-4 sm:mb-6 md:mb-8", children: /* @__PURE__ */ jsxRuntime.jsx(ProfilePicture, { alt: "Axel - AI Manufacturing Expert", className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24" }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900 px-2 sm:px-4", children: [
                   typedText,
                   typedText.length < "Hi, I'm Axel - Your AI Supervisor".length && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-pulse", children: "|" })
                 ] })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative bg-white rounded-3xl shadow-lg border border-gray-200 focus-within:border-gray-300 transition-all duration-200", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-end gap-2 p-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 relative", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative bg-white rounded-2xl sm:rounded-3xl shadow-lg border border-gray-200 focus-within:border-gray-300 transition-all duration-200", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-end gap-2 p-3 sm:p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 relative", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "textarea",
                     {
@@ -31956,24 +32445,24 @@ var AIAgentView = () => {
                         });
                       },
                       placeholder: "Ask me anything about your shop-floor",
-                      className: "w-full resize-none bg-transparent px-2 py-2 pr-12 focus:outline-none placeholder-gray-500 text-gray-900 text-sm leading-relaxed",
+                      className: "w-full resize-none bg-transparent px-3 sm:px-4 py-3 sm:py-2 pr-12 sm:pr-14 focus:outline-none placeholder-gray-500 text-gray-900 text-sm sm:text-base leading-relaxed",
                       rows: 1,
-                      style: { minHeight: "24px", maxHeight: "120px" }
+                      style: { minHeight: "40px", maxHeight: "120px" }
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-2 bottom-2 flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-2 sm:right-3 bottom-2 sm:bottom-2 flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
                     "button",
                     {
                       type: "submit",
                       disabled: !inputValue.trim() || isCurrentThreadLoading,
-                      className: "inline-flex items-center justify-center w-8 h-8 bg-gray-900 text-white rounded-full hover:bg-gray-800 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-gray-500/20",
+                      className: "inline-flex items-center justify-center w-8 h-8 sm:w-9 sm:h-9 bg-gray-900 text-white rounded-full hover:bg-gray-800 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-gray-500/20",
                       children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { className: "w-4 h-4" })
                     }
                   ) })
                 ] }) }) }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center mt-2 text-xs text-gray-400", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: isCurrentThreadLoading ? "You can type your next message while Axel responds" : "Press Enter to send \u2022 Shift+Enter for new line" }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 ml-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row items-center justify-center gap-2 sm:gap-4 mt-2 text-xs text-gray-400", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-center", children: isCurrentThreadLoading ? "You can type your next message while Axel responds" : "Press Enter to send \u2022 Shift+Enter for new line" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
                     /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-1.5 h-1.5 rounded-full ${isCurrentThreadLoading ? "bg-orange-500" : "bg-green-500"}` }),
                     /* @__PURE__ */ jsxRuntime.jsx("span", { children: isCurrentThreadLoading ? "Responding..." : "Connected" })
                   ] })
@@ -31982,17 +32471,17 @@ var AIAgentView = () => {
             ] })
           ) : isTransitioning ? (
             /* Transition state - show user message first, then thinking */
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-4xl mx-auto px-4 sm:px-6 py-6 pb-32", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-4xl mx-auto px-3 sm:px-4 md:px-6 py-4 sm:py-6 pb-24 sm:pb-32", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 sm:space-y-6", children: [
               displayMessages.map((message, index) => /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",
                 {
-                  className: `flex gap-4 ${message.role === "user" ? "justify-end" : "justify-start"}`,
+                  className: `flex gap-2 sm:gap-3 md:gap-4 ${message.role === "user" ? "justify-end" : "justify-start"}`,
                   children: [
                     message.role === "assistant" && /* @__PURE__ */ jsxRuntime.jsx(ProfilePicture, {}),
                     /* @__PURE__ */ jsxRuntime.jsx("div", { className: `max-w-none w-full group ${message.role === "user" ? "order-1" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(
                       "div",
                       {
-                        className: `relative px-5 py-4 rounded-2xl shadow-sm ${message.role === "user" ? "bg-blue-600 text-white max-w-[85%] ml-auto" : "bg-white border border-gray-200/80 max-w-full"}`,
+                        className: `relative px-3 sm:px-4 md:px-5 py-3 sm:py-4 rounded-xl sm:rounded-2xl shadow-sm ${message.role === "user" ? "bg-blue-600 text-white max-w-[90%] sm:max-w-[85%] ml-auto" : "bg-white border border-gray-200/80 max-w-full"}`,
                         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${message.role === "user" ? "text-white" : "text-gray-800"}`, children: [
                           message.role === "assistant" ? message.id === -1 ? /* @__PURE__ */ jsxRuntime.jsx(
                             "div",
@@ -32016,18 +32505,18 @@ var AIAgentView = () => {
             ] }) })
           ) : (
             /* Regular chat view with messages */
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-4xl mx-auto px-4 sm:px-6 py-6 pb-32", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-4xl mx-auto px-3 sm:px-4 md:px-6 py-4 sm:py-6 pb-24 sm:pb-32", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 sm:space-y-6", children: [
               displayMessages.map((message, index) => /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",
                 {
-                  className: `flex gap-4 ${message.role === "user" ? "justify-end" : "justify-start"}`,
+                  className: `flex gap-2 sm:gap-3 md:gap-4 ${message.role === "user" ? "justify-end" : "justify-start"}`,
                   children: [
                     message.role === "assistant" && /* @__PURE__ */ jsxRuntime.jsx(ProfilePicture, {}),
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `max-w-none w-full group ${message.role === "user" ? "order-1" : ""}`, children: [
                       /* @__PURE__ */ jsxRuntime.jsxs(
                         "div",
                         {
-                          className: `relative px-5 py-4 rounded-2xl shadow-sm ${message.role === "user" ? "bg-blue-600 text-white max-w-[85%] ml-auto" : "bg-white border border-gray-200/80 max-w-full"}`,
+                          className: `relative px-3 sm:px-4 md:px-5 py-3 sm:py-4 rounded-xl sm:rounded-2xl shadow-sm ${message.role === "user" ? "bg-blue-600 text-white max-w-[90%] sm:max-w-[85%] ml-auto" : "bg-white border border-gray-200/80 max-w-full"}`,
                           children: [
                             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${message.role === "user" ? "text-white" : "text-gray-800"}`, children: [
                               message.role === "assistant" ? message.id === -1 ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -32043,9 +32532,9 @@ var AIAgentView = () => {
                               "button",
                               {
                                 onClick: () => copyToClipboard(message.content, message.id.toString()),
-                                className: "absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200 p-1.5 hover:bg-gray-100 rounded-lg",
+                                className: "absolute top-2 sm:top-3 right-2 sm:right-3 opacity-100 sm:opacity-0 group-hover:opacity-100 transition-opacity duration-200 p-1 sm:p-1.5 hover:bg-gray-100 rounded-lg",
                                 title: "Copy message",
-                                children: copiedMessageId === message.id.toString() ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-4 h-4 text-green-600" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "w-4 h-4 text-gray-500" })
+                                children: copiedMessageId === message.id.toString() ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-3.5 h-3.5 sm:w-4 sm:h-4 text-green-600" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "w-3.5 h-3.5 sm:w-4 sm:h-4 text-gray-500" })
                               }
                             ),
                             message.reasoning && /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "mt-3 pt-3 border-t border-gray-200", children: [
@@ -32055,7 +32544,7 @@ var AIAgentView = () => {
                           ]
                         }
                       ),
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `mt-2 flex items-center gap-2 text-xs text-gray-400 ${message.role === "user" ? "justify-end" : "justify-start"}`, children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `mt-1.5 sm:mt-2 flex items-center gap-2 text-xs text-gray-400 ${message.role === "user" ? "justify-end" : "justify-start"}`, children: [
                         /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTime3(message.created_at) }),
                         message.role === "assistant" && message.id !== -1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
                           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1 h-1 bg-gray-300 rounded-full" }),
@@ -32090,15 +32579,15 @@ var AIAgentView = () => {
           )
         }
       ),
-      (displayMessages.length > 0 || isTransitioning) && /* @__PURE__ */ jsxRuntime.jsx("footer", { className: "fixed bottom-0 left-0 right-0 bg-gradient-to-t from-gray-50/50 to-transparent pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-4xl mx-auto p-4 sm:p-6 pointer-events-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [
+      (displayMessages.length > 0 || isTransitioning) && /* @__PURE__ */ jsxRuntime.jsx("footer", { className: `fixed bottom-0 left-0 right-0 bg-gradient-to-t from-gray-50/50 to-transparent pointer-events-none ${isSidebarOpen ? "lg:right-80" : "right-0"}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-4xl mx-auto p-3 sm:p-4 md:p-6 pointer-events-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: `relative bg-white rounded-3xl shadow-lg border border-gray-200 focus-within:border-gray-300 transition-all duration-200 ${isTransitioning ? "animate-slide-down" : ""}`,
+            className: `relative bg-white rounded-2xl sm:rounded-3xl shadow-lg border border-gray-200 focus-within:border-gray-300 transition-all duration-200 ${isTransitioning ? "animate-slide-down" : ""}`,
             style: isTransitioning ? {
               animation: "slideDown 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards"
             } : {},
-            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-end gap-2 p-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 relative", children: [
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-end gap-2 p-3 sm:p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 relative", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "textarea",
                 {
@@ -32129,33 +32618,33 @@ var AIAgentView = () => {
                     });
                   },
                   placeholder: "Ask me anything about your shop-floor",
-                  className: "w-full resize-none bg-transparent px-2 py-2 pr-12 focus:outline-none placeholder-gray-500 text-gray-900 text-sm leading-relaxed",
+                  className: "w-full resize-none bg-transparent px-3 sm:px-4 py-3 sm:py-2 pr-12 sm:pr-14 focus:outline-none placeholder-gray-500 text-gray-900 text-sm sm:text-base leading-relaxed",
                   rows: 1,
-                  style: { minHeight: "24px", maxHeight: "120px" }
+                  style: { minHeight: "40px", maxHeight: "120px" }
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-2 bottom-2 flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-2 sm:right-3 bottom-2 sm:bottom-2 flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
                   type: "submit",
                   disabled: !inputValue.trim() || isCurrentThreadLoading,
-                  className: "inline-flex items-center justify-center w-8 h-8 bg-gray-900 text-white rounded-full hover:bg-gray-800 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-gray-500/20",
+                  className: "inline-flex items-center justify-center w-8 h-8 sm:w-9 sm:h-9 bg-gray-900 text-white rounded-full hover:bg-gray-800 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-gray-500/20",
                   children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { className: "w-4 h-4" })
                 }
               ) })
             ] }) })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center mt-2 text-xs text-gray-400", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: isCurrentThreadLoading ? "You can type your next message while Axel responds" : "Press Enter to send \u2022 Shift+Enter for new line" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 ml-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row items-center justify-center gap-2 sm:gap-4 mt-2 text-xs text-gray-400", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-center", children: isCurrentThreadLoading ? "You can type your next message while Axel responds" : "Press Enter to send \u2022 Shift+Enter for new line" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-1.5 h-1.5 rounded-full ${isCurrentThreadLoading ? "bg-orange-500" : "bg-green-500"}` }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: isCurrentThreadLoading ? "Responding..." : "Connected" })
           ] })
         ] })
       ] }) }) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `fixed right-0 top-0 z-20 h-screen transition-transform duration-300 ease-in-out ${isSidebarOpen ? "translate-x-0" : "translate-x-full"}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-80 h-full bg-white border-l border-gray-200 shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `fixed right-0 top-0 z-20 h-screen transition-transform duration-300 ease-in-out ${isSidebarOpen ? "translate-x-0" : "translate-x-full"}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full sm:w-96 lg:w-80 h-full bg-white border-l border-gray-200 shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
       ThreadSidebar,
       {
         activeThreadId,
@@ -32537,8 +33026,8 @@ var HelpView = ({
       animate: { opacity: 1 },
       transition: { duration: 0.3 },
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white px-8 py-6 shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between relative", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white px-4 sm:px-6 md:px-8 py-4 sm:py-5 md:py-6 shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-4 relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
             BackButtonMinimal,
             {
               onClick: handleBackClick,
@@ -32547,9 +33036,9 @@ var HelpView = ({
               "aria-label": "Navigate back to dashboard"
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 text-center mx-auto", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Help & Support" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Get immediate assistance from our engineering team. Submit a detailed support request below." })
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 text-center mx-auto mt-2 sm:mt-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900", children: "Help & Support" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 sm:mt-1 text-xs sm:text-sm text-gray-500 px-2 sm:px-0", children: "Get immediate assistance from our engineering team. Submit a detailed support request below." })
           ] })
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
@@ -32873,7 +33362,7 @@ function HomeView({
       return null;
     }
     return /* @__PURE__ */ jsxRuntime.jsxs(Select, { onValueChange: handleLineChange, defaultValue: selectedLineId, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "w-full sm:w-[200px] bg-white border border-gray-200 shadow-sm rounded-md h-9 text-sm", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Select a line" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "w-full sm:w-[200px] bg-white border border-gray-200 shadow-sm rounded-md h-11 sm:h-9 text-sm", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Select a line" }) }),
       /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { className: "z-50 bg-white shadow-lg border border-gray-200 rounded-md", children: availableLineIds.map((id3) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: id3, children: lineNames[id3] || (id3 === factoryViewId ? "All Lines" : `Line ${id3.substring(0, 4)}`) }, id3)) })
     ] });
   }, [availableLineIds, handleLineChange, selectedLineId, lineNames, factoryViewId, allLineIds.length]);
@@ -32885,7 +33374,7 @@ function HomeView({
   if (errorMessage || displayNamesError) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-screen items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg bg-white p-6 shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-3 text-red-500", children: [
       /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-lg font-medium", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-base sm:text-lg font-medium", children: [
         "Error: ",
         errorMessage || displayNamesError?.message
       ] })
@@ -32899,7 +33388,7 @@ function HomeView({
       animate: { opacity: 1 },
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-1", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("main", { className: "flex flex-1 flex-col", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-30 sm:static bg-white shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between px-3 sm:px-6 lg:px-8 py-1.5 sm:py-2.5", children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative sm:sticky sm:top-0 z-30 bg-white shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between px-4 sm:px-6 lg:px-8 py-3 sm:py-2.5", children: /* @__PURE__ */ jsxRuntime.jsx(
             DashboardHeader,
             {
               lineTitle,
@@ -32908,8 +33397,8 @@ function HomeView({
             }
           ) }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto sm:overflow-hidden relative", children: [
-            lineSelectorComponent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-3 top-2 sm:right-6 sm:top-3 z-30", children: lineSelectorComponent }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full sm:h-full min-h-[calc(100vh-80px)] sm:min-h-0", children: memoizedWorkspaceMetrics.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+            lineSelectorComponent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-4 top-3 sm:right-6 sm:top-3 z-30", children: lineSelectorComponent }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full sm:h-full min-h-[calc(100vh-120px)] sm:min-h-0", children: memoizedWorkspaceMetrics.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
               motion.div,
               {
                 initial: { opacity: 0, scale: 0.98 },
@@ -33126,11 +33615,11 @@ var MetricCards = React19.memo(({ lineInfo }) => {
       variants: containerVariants,
       initial: "initial",
       animate: "animate",
-      className: "grid grid-cols-1 md:grid-cols-3 gap-4 mb-2 md:h-[35vh] h-auto",
+      className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 mb-2 md:h-[35vh] h-auto",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-4 overflow-hidden h-[280px] md:h-auto", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-base font-semibold text-gray-700 mb-2 text-center", children: "Line Output" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[calc(100%-2.5rem)]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 overflow-hidden h-[240px] sm:h-[280px] md:h-auto lg:col-span-1 sm:col-span-2 lg:col-span-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm sm:text-base font-semibold text-gray-700 mb-2 text-center", children: "Line Output" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[calc(100%-2rem)] sm:h-[calc(100%-2.5rem)]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full", children: /* @__PURE__ */ jsxRuntime.jsx(
             OutputProgressChart,
             {
               currentOutput: lineInfo?.metrics.current_output || 0,
@@ -33138,19 +33627,19 @@ var MetricCards = React19.memo(({ lineInfo }) => {
             }
           ) }) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-4 overflow-hidden h-[160px] md:h-auto", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-base font-semibold text-gray-700 text-center mb-2", children: "Underperforming Workspaces" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center h-[calc(100%-2.5rem)]", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-6xl md:text-7xl font-bold text-red-600", children: lineInfo?.metrics.underperforming_workspaces }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-2xl md:text-3xl text-gray-500 ml-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 overflow-hidden h-[140px] sm:h-[160px] md:h-auto", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm sm:text-base font-semibold text-gray-700 text-center mb-2", children: "Underperforming Workspaces" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center h-[calc(100%-2rem)] sm:h-[calc(100%-2.5rem)]", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-red-600", children: lineInfo?.metrics.underperforming_workspaces }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xl sm:text-2xl md:text-2xl lg:text-3xl text-gray-500 ml-1 sm:ml-2", children: [
               "/ ",
               lineInfo?.metrics.total_workspaces
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-4 overflow-hidden h-[160px] md:h-auto", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-base font-semibold text-gray-700 text-center mb-2", children: "Average Efficiency" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[calc(100%-2.5rem)]", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-6xl md:text-7xl font-bold text-gray-900", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 overflow-hidden h-[140px] sm:h-[160px] md:h-auto", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm sm:text-base font-semibold text-gray-700 text-center mb-2", children: "Average Efficiency" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[calc(100%-2rem)] sm:h-[calc(100%-2.5rem)]", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold ${(lineInfo?.metrics.avg_efficiency || 0) >= 90 ? "text-green-600" : (lineInfo?.metrics.avg_efficiency || 0) >= 70 ? "text-yellow-600" : "text-red-600"}`, children: [
             lineInfo?.metrics.avg_efficiency.toFixed(1),
             "%"
           ] }) })
@@ -33195,27 +33684,27 @@ var BottomSection = React19.memo(({
       variants: containerVariants,
       initial: "initial",
       animate: "animate",
-      className: "grid grid-cols-1 md:grid-cols-5 gap-4 md:h-[calc(57vh-4rem)] h-auto md:mt-0 mt-4",
+      className: "grid grid-cols-1 lg:grid-cols-5 gap-3 sm:gap-4 md:h-[calc(57vh-4rem)] h-auto md:mt-0 mt-4",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(motion.div, { variants: itemVariants, className: "md:col-span-2 bg-white rounded-xl shadow-sm p-4 flex flex-col overflow-hidden h-[400px] md:h-auto", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(motion.div, { variants: itemVariants, className: "lg:col-span-2 bg-white rounded-xl shadow-sm p-3 sm:p-4 flex flex-col overflow-hidden h-[350px] sm:h-[400px] md:h-auto", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center mb-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-700 text-center flex-1", children: "Poorest Performing Workspaces" }),
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-base sm:text-lg font-semibold text-gray-700 text-center flex-1", children: "Poorest Performing Workspaces" }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
                 className: "p-1.5 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer",
                 onClick: () => handleNavigate && handleNavigate(`/leaderboard`),
-                children: /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowRightIcon, { className: "w-5 h-5 text-gray-500" })
+                children: /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowRightIcon, { className: "w-4 h-4 sm:w-5 sm:h-5 text-gray-500" })
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "divide-y overflow-auto flex-1 pr-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "divide-y overflow-auto flex-1 pr-1 sm:pr-2", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between pb-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 md:gap-6", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-gray-500 min-w-[100px] md:min-w-[120px] text-sm md:text-base", children: "Workspace" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3 md:gap-6", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-gray-500 min-w-[80px] sm:min-w-[100px] md:min-w-[120px] text-xs sm:text-sm md:text-base", children: "Workspace" }),
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs md:text-sm font-medium text-gray-500", children: "Current/Ideal" })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs md:text-sm font-medium text-gray-500 pr-2", children: "Efficiency" })
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs md:text-sm font-medium text-gray-500 pr-1 sm:pr-2", children: "Efficiency" })
             ] }),
             lineInfo.metrics.poorest_performing_workspaces && lineInfo.metrics.poorest_performing_workspaces.length > 0 ? lineInfo.metrics.poorest_performing_workspaces.map((ws, index) => {
               const wsMetrics = workspaceData.find((w) => w.workspace_name === ws.workspace_name);
@@ -33237,10 +33726,10 @@ var BottomSection = React19.memo(({
                     clickHandler();
                     handleNavigate && handleNavigate(fullUrl);
                   },
-                  className: "block py-3 hover:bg-gray-50 transition-colors rounded-lg cursor-pointer",
+                  className: "block py-2 sm:py-3 hover:bg-gray-50 transition-colors rounded-lg cursor-pointer",
                   children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 md:gap-6", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-[100px] md:min-w-[120px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-gray-900 text-sm md:text-base", children: displayName }) }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3 md:gap-6", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-[80px] sm:min-w-[100px] md:min-w-[120px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-gray-900 text-xs sm:text-sm md:text-base truncate", children: displayName }) }),
                       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs md:text-sm font-medium text-gray-900", children: [
                         ws.action_count || 0,
                         " / ",
@@ -33271,10 +33760,10 @@ var BottomSection = React19.memo(({
                       clickHandler();
                       handleNavigate && handleNavigate(fullUrl);
                     },
-                    className: "block py-3 hover:bg-gray-50 transition-colors rounded-lg cursor-pointer",
+                    className: "block py-2 sm:py-3 hover:bg-gray-50 transition-colors rounded-lg cursor-pointer",
                     children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 md:gap-6", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-[100px] md:min-w-[120px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-gray-900 text-sm md:text-base", children: displayName }) }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3 md:gap-6", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-[80px] sm:min-w-[100px] md:min-w-[120px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-gray-900 text-xs sm:text-sm md:text-base truncate", children: displayName }) }),
                         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs md:text-sm font-medium text-gray-900", children: [
                           ws.action_count || 0,
                           " / ",
@@ -33293,9 +33782,9 @@ var BottomSection = React19.memo(({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(motion.div, { variants: itemVariants, className: "md:col-span-3 bg-white rounded-xl shadow-sm p-4 flex flex-col overflow-hidden h-[400px] md:h-auto", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-700 mb-2 text-center", children: "Hourly Line Output" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-[300px] md:min-h-[400px] pb-8 md:pb-16", children: lineInfo && /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsxs(motion.div, { variants: itemVariants, className: "lg:col-span-3 bg-white rounded-xl shadow-sm p-3 sm:p-4 flex flex-col overflow-hidden h-[350px] sm:h-[400px] md:h-auto", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-base sm:text-lg font-semibold text-gray-700 mb-2 text-center", children: "Hourly Line Output" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-[280px] sm:min-h-[300px] md:min-h-[400px] pb-6 sm:pb-8 md:pb-16", children: lineInfo && /* @__PURE__ */ jsxRuntime.jsx(
             HourlyOutputChart2,
             {
               data: hourlyOutputData,
@@ -33666,9 +34155,9 @@ var KPIDetailView = ({
     return /* @__PURE__ */ jsxRuntime.jsx(LoadingPage, { message: "Processing line data..." });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 sm:px-4 md:px-6 py-2 sm:py-3", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center relative", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
           BackButtonMinimal,
           {
             onClick: handleBackClick,
@@ -33677,37 +34166,37 @@ var KPIDetailView = ({
             "aria-label": "Navigate back to previous page"
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: lineInfo?.line_name || "Line" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex justify-center mt-2 sm:mt-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900 text-center truncate", children: lineInfo?.line_name || "Line" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 w-1.5 sm:h-2 sm:w-2 rounded-full bg-green-500 animate-pulse ring-1 sm:ring-2 ring-green-500/30 ring-offset-1 flex-shrink-0" })
         ] }) })
       ] }),
-      (activeTab !== "monthly_history" || urlDate || urlShift) && metrics2 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 bg-blue-50 px-3 py-2 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-4", children: [
+      (activeTab !== "monthly_history" || urlDate || urlShift) && metrics2 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 sm:mt-3 bg-blue-50 px-2 sm:px-3 py-1.5 sm:py-2 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2 sm:gap-3 md:gap-4", children: [
         !urlDate && !urlShift && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsxRuntime.jsx(ISTTimer_default, {}) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm sm:text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsxRuntime.jsx(ISTTimer_default, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium text-blue-600", children: metrics2 && formatLocalDate(new Date(metrics2.date)) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: metrics2 && formatLocalDate(new Date(metrics2.date)) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
         urlDate && metrics2.date && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-2 py-1 text-xs font-medium bg-blue-200 text-blue-800 rounded-md", children: getDaysDifference2(metrics2.date) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-blue-600", children: getShiftIcon(metrics2.shift_id ?? 0) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-base font-medium text-blue-600", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: [
             getShiftName(metrics2.shift_id ?? 0),
             " Shift"
           ] })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex items-center justify-between", children: [
-        !urlDate && !urlShift && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 sm:gap-0", children: [
+        !urlDate && !urlShift && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1 sm:gap-2 w-full sm:w-auto", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               onClick: handleOverviewClick,
-              className: `px-3 py-1.5 font-medium rounded-lg transition-colors whitespace-nowrap ${activeTab === "overview" ? "bg-blue-50 text-blue-600" : "text-gray-600 hover:bg-gray-50"}`,
+              className: `flex-1 sm:flex-none px-2 sm:px-3 py-1.5 text-xs sm:text-sm font-medium rounded-lg transition-colors whitespace-nowrap ${activeTab === "overview" ? "bg-blue-50 text-blue-600" : "text-gray-600 hover:bg-gray-50"}`,
               children: "Efficiency Overview"
             }
           ),
@@ -33715,12 +34204,12 @@ var KPIDetailView = ({
             "button",
             {
               onClick: handleMonthlyHistoryClick,
-              className: `px-3 py-1.5 font-medium rounded-lg transition-colors whitespace-nowrap ${activeTab === "monthly_history" ? "bg-blue-50 text-blue-600" : "text-gray-600 hover:bg-gray-50"}`,
+              className: `flex-1 sm:flex-none px-2 sm:px-3 py-1.5 text-xs sm:text-sm font-medium rounded-lg transition-colors whitespace-nowrap ${activeTab === "monthly_history" ? "bg-blue-50 text-blue-600" : "text-gray-600 hover:bg-gray-50"}`,
               children: "Monthly History"
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-3 ml-auto", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2 sm:space-x-3 w-full sm:w-auto justify-end sm:ml-auto", children: [
           lineInfo && activeTab === "overview" && /* @__PURE__ */ jsxRuntime.jsx(LinePdfGenerator, { lineInfo, workspaceData: workspaces || [] }),
           activeTab === "monthly_history" && /* @__PURE__ */ jsxRuntime.jsx(
             LineMonthlyPdfGenerator,
@@ -33885,11 +34374,11 @@ var LineCard = ({ line, onClick }) => {
       animate: { opacity: 1, y: 0 },
       transition: { duration: 0.3 },
       onClick,
-      className: "relative bg-white border border-gray-200/80 shadow-sm hover:shadow-lg \n                 rounded-xl p-6 transition-all duration-200 cursor-pointer \n                 hover:scale-[1.01] active:scale-[0.99] group",
+      className: "relative bg-white border border-gray-200/80 shadow-sm hover:shadow-lg \n                 rounded-xl p-4 sm:p-5 md:p-6 transition-all duration-200 cursor-pointer \n                 hover:scale-[1.01] active:scale-[0.99] group",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mb-6", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-semibold text-gray-900", children: line.line_name }),
-          kpis && isOnTrack !== null && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium ${isOnTrack ? "bg-emerald-100 text-emerald-700 border border-emerald-200" : "bg-red-100 text-red-700 border border-red-200"}`, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 mb-4 sm:mb-5 md:mb-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg sm:text-xl font-semibold text-gray-900 truncate", children: line.line_name }),
+          kpis && isOnTrack !== null && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center gap-1.5 px-2.5 sm:px-3 py-1 sm:py-1.5 rounded-full text-xs font-medium self-start sm:self-auto ${isOnTrack ? "bg-emerald-100 text-emerald-700 border border-emerald-200" : "bg-red-100 text-red-700 border border-red-200"}`, children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-2 h-2 rounded-full ${isOnTrack ? "bg-emerald-500" : "bg-red-500"} animate-pulse` }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: isOnTrack ? "On Track" : "Behind" })
           ] })
@@ -33909,15 +34398,15 @@ var LineCard = ({ line, onClick }) => {
           ] })
         ] }),
         error && !kpis && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "Unable to load metrics" }) }),
-        kpis && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-5", children: [
+        kpis && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 sm:space-y-5", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-2", children: "Efficiency" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-1.5 sm:mb-2", children: "Efficiency" }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline justify-between", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-3xl font-semibold text-gray-900", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-2xl sm:text-3xl font-semibold text-gray-900", children: [
                 kpis.efficiency.value.toFixed(1),
                 "%"
               ] }),
-              kpis.efficiency.change !== 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `text-sm font-medium ${kpis.efficiency.change > 0 ? "text-emerald-600" : "text-red-600"}`, children: [
+              kpis.efficiency.change !== 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `text-xs sm:text-sm font-medium ${kpis.efficiency.change > 0 ? "text-emerald-600" : "text-red-600"}`, children: [
                 kpis.efficiency.change > 0 ? "+" : "",
                 kpis.efficiency.change.toFixed(1),
                 "%"
@@ -33925,19 +34414,19 @@ var LineCard = ({ line, onClick }) => {
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-2", children: "Output Progress" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline justify-between mb-3", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-2xl font-semibold text-gray-900", children: kpis.outputProgress.current }),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-gray-500 font-medium", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-1.5 sm:mb-2", children: "Output Progress" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline justify-between mb-2 sm:mb-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xl sm:text-2xl font-semibold text-gray-900", children: kpis.outputProgress.current }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-sm text-gray-500 font-medium", children: [
                 "/ ",
                 kpis.outputProgress.target,
                 " units"
               ] })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full bg-gray-200 rounded-full h-2.5", children: /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full bg-gray-200 rounded-full h-2 sm:h-2.5", children: /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: "bg-blue-600 h-2.5 rounded-full transition-all duration-500 ease-out",
+                className: "bg-blue-600 h-2 sm:h-2.5 rounded-full transition-all duration-500 ease-out",
                 style: {
                   width: `${Math.min(
                     kpis.outputProgress.current / kpis.outputProgress.target * 100,
@@ -33948,17 +34437,17 @@ var LineCard = ({ line, onClick }) => {
             ) })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-2", children: "Underperforming Workspaces" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-1.5 sm:mb-2", children: "Underperforming Workspaces" }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-2xl font-semibold ${kpis.underperformingWorkers.current === 0 ? "text-emerald-600" : kpis.underperformingWorkers.current <= 2 ? "text-yellow-600" : "text-red-600"}`, children: kpis.underperformingWorkers.current }),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-gray-500 font-medium", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-xl sm:text-2xl font-semibold ${kpis.underperformingWorkers.current === 0 ? "text-emerald-600" : kpis.underperformingWorkers.current <= 2 ? "text-yellow-600" : "text-red-600"}`, children: kpis.underperformingWorkers.current }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-sm text-gray-500 font-medium", children: [
                 "of ",
                 kpis.underperformingWorkers.total
               ] })
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-4 right-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2.5 rounded-full bg-gray-50 group-hover:bg-blue-50 transition-colors shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowRightIcon, { className: "w-5 h-5 text-gray-400 group-hover:text-blue-600 transition-colors" }) }) })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-3 right-3 sm:bottom-4 sm:right-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 sm:p-2.5 rounded-full bg-gray-50 group-hover:bg-blue-50 transition-colors shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowRightIcon, { className: "w-4 h-4 sm:w-5 sm:h-5 text-gray-400 group-hover:text-blue-600 transition-colors" }) }) })
       ]
     }
   );
@@ -34037,8 +34526,8 @@ var KPIsOverviewView = ({
   }
   if (error) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center relative", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 sm:px-4 md:px-6 py-2 sm:py-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center relative", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
           BackButtonMinimal,
           {
             onClick: handleBackClick,
@@ -34047,9 +34536,9 @@ var KPIsOverviewView = ({
             "aria-label": "Navigate back to previous page"
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Shop-floor overview" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex justify-center mt-2 sm:mt-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900 text-center", children: "Shop-floor overview" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 w-1.5 sm:h-2 sm:w-2 rounded-full bg-green-500 animate-pulse ring-1 sm:ring-2 ring-green-500/30 ring-offset-1 flex-shrink-0" })
         ] }) })
       ] }) }) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-500", children: error }) }) })
@@ -34057,8 +34546,8 @@ var KPIsOverviewView = ({
   }
   if (lines.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center relative", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 sm:px-4 md:px-6 py-2 sm:py-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center relative", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
           BackButtonMinimal,
           {
             onClick: handleBackClick,
@@ -34067,9 +34556,9 @@ var KPIsOverviewView = ({
             "aria-label": "Navigate back to previous page"
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Shop-floor overview" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex justify-center mt-2 sm:mt-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900 text-center", children: "Shop-floor overview" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 w-1.5 sm:h-2 sm:w-2 rounded-full bg-green-500 animate-pulse ring-1 sm:ring-2 ring-green-500/30 ring-offset-1 flex-shrink-0" })
         ] }) })
       ] }) }) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
@@ -34079,9 +34568,9 @@ var KPIsOverviewView = ({
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 sm:px-4 md:px-6 py-2 sm:py-3", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center relative", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
           BackButtonMinimal,
           {
             onClick: handleBackClick,
@@ -34090,27 +34579,27 @@ var KPIsOverviewView = ({
             "aria-label": "Navigate back to previous page"
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Shop-floor overview" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex justify-center mt-2 sm:mt-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900 text-center", children: "Shop-floor overview" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 w-1.5 sm:h-2 sm:w-2 rounded-full bg-green-500 animate-pulse ring-1 sm:ring-2 ring-green-500/30 ring-offset-1 flex-shrink-0" })
         ] }) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 bg-blue-50 px-3 py-2 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsxRuntime.jsx(ISTTimer_default, {}) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium text-blue-600", children: formatLocalDate2(/* @__PURE__ */ new Date()) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 sm:mt-3 bg-blue-50 px-2 sm:px-3 py-1.5 sm:py-2 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2 sm:gap-3 md:gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm sm:text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsxRuntime.jsx(ISTTimer_default, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: formatLocalDate2(/* @__PURE__ */ new Date()) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-blue-600", children: getShiftIcon(currentShiftDetails.shiftId) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-base font-medium text-blue-600", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: [
             shiftName,
             " Shift"
           ] })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600 text-center mt-3", children: "Click on any line to view detailed performance metrics" })
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs sm:text-sm text-gray-600 text-center mt-2 sm:mt-3 px-2 sm:px-0", children: "Click on any line to view detailed performance metrics" })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 p-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6", children: lines.map((line) => /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 p-3 sm:p-4 md:p-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-4 md:gap-6", children: lines.map((line) => /* @__PURE__ */ jsxRuntime.jsx(
       LineCard,
       {
         line,
@@ -34130,14 +34619,14 @@ var HeaderRibbon = React19.memo(({
   shiftId,
   getShiftIcon,
   getShiftName
-}) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 bg-blue-50 px-3 py-2 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-4", children: [
-  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsxRuntime.jsx(IsolatedTimer, {}) }),
-  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" }),
-  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium text-blue-600", children: currentDate }),
-  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" }),
-  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+}) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 sm:mt-3 bg-blue-50 px-2 sm:px-3 py-1.5 sm:py-2 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2 sm:gap-4", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm sm:text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsxRuntime.jsx(IsolatedTimer, {}) }),
+  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
+  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: currentDate }),
+  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
+  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-blue-600", children: getShiftIcon(shiftId) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-base font-medium text-blue-600", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: [
       getShiftName(shiftId),
       " Shift"
     ] })
@@ -34371,9 +34860,50 @@ var LeaderboardDetailView = React19.memo(({
     ] }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `min-h-screen bg-slate-50 flex flex-col ${className}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-20 bg-white shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 sm:px-8 py-2 sm:py-2.5", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-auto sm:w-32", children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-20 bg-white shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 sm:px-6 md:px-8 py-2 sm:py-2.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm:hidden", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            BackButtonMinimal,
+            {
+              onClick: handleBackClick,
+              text: "Back",
+              size: "sm",
+              "aria-label": "Navigate back to previous page"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: handleSortToggle,
+              className: "flex items-center gap-1 px-2.5 py-1.5 bg-white rounded-lg border border-gray-200 shadow-sm hover:bg-gray-50 text-xs transition-colors",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Sort" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    className: "w-3.5 h-3.5 text-gray-600",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: sortAscending ? /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 15l7-7 7 7" }) : /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 9l-7 7-7-7" })
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-base font-semibold text-gray-900", children: "Leaderboard" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1 w-1 rounded-full bg-green-500 animate-pulse ring-1 ring-green-500/30 ring-offset-1" })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden sm:flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-32", children: /* @__PURE__ */ jsxRuntime.jsx(
           BackButtonMinimal,
           {
             onClick: handleBackClick,
@@ -34382,17 +34912,17 @@ var LeaderboardDetailView = React19.memo(({
             "aria-label": "Navigate back to previous page"
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Leaderboard" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 w-1.5 sm:h-2 sm:w-2 rounded-full bg-green-500 animate-pulse ring-1 sm:ring-2 ring-green-500/30 ring-offset-1" })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900", children: "Leaderboard" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-auto sm:w-32 flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-32 flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
             onClick: handleSortToggle,
-            className: "flex items-center gap-1 sm:gap-2 px-2 sm:px-4 py-1.5 sm:py-2 bg-white rounded-lg border border-gray-200 shadow-sm hover:bg-gray-50 text-xs sm:text-sm transition-colors",
+            className: "flex items-center gap-2 px-4 py-2 bg-white rounded-lg border border-gray-200 shadow-sm hover:bg-gray-50 text-sm transition-colors",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: "Sort by Efficiency" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Sort by Efficiency" }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "svg",
                 {
@@ -34901,48 +35431,113 @@ var BreakRow = React19.memo(({
   onRemove,
   index
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-12 gap-2 sm:gap-4 items-center w-full bg-white hover:bg-gray-50 rounded-md transition-all duration-200 p-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsxRuntime.jsx(
-      TimePickerDropdown,
-      {
-        value: breakItem.startTime,
-        onChange: (value) => onUpdate(index, "startTime", value),
-        placeholder: "Start time",
-        className: "w-full"
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsxRuntime.jsx(
-      TimePickerDropdown,
-      {
-        value: breakItem.endTime,
-        onChange: (value) => onUpdate(index, "endTime", value),
-        placeholder: "End time",
-        className: "w-full"
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium text-gray-700", children: [
-      breakItem.duration,
-      " min"
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        type: "text",
-        value: breakItem.remarks || "",
-        onChange: (e) => onUpdate(index, "remarks", e.target.value),
-        placeholder: "Break remarks",
-        className: "w-full px-2 sm:px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-1 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        onClick: () => onRemove(index),
-        className: "text-gray-400 hover:text-red-500 focus:outline-none transition-colors",
-        "aria-label": "Remove break",
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
-      }
-    ) })
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden sm:grid grid-cols-12 gap-2 md:gap-4 items-center w-full bg-white hover:bg-gray-50 rounded-md transition-all duration-200 p-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsxRuntime.jsx(
+        TimePickerDropdown,
+        {
+          value: breakItem.startTime,
+          onChange: (value) => onUpdate(index, "startTime", value),
+          placeholder: "Start time",
+          className: "w-full"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsxRuntime.jsx(
+        TimePickerDropdown,
+        {
+          value: breakItem.endTime,
+          onChange: (value) => onUpdate(index, "endTime", value),
+          placeholder: "End time",
+          className: "w-full"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium text-gray-700", children: [
+        breakItem.duration,
+        " min"
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "text",
+          value: breakItem.remarks || "",
+          onChange: (e) => onUpdate(index, "remarks", e.target.value),
+          placeholder: "Break remarks",
+          className: "w-full px-2 sm:px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-1 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => onRemove(index),
+          className: "text-gray-400 hover:text-red-500 focus:outline-none transition-colors",
+          "aria-label": "Remove break",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm:hidden bg-white border border-gray-200 rounded-lg p-3 mb-3 space-y-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("h5", { className: "text-sm font-medium text-gray-700", children: [
+          "Break ",
+          index + 1
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => onRemove(index),
+            className: "text-gray-400 hover:text-red-500 focus:outline-none transition-colors p-1",
+            "aria-label": "Remove break",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs font-medium text-gray-600 mb-1", children: "Start Time" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TimePickerDropdown,
+            {
+              value: breakItem.startTime,
+              onChange: (value) => onUpdate(index, "startTime", value),
+              placeholder: "Start time",
+              className: "w-full"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs font-medium text-gray-600 mb-1", children: "End Time" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TimePickerDropdown,
+            {
+              value: breakItem.endTime,
+              onChange: (value) => onUpdate(index, "endTime", value),
+              placeholder: "End time",
+              className: "w-full"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs font-medium text-gray-600 mb-1", children: "Duration" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-gray-700 font-medium px-3 py-2 bg-gray-100 rounded-md text-center", children: [
+          breakItem.duration,
+          " minutes"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs font-medium text-gray-600 mb-1", children: "Remarks (Optional)" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            value: breakItem.remarks || "",
+            onChange: (e) => onUpdate(index, "remarks", e.target.value),
+            placeholder: "Add optional remarks...",
+            className: "w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          }
+        )
+      ] })
+    ] })
   ] });
 });
 BreakRow.displayName = "BreakRow";
@@ -34975,35 +35570,35 @@ var ShiftPanel = React19.memo(({
       console.error("Error saving panel state to localStorage:", error);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-lg shadow-sm mb-6 transition-all duration-300 w-full border border-gray-200", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-lg shadow-sm mb-4 sm:mb-6 transition-all duration-300 w-full border border-gray-200", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: "p-4 w-full cursor-pointer hover:bg-gray-50/50 transition-all duration-200",
+        className: "p-3 sm:p-4 w-full cursor-pointer hover:bg-gray-50/50 transition-all duration-200",
         onClick: toggleMinimize,
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full", children: [
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between w-full gap-2 sm:gap-0", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
             "button",
             {
               onClick: toggleMinimize,
-              className: "flex items-center gap-3 text-lg font-medium transition-colors duration-200 \n              focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 rounded-lg \n              hover:bg-blue-50 px-3 py-2 group",
+              className: "flex items-center gap-2 sm:gap-3 text-base sm:text-lg font-medium transition-colors duration-200 \n              focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 rounded-lg \n              hover:bg-blue-50 px-2 sm:px-3 py-1.5 sm:py-2 group w-full sm:w-auto justify-start",
               "aria-expanded": !isMinimized,
               "aria-controls": panelId,
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   lucideReact.ChevronDown,
                   {
-                    className: `w-5 h-5 text-blue-500 transform transition-transform duration-200 ${isMinimized ? "" : "rotate-180"}`
+                    className: `w-4 h-4 sm:w-5 sm:h-5 text-blue-500 transform transition-transform duration-200 ${isMinimized ? "" : "rotate-180"}`
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                  icon,
-                  /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-900 group-hover:text-blue-600", children: title })
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-4 h-4 sm:w-5 sm:h-5", children: icon }),
+                  /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base sm:text-lg font-semibold text-gray-900 group-hover:text-blue-600", children: title })
                 ] })
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium text-gray-600 mr-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-sm font-medium text-gray-600 text-center sm:text-right sm:mr-2", children: [
             "Total Shift Hours: ",
             shiftHours,
             " hours"
@@ -35011,10 +35606,10 @@ var ShiftPanel = React19.memo(({
         ] })
       }
     ),
-    !isMinimized && /* @__PURE__ */ jsxRuntime.jsxs("div", { id: panelId, className: "p-4 sm:p-6 border-t border-gray-200 w-full bg-white", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 mb-6 w-full", children: [
+    !isMinimized && /* @__PURE__ */ jsxRuntime.jsxs("div", { id: panelId, className: "p-3 sm:p-4 md:p-6 border-t border-gray-200 w-full bg-white", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 md:gap-6 mb-4 sm:mb-6 w-full", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: "Shift Start Time" }),
+          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs sm:text-sm font-medium text-gray-700 mb-1", children: "Shift Start Time" }),
           /* @__PURE__ */ jsxRuntime.jsx(
             TimePickerDropdown,
             {
@@ -35026,7 +35621,7 @@ var ShiftPanel = React19.memo(({
           )
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: "Shift End Time" }),
+          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs sm:text-sm font-medium text-gray-700 mb-1", children: "Shift End Time" }),
           /* @__PURE__ */ jsxRuntime.jsx(
             TimePickerDropdown,
             {
@@ -35039,12 +35634,12 @@ var ShiftPanel = React19.memo(({
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 w-full", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between mb-3 w-full", children: /* @__PURE__ */ jsxRuntime.jsxs("h4", { className: "text-md font-medium text-gray-700 flex items-center gap-2 mb-2 sm:mb-0", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Coffee, { className: "w-4 h-4" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between mb-3 w-full", children: /* @__PURE__ */ jsxRuntime.jsxs("h4", { className: "text-sm sm:text-base font-medium text-gray-700 flex items-center gap-1.5 sm:gap-2 mb-2 sm:mb-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Coffee, { className: "w-3.5 h-3.5 sm:w-4 sm:h-4" }),
           "Breaks"
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2 mb-4 w-full", children: breaks.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-12 gap-2 sm:gap-4 text-xs font-medium text-gray-500 mb-1 w-full px-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden sm:grid grid-cols-12 gap-2 md:gap-4 text-xs font-medium text-gray-500 mb-1 w-full px-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-3", children: "Break Start" }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-3", children: "Break End" }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: "Duration" }),
@@ -35061,7 +35656,7 @@ var ShiftPanel = React19.memo(({
             },
             index
           )) })
-        ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-500 py-3 text-center bg-gray-50 rounded-md", children: "No breaks added yet" }) }),
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs sm:text-sm text-gray-500 py-3 text-center bg-gray-50 rounded-md", children: "No breaks added yet" }) }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
@@ -35069,9 +35664,9 @@ var ShiftPanel = React19.memo(({
               e.stopPropagation();
               onBreakAdd();
             },
-            className: "inline-flex items-center gap-1 text-sm font-medium text-blue-600 hover:text-blue-800 px-3 py-1.5 bg-blue-50 hover:bg-blue-100 rounded-md transition-colors",
+            className: "w-full sm:w-auto inline-flex items-center justify-center gap-1 text-xs sm:text-sm font-medium text-blue-600 hover:text-blue-800 px-3 py-1.5 bg-blue-50 hover:bg-blue-100 rounded-md transition-colors",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "w-4 h-4" }),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "w-3.5 h-3.5 sm:w-4 sm:h-4" }),
               "Add Break"
             ]
           }
@@ -35439,8 +36034,8 @@ var ShiftsView = ({
     }
   }, [lineConfigs, supabase, showToast]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `min-h-screen bg-slate-50 ${className}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-10 bg-white border-b border-gray-200/80 shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 sm:px-8 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-10 bg-white border-b border-gray-200/80 shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 sm:px-4 md:px-6 lg:px-8 py-3 sm:py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
         BackButtonMinimal,
         {
           onClick: () => onBackClick ? onBackClick() : window.history.back(),
@@ -35449,14 +36044,14 @@ var ShiftsView = ({
           "aria-label": "Navigate back to previous page"
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col items-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Shift Management" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 mt-1", children: "Configure day and night shift timings and breaks for each production line" })
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col items-center mt-2 sm:mt-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900 text-center", children: "Shift Management" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs sm:text-sm text-gray-500 mt-0.5 sm:mt-1 text-center px-2 sm:px-0", children: "Configure day and night shift timings and breaks for each production line" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0 w-24" })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block absolute right-0 w-24" })
     ] }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 sm:p-6 md:p-8", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6 bg-gradient-to-r from-blue-50 to-blue-50/50 p-3 sm:p-4 rounded-xl border border-blue-100", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs sm:text-sm text-blue-700 font-medium", children: "Changes will affect production targets and output calculations." }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 sm:p-4 md:p-6 lg:p-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 sm:mb-6 bg-gradient-to-r from-blue-50 to-blue-50/50 p-3 sm:p-4 rounded-xl border border-blue-100", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs sm:text-sm text-blue-700 font-medium text-center sm:text-left", children: "Changes will affect production targets and output calculations." }) }),
       loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white rounded-xl p-8 shadow text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "animate-pulse flex flex-col items-center", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-8 rounded-full bg-blue-200 mb-4" }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-48 bg-gray-200 rounded mb-2" }),
@@ -35465,17 +36060,19 @@ var ShiftsView = ({
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-red-500 mb-2", children: "Error loading shift configurations" }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: error })
       ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4 sm:space-y-6", children: lineConfigs.map((config) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition-all duration-200 w-full", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-0", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "w-5 h-5 text-gray-600" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: "text-lg font-semibold text-gray-800", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 sm:px-5 md:px-6 py-3 sm:py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "w-4 h-4 sm:w-5 sm:h-5 text-gray-600" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: "text-base sm:text-lg font-semibold text-gray-800", children: [
               config.name,
               " Shifts"
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-4", children: [
-            config.isSaving && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-blue-600", children: "Saving..." }),
-            config.saveSuccess && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-green-600", children: "Saved!" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-4 w-full sm:w-auto", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              config.isSaving && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm font-medium text-blue-600", children: "Saving..." }),
+              config.saveSuccess && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm font-medium text-green-600", children: "Saved!" })
+            ] }),
             /* @__PURE__ */ jsxRuntime.jsxs(
               "button",
               {
@@ -35485,7 +36082,7 @@ var ShiftsView = ({
                   e.stopPropagation();
                   handleSaveShifts(config.id);
                 },
-                className: "inline-flex items-center gap-1 sm:gap-2 py-1.5 sm:py-2 px-3 sm:px-4 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors duration-200 text-xs sm:text-sm font-medium shadow-sm cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 z-10",
+                className: "w-full sm:w-auto inline-flex items-center justify-center gap-1 sm:gap-2 py-1.5 sm:py-2 px-3 sm:px-4 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors duration-200 text-xs sm:text-sm font-medium shadow-sm cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 z-10",
                 disabled: config.isSaving,
                 "aria-label": "Save shift configuration",
                 children: [
@@ -35496,7 +36093,7 @@ var ShiftsView = ({
             )
           ] })
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { id: `shift-panel-${config.id}`, className: "p-3 sm:p-6 border-t border-gray-200 w-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { id: `shift-panel-${config.id}`, className: "p-3 sm:p-4 md:p-6 border-t border-gray-200 w-full", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             ShiftPanel,
             {
@@ -36277,54 +36874,105 @@ var SKUList = ({
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Get started by creating a new SKU for production planning." })
     ] }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "min-w-full divide-y divide-gray-200", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-gray-50", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "SKU ID" }),
-      /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Production Target" }),
-      /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Attributes" }),
-      /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Status" }),
-      /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Created" }),
-      /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "relative px-6 py-3", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Actions" }) })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "bg-white divide-y divide-gray-200", children: skus.map((sku) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "hover:bg-gray-50 transition-colors duration-150", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-gray-900", children: sku.sku_id }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-medium text-gray-700", children: [
-        sku.production_target.toLocaleString(),
-        " units/day"
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden lg:block bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "min-w-full divide-y divide-gray-200", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-gray-50", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "SKU ID" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Production Target" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Attributes" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Status" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Created" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "relative px-6 py-3", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Actions" }) })
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-6 py-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-500", children: Object.keys(sku.attributes || {}).length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: "No attributes" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-xs truncate", children: Object.entries(sku.attributes).map(([key, value], index) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-        index > 0 && ", ",
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
-          key,
-          ":"
+      /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "bg-white divide-y divide-gray-200", children: skus.map((sku) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "hover:bg-gray-50 transition-colors duration-150", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-gray-900", children: sku.sku_id }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-medium text-gray-700", children: [
+          sku.production_target.toLocaleString(),
+          " units/day"
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-6 py-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-500", children: Object.keys(sku.attributes || {}).length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: "No attributes" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-xs truncate", children: Object.entries(sku.attributes).map(([key, value], index) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          index > 0 && ", ",
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
+            key,
+            ":"
+          ] }),
+          " ",
+          String(value)
+        ] }, key)) }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `inline-flex px-2 py-1 text-xs font-semibold rounded-full ${sku.is_active ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"}`, children: sku.is_active ? "Active" : "Inactive" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-500", children: new Date(sku.created_at).toLocaleDateString() }),
+        /* @__PURE__ */ jsxRuntime.jsxs("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm font-medium", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => onEdit(sku),
+              className: "text-blue-600 hover:text-blue-800 mr-3 transition-colors duration-150 p-1 hover:bg-blue-50 rounded",
+              title: "Edit SKU",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Edit2, { className: "w-4 h-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => onDelete(sku),
+              className: "text-red-600 hover:text-red-800 transition-colors duration-150 p-1 hover:bg-red-50 rounded",
+              title: "Delete SKU",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "w-4 h-4" })
+            }
+          )
+        ] })
+      ] }, sku.id)) })
+    ] }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:hidden space-y-3 sm:space-y-4", children: skus.map((sku) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-200 p-4 hover:shadow-md transition-all duration-200", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between mb-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base sm:text-lg font-semibold text-gray-900 truncate", children: sku.sku_id }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `inline-flex px-2 py-1 text-xs font-semibold rounded-full ${sku.is_active ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"}`, children: sku.is_active ? "Active" : "Inactive" }) })
         ] }),
-        " ",
-        String(value)
-      ] }, key)) }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `inline-flex px-2 py-1 text-xs font-semibold rounded-full ${sku.is_active ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"}`, children: sku.is_active ? "Active" : "Inactive" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-500", children: new Date(sku.created_at).toLocaleDateString() }),
-      /* @__PURE__ */ jsxRuntime.jsxs("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm font-medium", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: () => onEdit(sku),
-            className: "text-blue-600 hover:text-blue-800 mr-3 transition-colors duration-150 p-1 hover:bg-blue-50 rounded",
-            title: "Edit SKU",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Edit2, { className: "w-4 h-4" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: () => onDelete(sku),
-            className: "text-red-600 hover:text-red-800 transition-colors duration-150 p-1 hover:bg-red-50 rounded",
-            title: "Delete SKU",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "w-4 h-4" })
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 ml-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => onEdit(sku),
+              className: "text-blue-600 hover:text-blue-800 transition-colors duration-150 p-2 hover:bg-blue-50 rounded-lg",
+              title: "Edit SKU",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Edit2, { className: "w-4 h-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => onDelete(sku),
+              className: "text-red-600 hover:text-red-800 transition-colors duration-150 p-2 hover:bg-red-50 rounded-lg",
+              title: "Delete SKU",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "w-4 h-4" })
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-1", children: "Production Target" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm sm:text-base font-medium text-gray-700", children: [
+          sku.production_target.toLocaleString(),
+          " units/day"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-1", children: "Attributes" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-500", children: Object.keys(sku.attributes || {}).length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400 italic", children: "No attributes" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: Object.entries(sku.attributes).map(([key, value]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium text-gray-600", children: [
+            key,
+            ":"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-900", children: String(value) })
+        ] }, key)) }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-gray-500", children: [
+        "Created: ",
+        new Date(sku.created_at).toLocaleDateString()
       ] })
     ] }, sku.id)) })
-  ] }) }) });
+  ] });
 };
 var TargetsViewUI = ({
   isLoading,
@@ -36357,8 +37005,8 @@ var TargetsViewUI = ({
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-screen bg-gray-50", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "lg", message: "Loading targets..." }) }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("main", { className: "min-h-screen flex-1 bg-gray-50", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white px-8 py-6 shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white px-4 sm:px-6 md:px-8 py-4 sm:py-5 md:py-6 shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-4 relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
         BackButtonMinimal,
         {
           onClick: onBack,
@@ -36367,30 +37015,30 @@ var TargetsViewUI = ({
           "aria-label": "Navigate back to previous page"
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:absolute sm:right-0 w-full sm:w-auto", children: /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
-          className: "px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200",
+          className: "w-full sm:w-auto px-3 sm:px-4 py-1.5 sm:py-2 text-xs sm:text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200",
           onClick: onToggleBulkConfigure,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, { className: "w-4 h-4 mr-2 inline-block" }),
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, { className: "w-3 h-3 sm:w-4 sm:h-4 mr-1.5 sm:mr-2 inline-block" }),
             "Bulk Configure"
           ]
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 text-center mx-auto", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Production Targets" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Configure production targets and metrics for each line and workspace" })
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 text-center mx-auto mt-2 sm:mt-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900", children: "Production Targets" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 sm:mt-1 text-xs sm:text-sm text-gray-500", children: "Configure production targets and metrics for each line and workspace" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-8 py-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6 bg-gradient-to-r from-blue-50 to-blue-50/50 p-4 rounded-xl border border-blue-100", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-blue-700 font-medium", children: "Click on a line to expand and configure individual workspace targets." }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6 flex justify-center relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex bg-gray-100 p-1 rounded-lg", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 sm:px-6 md:px-8 py-4 sm:py-5 md:py-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 sm:mb-6 bg-gradient-to-r from-blue-50 to-blue-50/50 p-3 sm:p-4 rounded-xl border border-blue-100", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs sm:text-sm text-blue-700 font-medium text-center sm:text-left", children: "Click on a line to expand and configure individual workspace targets." }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 sm:mb-6 flex justify-center relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex bg-gray-100 p-1 rounded-lg w-full max-w-xs sm:w-auto", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             onClick: () => onShiftChange(0),
-            className: `px-4 py-2 text-sm font-medium rounded-md transition-all ${selectedShift === 0 ? "bg-white text-blue-600 shadow-sm" : "text-gray-600 hover:text-gray-900"}`,
+            className: `flex-1 sm:flex-none px-3 sm:px-4 py-2 text-xs sm:text-sm font-medium rounded-md transition-all ${selectedShift === 0 ? "bg-white text-blue-600 shadow-sm" : "text-gray-600 hover:text-gray-900"}`,
             children: "Day Shift"
           }
         ),
@@ -36398,7 +37046,7 @@ var TargetsViewUI = ({
           "button",
           {
             onClick: () => onShiftChange(1),
-            className: `px-4 py-2 text-sm font-medium rounded-md transition-all ${selectedShift === 1 ? "bg-white text-blue-600 shadow-sm" : "text-gray-600 hover:text-gray-900"}`,
+            className: `flex-1 sm:flex-none px-3 sm:px-4 py-2 text-xs sm:text-sm font-medium rounded-md transition-all ${selectedShift === 1 ? "bg-white text-blue-600 shadow-sm" : "text-gray-600 hover:text-gray-900"}`,
             children: "Night Shift"
           }
         )
@@ -36408,35 +37056,37 @@ var TargetsViewUI = ({
         {
           className: "bg-white rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition-all duration-200",
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-6", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 sm:px-4 md:px-6 py-3 sm:py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col lg:flex-row lg:items-center justify-between gap-3 lg:gap-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4 lg:gap-6", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(
                   "button",
                   {
                     onClick: () => onToggleLineDropdown(lineId),
-                    className: "flex items-center gap-3 text-lg font-medium transition-colors duration-200 \n                          focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 rounded-lg \n                          hover:bg-blue-50 px-3 py-2 group",
+                    className: "flex items-center gap-2 sm:gap-3 text-base sm:text-lg font-medium transition-colors duration-200 \n                          focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 rounded-lg \n                          hover:bg-blue-50 px-2 sm:px-3 py-2 group self-start",
                     "aria-expanded": dropdownStates[lineId],
                     "aria-controls": `line-${lineId}-content`,
                     children: [
                       /* @__PURE__ */ jsxRuntime.jsx(
                         lucideReact.ChevronDown,
                         {
-                          className: `w-5 h-5 text-blue-500 transform transition-transform duration-200 ${dropdownStates[lineId] ? "rotate-180" : ""}`
+                          className: `w-4 h-4 sm:w-5 sm:h-5 text-blue-500 transform transition-transform duration-200 ${dropdownStates[lineId] ? "rotate-180" : ""}`
                         }
                       ),
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg text-gray-900 group-hover:text-blue-600", children: lineNames[lineId] || lineId }),
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-normal text-gray-400", children: "\u2022" }),
-                        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium text-gray-500", children: [
-                          line.workspaces.length,
-                          " workspaces"
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2.5", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base sm:text-lg text-gray-900 group-hover:text-blue-600", children: lineNames[lineId] || lineId }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline text-sm font-normal text-gray-400", children: "\u2022" }),
+                          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-sm font-medium text-gray-500", children: [
+                            line.workspaces.length,
+                            " workspaces"
+                          ] })
                         ] })
                       ] })
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-px bg-gray-200/80" }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-4 text-sm font-medium text-gray-600", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden lg:block h-8 w-px bg-gray-200/80" }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3 ml-0 sm:ml-2 lg:ml-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs sm:text-sm font-medium text-gray-600", children: [
                   line.shiftStartTime,
                   " \u2013 ",
                   line.shiftEndTime,
@@ -36445,9 +37095,9 @@ var TargetsViewUI = ({
                   " hours"
                 ] }) })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
-                saveSuccess[lineId] && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-green-600 font-medium flex items-center gap-1.5", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "w-4 h-4" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-4", children: [
+                saveSuccess[lineId] && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-sm text-green-600 font-medium flex items-center gap-1.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "w-3 h-3 sm:w-4 sm:h-4" }),
                   "Saved successfully"
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -36455,13 +37105,13 @@ var TargetsViewUI = ({
                   {
                     onClick: () => onSaveLine(lineId),
                     disabled: savingLines[lineId],
-                    className: `ml-6 inline-flex items-center px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200 
+                    className: `inline-flex items-center px-3 sm:px-4 py-1.5 sm:py-2 text-xs sm:text-sm font-medium rounded-lg transition-all duration-200 
                           ${savingLines[lineId] ? "bg-gray-100 text-gray-400 cursor-not-allowed" : "bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"}`,
                     children: savingLines[lineId] ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "sm", className: "mr-2" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "sm", className: "mr-1.5 sm:mr-2" }),
                       "Saving..."
                     ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { className: "w-4 h-4 mr-2" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { className: "w-3 h-3 sm:w-4 sm:h-4 mr-1.5 sm:mr-2" }),
                       "Save Changes"
                     ] })
                   }
@@ -36469,9 +37119,9 @@ var TargetsViewUI = ({
               ] })
             ] }) }),
             dropdownStates[lineId] && /* @__PURE__ */ jsxRuntime.jsxs("div", { id: `line-${lineId}-content`, className: "border-t border-gray-200", children: [
-              skuEnabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-4 border-b border-gray-200 bg-gray-50/50", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: `sku-${lineId}`, className: "text-sm font-medium text-gray-700", children: "Select SKU:" }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 max-w-md", children: /* @__PURE__ */ jsxRuntime.jsx(
+              skuEnabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 sm:px-4 lg:px-6 py-3 sm:py-4 border-b border-gray-200 bg-gray-50/50", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: `sku-${lineId}`, className: "text-sm font-medium text-gray-700 flex-shrink-0", children: "Select SKU:" }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 max-w-full sm:max-w-md", children: /* @__PURE__ */ jsxRuntime.jsx(
                   SKUSelector,
                   {
                     onSelect: (sku) => onUpdateSelectedSKU?.(lineId, sku),
@@ -36482,14 +37132,14 @@ var TargetsViewUI = ({
                     className: "w-full"
                   }
                 ) }),
-                line.selectedSKU && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-gray-600", children: [
+                line.selectedSKU && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs sm:text-sm text-gray-600 mt-2 sm:mt-0", children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Production Target:" }),
                   " ",
                   line.selectedSKU.production_target.toLocaleString(),
                   " units/day"
                 ] })
               ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-3 bg-gray-50 border-b border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-12 gap-6 text-sm font-medium text-gray-600", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden lg:block px-6 py-3 bg-gray-50 border-b border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-12 gap-6 text-sm font-medium text-gray-600", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: "Workspace" }),
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: "Action Type" }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-3", children: [
@@ -36507,76 +37157,170 @@ var TargetsViewUI = ({
               ] }) }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-gray-100", children: line.workspaces.map((workspace) => {
                 const formattedName = formatWorkspaceName(workspace.name, lineId);
-                return /* @__PURE__ */ jsxRuntime.jsx(
+                return /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
-                    className: "px-6 py-4 hover:bg-gray-50 transition-all duration-200",
-                    children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-12 gap-6 items-center", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: onUpdateWorkspaceDisplayName ? /* @__PURE__ */ jsxRuntime.jsx(
-                        InlineEditableText,
-                        {
-                          value: formattedName,
-                          onSave: async (newName) => {
-                            await onUpdateWorkspaceDisplayName(workspace.id, newName);
-                          },
-                          placeholder: "Workspace name",
-                          className: "font-medium text-gray-900",
-                          inputClassName: "min-w-[120px]"
-                        }
-                      ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-900", children: formattedName }) }),
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsxRuntime.jsxs(
-                        "select",
-                        {
-                          value: workspace.actionType,
-                          onChange: (e) => {
-                            const newActionType = e.target.value;
-                            onActionTypeChange(lineId, workspace.id, newActionType);
-                          },
-                          className: "w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm",
-                          "aria-label": `Action type for ${formattedName}`,
-                          children: [
-                            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "assembly", className: "py-2", children: "Assembly" }),
-                            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "packaging", className: "py-2", children: "Packaging" })
-                          ]
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsxRuntime.jsx(
-                        "input",
-                        {
-                          type: "number",
-                          value: workspace.targetCycleTime === 0 ? "" : workspace.targetCycleTime,
-                          onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetCycleTime", Number(e.target.value) || ""),
-                          className: "block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm\n                                  shadow-sm focus:border-blue-500 focus:ring-blue-500 \n                                  transition-all duration-200 hover:border-gray-400",
-                          min: "0",
-                          step: "0.01",
-                          placeholder: "Enter cycle time"
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsxRuntime.jsx(
-                        "input",
-                        {
-                          type: "number",
-                          value: workspace.targetPPH === 0 ? "" : workspace.targetPPH,
-                          onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetPPH", Number(e.target.value) || ""),
-                          className: "block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm\n                                  shadow-sm focus:border-blue-500 focus:ring-blue-500 \n                                  transition-all duration-200 hover:border-gray-400 \n                                  placeholder:text-gray-400",
-                          min: "0",
-                          step: "0.1",
-                          placeholder: "Enter PPH"
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsxRuntime.jsx(
-                        "input",
-                        {
-                          type: "number",
-                          value: workspace.targetDayOutput === 0 ? "" : workspace.targetDayOutput,
-                          onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetDayOutput", Number(e.target.value) || ""),
-                          className: "block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm\n                                  shadow-sm focus:border-blue-500 focus:ring-blue-500 \n                                  transition-all duration-200 hover:border-gray-400 \n                                  placeholder:text-gray-400",
-                          min: "0",
-                          step: "1",
-                          placeholder: "Enter day output"
-                        }
-                      ) })
-                    ] })
+                    className: "px-3 sm:px-4 lg:px-6 py-3 sm:py-4 hover:bg-gray-50 transition-all duration-200",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden lg:grid lg:grid-cols-12 lg:gap-6 lg:items-center", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: onUpdateWorkspaceDisplayName ? /* @__PURE__ */ jsxRuntime.jsx(
+                          InlineEditableText,
+                          {
+                            value: formattedName,
+                            onSave: async (newName) => {
+                              await onUpdateWorkspaceDisplayName(workspace.id, newName);
+                            },
+                            placeholder: "Workspace name",
+                            className: "font-medium text-gray-900",
+                            inputClassName: "min-w-[120px]"
+                          }
+                        ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-900", children: formattedName }) }),
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                          "select",
+                          {
+                            value: workspace.actionType,
+                            onChange: (e) => {
+                              const newActionType = e.target.value;
+                              onActionTypeChange(lineId, workspace.id, newActionType);
+                            },
+                            className: "w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm",
+                            "aria-label": `Action type for ${formattedName}`,
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "assembly", className: "py-2", children: "Assembly" }),
+                              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "packaging", className: "py-2", children: "Packaging" })
+                            ]
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsxRuntime.jsx(
+                          "input",
+                          {
+                            type: "number",
+                            value: workspace.targetCycleTime === 0 ? "" : workspace.targetCycleTime,
+                            onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetCycleTime", Number(e.target.value) || ""),
+                            className: "block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm\n                                  shadow-sm focus:border-blue-500 focus:ring-blue-500 \n                                  transition-all duration-200 hover:border-gray-400",
+                            min: "0",
+                            step: "0.01",
+                            placeholder: "Enter cycle time"
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsxRuntime.jsx(
+                          "input",
+                          {
+                            type: "number",
+                            value: workspace.targetPPH === 0 ? "" : workspace.targetPPH,
+                            onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetPPH", Number(e.target.value) || ""),
+                            className: "block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm\n                                  shadow-sm focus:border-blue-500 focus:ring-blue-500 \n                                  transition-all duration-200 hover:border-gray-400 \n                                  placeholder:text-gray-400",
+                            min: "0",
+                            step: "0.1",
+                            placeholder: "Enter PPH"
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+                          "input",
+                          {
+                            type: "number",
+                            value: workspace.targetDayOutput === 0 ? "" : workspace.targetDayOutput,
+                            onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetDayOutput", Number(e.target.value) || ""),
+                            className: "block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm\n                                  shadow-sm focus:border-blue-500 focus:ring-blue-500 \n                                  transition-all duration-200 hover:border-gray-400 \n                                  placeholder:text-gray-400",
+                            min: "0",
+                            step: "1",
+                            placeholder: "Enter day output"
+                          }
+                        ) })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:hidden space-y-4", children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium text-gray-700", children: "Workspace" }),
+                          onUpdateWorkspaceDisplayName ? /* @__PURE__ */ jsxRuntime.jsx(
+                            InlineEditableText,
+                            {
+                              value: formattedName,
+                              onSave: async (newName) => {
+                                await onUpdateWorkspaceDisplayName(workspace.id, newName);
+                              },
+                              placeholder: "Workspace name",
+                              className: "font-medium text-gray-900 text-base",
+                              inputClassName: "min-w-full"
+                            }
+                          ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-900 text-base", children: formattedName })
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium text-gray-700", children: "Action Type" }),
+                          /* @__PURE__ */ jsxRuntime.jsxs(
+                            "select",
+                            {
+                              value: workspace.actionType,
+                              onChange: (e) => {
+                                const newActionType = e.target.value;
+                                onActionTypeChange(lineId, workspace.id, newActionType);
+                              },
+                              className: "w-full p-3 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 text-sm",
+                              "aria-label": `Action type for ${formattedName}`,
+                              children: [
+                                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "assembly", children: "Assembly" }),
+                                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "packaging", children: "Packaging" })
+                              ]
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+                            /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "text-sm font-medium text-gray-700", children: [
+                              "Target Cycle Time",
+                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-xs text-gray-400", children: "seconds per piece" })
+                            ] }),
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              "input",
+                              {
+                                type: "number",
+                                value: workspace.targetCycleTime === 0 ? "" : workspace.targetCycleTime,
+                                onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetCycleTime", Number(e.target.value) || ""),
+                                className: "block w-full rounded-lg border border-gray-300 bg-white px-3 py-3 text-sm\n                                  shadow-sm focus:border-blue-500 focus:ring-blue-500 \n                                  transition-all duration-200 hover:border-gray-400",
+                                min: "0",
+                                step: "0.01",
+                                placeholder: "Enter cycle time"
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+                            /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "text-sm font-medium text-gray-700", children: [
+                              "Target PPH",
+                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-xs text-gray-400", children: "pieces per hour" })
+                            ] }),
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              "input",
+                              {
+                                type: "number",
+                                value: workspace.targetPPH === 0 ? "" : workspace.targetPPH,
+                                onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetPPH", Number(e.target.value) || ""),
+                                className: "block w-full rounded-lg border border-gray-300 bg-white px-3 py-3 text-sm\n                                  shadow-sm focus:border-blue-500 focus:ring-blue-500 \n                                  transition-all duration-200 hover:border-gray-400 \n                                  placeholder:text-gray-400",
+                                min: "0",
+                                step: "0.1",
+                                placeholder: "Enter PPH"
+                              }
+                            )
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "text-sm font-medium text-gray-700", children: [
+                            "Total Day Output",
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-xs text-gray-400", children: "pieces per day" })
+                          ] }),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "input",
+                            {
+                              type: "number",
+                              value: workspace.targetDayOutput === 0 ? "" : workspace.targetDayOutput,
+                              onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetDayOutput", Number(e.target.value) || ""),
+                              className: "block w-full rounded-lg border border-gray-300 bg-white px-3 py-3 text-sm\n                                shadow-sm focus:border-blue-500 focus:ring-blue-500 \n                                transition-all duration-200 hover:border-gray-400 \n                                placeholder:text-gray-400",
+                              min: "0",
+                              step: "1",
+                              placeholder: "Enter day output"
+                            }
+                          )
+                        ] })
+                      ] })
+                    ]
                   },
                   workspace.id
                 );
@@ -37682,9 +38426,9 @@ var WorkspaceDetailView = ({
         animate: { opacity: 1 },
         transition: { duration: 0.3 },
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen w-full flex flex-col bg-slate-50", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("header", { className: "sticky top-0 z-10 px-2 sm:px-2.5 lg:px-3 py-1.5 sm:py-2 lg:py-3 flex flex-col shadow-sm bg-white", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 animate-pulse", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-20 bg-gray-200 rounded" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2 animate-pulse", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 w-40 bg-gray-200 rounded" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("header", { className: "sticky top-0 z-10 px-3 sm:px-4 md:px-5 lg:px-6 py-2 sm:py-2.5 lg:py-3 flex flex-col shadow-sm bg-white", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 animate-pulse", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 sm:h-7 md:h-8 w-16 sm:w-20 bg-gray-200 rounded" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2 animate-pulse max-w-[calc(100%-160px)] sm:max-w-[calc(100%-200px)]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-5 sm:h-6 md:h-7 w-28 sm:w-36 md:w-40 bg-gray-200 rounded" }) }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-8" })
           ] }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 p-4 sm:p-6 lg:p-8", children: [
@@ -37745,7 +38489,7 @@ var WorkspaceDetailView = ({
       animate: { opacity: 1 },
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen w-full flex flex-col bg-slate-50", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "sticky top-0 z-10 px-2 sm:px-2.5 lg:px-3 py-1.5 sm:py-2 lg:py-3 flex flex-col shadow-sm bg-white", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "sticky top-0 z-10 px-3 sm:px-4 md:px-5 lg:px-6 py-2 sm:py-2.5 lg:py-3 flex flex-col shadow-sm bg-white", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
                 BackButtonMinimal,
@@ -37756,8 +38500,8 @@ var WorkspaceDetailView = ({
                   "aria-label": "Navigate back to previous page"
                 }
               ) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: formattedWorkspaceName }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2 max-w-[calc(100%-160px)] sm:max-w-[calc(100%-200px)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl font-semibold text-gray-900 truncate", children: formattedWorkspaceName }),
                 workspaceHealth && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-2.5 w-2.5", children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx(
                     "animate-ping absolute inline-flex h-full w-full rounded-full opacity-75",
@@ -37769,18 +38513,18 @@ var WorkspaceDetailView = ({
                   ) })
                 ] })
               ] }) }),
-              workspaceHealth && activeTab !== "monthly_history" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0 top-0 flex items-center h-8", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-gray-500", children: [
+              workspaceHealth && activeTab !== "monthly_history" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0 top-0 flex items-center h-8", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] sm:text-xs text-gray-500 hidden sm:block", children: [
                 "Last update: ",
                 workspaceHealth.timeSinceLastUpdate
               ] }) }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-8" })
             ] }),
-            activeTab !== "monthly_history" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 bg-blue-50 px-3 py-2 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-4", children: [
+            activeTab !== "monthly_history" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 sm:mt-3 bg-blue-50 px-2 sm:px-3 py-1.5 sm:py-2 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2 sm:gap-3 md:gap-4", children: [
               !date && !shift && !usingFallbackData && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsxRuntime.jsx(LiveTimer, {}) }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm sm:text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsxRuntime.jsx(LiveTimer, {}) }),
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium text-blue-600", children: formatISTDate2(new Date(workspace.date)) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: formatISTDate2(new Date(workspace.date)) }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" }),
               date && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-2 py-1 text-xs font-medium bg-blue-200 text-blue-800 rounded-md", children: getDaysDifference(workspace.date) }),
@@ -38275,8 +39019,8 @@ var SKUManagementView = () => {
     ] }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen bg-slate-50", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-10 bg-white border-b border-gray-200/80 shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 sm:px-8 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-10 bg-white border-b border-gray-200/80 shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 sm:px-4 md:px-6 lg:px-8 py-3 sm:py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-4 relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
         BackButtonMinimal,
         {
           onClick: handleBack,
@@ -38285,24 +39029,24 @@ var SKUManagementView = () => {
           "aria-label": "Navigate back to previous page"
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 text-center mx-auto", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "SKU Management" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Manage Stock Keeping Units (SKUs) for production planning" })
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 text-center mx-auto mt-2 sm:mt-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900", children: "SKU Management" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 sm:mt-1 text-xs sm:text-sm text-gray-500 px-2 sm:px-0", children: "Manage Stock Keeping Units (SKUs) for production planning" })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
           onClick: handleAddNew,
-          className: "absolute right-0 inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 shadow-sm",
+          className: "sm:absolute sm:right-0 w-full sm:w-auto inline-flex items-center justify-center px-3 sm:px-4 py-2 bg-blue-600 text-white text-xs sm:text-sm font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 shadow-sm",
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "w-4 h-4 mr-2" }),
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "w-3 h-3 sm:w-4 sm:h-4 mr-1.5 sm:mr-2" }),
             "Add SKU"
           ]
         }
       )
     ] }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 sm:px-8 py-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6 bg-gradient-to-r from-blue-50 to-blue-50/50 p-4 rounded-xl border border-blue-100", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-blue-700 font-medium", children: "Create and manage SKUs with production targets. These will be available for selection in the production targets page." }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 sm:px-4 md:px-6 lg:px-8 py-4 sm:py-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 sm:mb-6 bg-gradient-to-r from-blue-50 to-blue-50/50 p-3 sm:p-4 rounded-xl border border-blue-100", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs sm:text-sm text-blue-700 font-medium text-center sm:text-left", children: "Create and manage SKUs with production targets. These will be available for selection in the production targets page." }) }),
       error ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-red-50 border border-red-200 text-red-700 p-4 rounded-lg", children: [
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: "Error loading SKUs" }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mt-1", children: error.message })
@@ -38419,8 +39163,8 @@ var WorkspaceHealthView = ({
     }
   };
   const getUptimeColor = (percentage) => {
-    if (percentage >= 99) return "text-green-600 dark:text-green-400";
-    if (percentage >= 95) return "text-yellow-600 dark:text-yellow-400";
+    if (percentage >= 97) return "text-green-600 dark:text-green-400";
+    if (percentage >= 90) return "text-yellow-600 dark:text-yellow-400";
     return "text-red-600 dark:text-red-400";
   };
   if (loading && !summary) {
@@ -38442,8 +39186,50 @@ var WorkspaceHealthView = ({
     ] }) }) }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx("min-h-screen bg-slate-50", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "sticky top-0 z-10 px-2 sm:px-2.5 lg:px-3 py-1.5 sm:py-2 lg:py-3 flex flex-col shadow-sm bg-white", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "sticky top-0 z-10 px-3 sm:px-4 md:px-5 lg:px-6 py-2 sm:py-2.5 lg:py-3 flex flex-col shadow-sm bg-white", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm:hidden", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            BackButtonMinimal,
+            {
+              onClick: () => router$1.push("/"),
+              text: "Back",
+              size: "sm",
+              "aria-label": "Navigate back to dashboard"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => {
+                  refetch();
+                },
+                className: "p-1.5 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
+                "aria-label": "Refresh",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: handleExport,
+                className: "p-1.5 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
+                "aria-label": "Export CSV",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-4 w-4" })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-base font-semibold text-gray-900", children: "System Health" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-2 w-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-emerald-500" })
+          ] })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
           BackButtonMinimal,
           {
@@ -38453,8 +39239,8 @@ var WorkspaceHealthView = ({
             "aria-label": "Navigate back to dashboard"
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "System Health" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2 max-w-[calc(100%-200px)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg md:text-xl lg:text-2xl xl:text-3xl font-semibold text-gray-900 truncate", children: "System Health" }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-2.5 w-2.5", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500" })
@@ -38483,15 +39269,15 @@ var WorkspaceHealthView = ({
           )
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-8" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 bg-blue-50 px-3 py-2 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsxRuntime.jsx(LiveTimer, {}) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium text-blue-600", children: formatDate(operationalDate) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 sm:mt-3 bg-blue-50 px-2 sm:px-3 py-1.5 sm:py-2 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2 sm:gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm sm:text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsxRuntime.jsx(LiveTimer, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: formatDate(operationalDate) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-blue-600", children: getShiftIcon(shiftType) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-base font-medium text-blue-600", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: [
             shiftType,
             " Shift"
           ] })
@@ -38508,20 +39294,21 @@ var WorkspaceHealthView = ({
           className: "grid grid-cols-2 sm:grid-cols-2 md:grid-cols-5 gap-2 sm:gap-3 lg:gap-4",
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs(Card2, { className: "col-span-2 sm:col-span-2 md:col-span-2 bg-white", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-3", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: "text-sm font-medium text-gray-500 dark:text-gray-400", children: "Overall System Status" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-3", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: "text-sm font-medium text-gray-500 dark:text-gray-400", children: "Overall System Uptime Today" }) }),
               /* @__PURE__ */ jsxRuntime.jsxs(CardContent2, { children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2", children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("span", { className: clsx("text-3xl font-bold", getUptimeColor(summary.uptimePercentage)), children: [
                     summary.uptimePercentage.toFixed(1),
                     "%"
                   ] }),
-                  summary.uptimePercentage >= 99 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUp, { className: "h-5 w-5 text-green-500" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingDown, { className: "h-5 w-5 text-red-500" })
+                  summary.uptimePercentage >= 97 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUp, { className: "h-5 w-5 text-green-500" }) : summary.uptimePercentage >= 90 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Activity, { className: "h-5 w-5 text-yellow-500" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingDown, { className: "h-5 w-5 text-red-500" })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: "Average uptime across all workspaces" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
                   summary.healthyWorkspaces,
                   " of ",
                   summary.totalWorkspaces,
-                  " workspaces healthy"
+                  " workspaces online"
                 ] })
               ] })
             ] }),