From 9686f37fbd3c7c71e8419e794b251336f935a868 Mon Sep 17 00:00:00 2001
From: sky121113 <sky121113@gmail.com>
Date: Tue, 28 Apr 2026 09:44:01 +0800
Subject: [PATCH] =?UTF-8?q?[STYLE]=20=E5=84=AA=E5=8C=96=E5=95=86=E5=93=81?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E8=88=87=E5=AE=A2=E6=88=B6=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E9=A0=81=E9=9D=A2=E4=B9=8B=E9=96=93=E8=B7=9D=E8=88=87=E6=8C=89?=
 =?UTF-8?q?=E9=88=95=E6=A8=A3=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 調整商品管理與客戶管理主容器間距為 space-y-2，縮小標題與頁籤之空隙。
2. 統一頁籤 (Tabs) 與內容區域之頂部間距為 mt-6，標準化視覺節奏。
3. 修正商品與分類管理頁面之「新增」按鈕顏色不一致問題，統一使用奢華藍漸層。
4. 在各管理頁面主要按鈕加入 whitespace-nowrap，確保文字在窄屏下不換行。
5. 優化商品管理 RWD 佈局，使手機與平板裝置下之篩選列與標題區域對齊基準模組。
---
 .agents/skills/ui-minimal-luxury/SKILL.md     | 266 ++++++++++--
 .../views/admin/companies/index.blade.php     | 222 +++++++---
 .../views/admin/products/index.blade.php      |  22 +-
 .../partials/tab-categories.blade.php         | 164 +++++---
 .../products/partials/tab-products.blade.php  | 392 +++++++++++++-----
 resources/views/layouts/admin.blade.php       | 240 ++++++-----
 6 files changed, 959 insertions(+), 347 deletions(-)

diff --git a/.agents/skills/ui-minimal-luxury/SKILL.md b/.agents/skills/ui-minimal-luxury/SKILL.md
index bab696e..03875ab 100644
--- a/.agents/skills/ui-minimal-luxury/SKILL.md
+++ b/.agents/skills/ui-minimal-luxury/SKILL.md
@@ -106,11 +106,19 @@ description: 定義 Star Cloud 管理後台的「極簡奢華風」設計規範
 
 ```html
 @section('content')
-<div class="space-y-6">
-    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
+<div class="space-y-4 pb-20">
+    <!-- Breadcrumbs -->
+    <x-breadcrumbs class="mb-4 hidden lg:flex" />
+
+    <!-- Top Header -->
+    <div class="flex items-center justify-between gap-4">
         <div>
-            <h1 class="text-3xl font-black text-slate-800 dark:text-white tracking-tight font-display">{{ __('Title') }}</h1>
-            <p class="text-sm font-bold text-slate-500 dark:text-slate-400 mt-1 uppercase tracking-widest">{{ __('Subtitle') }}</p>
+            <h1 class="text-2xl sm:text-3xl font-black text-slate-800 dark:text-white tracking-tight font-display transition-all duration-300">
+                {{ __('Title') }}
+            </h1>
+            <p class="text-sm font-bold text-slate-500 dark:text-slate-400 mt-1 uppercase tracking-widest">
+                {{ __('Subtitle') }}
+            </p>
         </div>
         <div class="flex items-center gap-3">
             <button class="btn-luxury-primary">
@@ -121,32 +129,7 @@ description: 定義 Star Cloud 管理後台的「極簡奢華風」設計規範
     </div>
 
     <div class="luxury-card rounded-3xl p-8 animate-luxury-in">
-        <div class="flex items-center justify-between mb-10">
-            <form class="relative group">
-                <input type="text" class="luxury-input pl-12 pr-6 w-64" placeholder="{{ __('Search...') }}">
-            </form>
-        </div>
-
-        <div class="overflow-x-auto">
-            <table class="w-full text-left border-separate border-spacing-y-0">
-                <thead>
-                    <tr class="bg-slate-50/50 dark:bg-slate-900/10">
-                        <th class="px-6 py-4 text-[11px] font-black text-slate-400 uppercase tracking-[0.2em] border-b border-slate-100 dark:border-slate-800">{{ __('Name') }}</th>
-                        <th class="px-6 py-4 text-[11px] font-black text-slate-400 uppercase tracking-[0.2em] border-b border-slate-100 dark:border-slate-800 text-right">{{ __('Action') }}</th>
-                    </tr>
-                </thead>
-                <tbody class="divide-y divide-slate-50 dark:divide-slate-800/80">
-                    <tr class="group hover:bg-slate-50/80 dark:hover:bg-slate-800/40 transition-all duration-300">
-                        <td class="px-6 py-6 font-extrabold text-slate-800 dark:text-slate-100">Example Name</td>
-                        <td class="px-6 py-6 text-right"> </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <div class="mt-8 border-t border-slate-100/50 dark:border-slate-800/50 pt-6">
-            {{ $items->links('vendor.pagination.luxury') }}
-        </div>
+        <!-- Content Container -->
     </div>
 </div>
 @endsection
@@ -156,7 +139,7 @@ description: 定義 Star Cloud 管理後台的「極簡奢華風」設計規範
 1. **移除重複內距**: 根容器 `div` 應**禁止**使用 `p-6` 或 `p-10`，因為佈局基底已提供基礎間距。
 2. **區塊間隙**: 建議使用 `space-y-6` 或 `space-y-8` 以獲得最佳空氣感。但在「高密度資料管理」或使用者有特殊緊湊需求的情境下，容許縮減至 **`space-y-2`**。
 3. **主容器樣式**: 強制對齊為 `luxury-card rounded-3xl p-8`。
-3. **標題排版**: 
+4. **標題排版**: 
    - 主標題需應用 `font-display` (Outfit)。
    - 描述文字需應用 `uppercase tracking-widest font-bold` 以呈現高級設計感。
 
@@ -172,13 +155,28 @@ description: 定義 Star Cloud 管理後台的「極簡奢華風」設計規範
   - 聚焦時帶有青色 (`Cyan`) 發光邊框。
 
 ```html
-<input type="text" class="luxury-input" placeholder="請輸入內容">
+<input type="text" class="luxury-input py-2.5 px-5 w-72" placeholder="請輸入內容">
 
-<select class="luxury-select">
+<select class="luxury-select py-2.5">
     <option value="1">啟用</option>
     <option value="0">禁用</option>
 </select>
 
+### 搜尋與重製按鈕組件 (Filter Actions)
+- **搜尋按鈕 (Search)**: `p-2.5 rounded-xl bg-cyan-500 text-white shadow-lg shadow-cyan-500/25 transition-all active:scale-95`
+- **重製按鈕 (Reset)**: `p-2.5 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 transition-all active:scale-95`
+
+```html
+<div class="flex items-center gap-2">
+    <button type="submit" class="p-2.5 rounded-xl bg-cyan-500 text-white shadow-lg shadow-cyan-500/25 active:scale-95">
+        <i class="lucide-search size-5"></i>
+    </button>
+    <button type="button" class="p-2.5 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 active:scale-95">
+        <i class="lucide-rotate-ccw size-5"></i>
+    </button>
+</div>
+```
+
 ### 搜尋式下拉選單 (Searchable Select) - 【進階推薦】
 - **組件**: `<x-searchable-select />`
 - **適用場景**: 選項大於 10 筆或具備層級關聯的篩選器（如：公司名稱、機台編號）。
@@ -197,7 +195,6 @@ description: 定義 Star Cloud 管理後台的「極簡奢華風」設計規範
     onchange="this.form.submit()" 
 />
 ```
-```
 
 ## 8. 編輯與詳情頁規範 (Detail & Edit Views)
 
@@ -220,16 +217,19 @@ description: 定義 Star Cloud 管理後台的「極簡奢華風」設計規範
 ### 文字大小與權重 (Typography Hierarchy)
 - **表頭 (Table Header)**: 
   - 類別: `text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em]`
-  - 作用: 提供清晰的欄位定義而不奪取資料視覺焦點。具備足夠對比度。
+  - 內距: `px-6 py-4`
 - **主標題 (Primary Item)**: 
-  - 類別: `text-base font-extrabold text-slate-800 dark:text-slate-100`
-  - 範例: 公司名稱、機體名稱。
+  - 類別: `text-base font-extrabold text-slate-800 dark:text-slate-100 tracking-tight`
+  - 範例: 機台名稱、產品標題。
 - **次要資訊 (Secondary Info)**: 
   - 類別: `text-xs font-bold text-slate-500 dark:text-slate-400 tracking-wide`
-  - 範例: 使用者帳號、備註、權限名稱。
+  - 範例: 帳號、技術描述。
+- **技術/序號資料 (Technical/Mono)**: 
+  - 類別: `font-mono text-xs font-black text-slate-400 dark:text-slate-500 tracking-widest`
+  - 範例: SN 碼、版本號、日期時間。
 - **狀態標籤 (Status Badge)**: 
-  - 範例: 啟用 (`emerald`)、禁用 (`rose`) / 角色名稱 (`sky`/`indigo`)。
-  - 特性: `px-2.5 py-1 rounded-lg text-xs font-bold border tracking-wider`
+  - 特性: `px-3 py-1.5 rounded-full text-xs font-black tracking-widest uppercase border`
+  - 範例: 在線 (`emerald`)、離線 (`slate`)、錯誤 (`rose`)。
 
 ### 空間與反應 (Spacing & Interaction)
 - **單元格內距**: 統一使用 `px-6 py-6`。
@@ -256,9 +256,9 @@ description: 定義 Star Cloud 管理後台的「極簡奢華風」設計規範
 
 為了確保在不同版本的開發環境中（如目前專案使用的 Tailwind CSS v3.1）UI 都能正確呈現，並維持全站操作感一致，必須遵守以下額外規範。
 
-### Tailwind CSS 版本兼容性 (v3.1)
-- **禁止使用 `size-` 屬性**: 舊版不支援 `size-4` 等語法，請一律分拆寫作 `w-4 h-4`。
-- **避免非標準間距**: 避免使用 `4.5` (`18px`) 等任意值，優先使用標準等級如 `4` (`16px`) 或 `5` (`20px`)。
+### Tailwind CSS 版本兼容性 (v3.4+)
+- **推薦使用 `size-` 屬性**: 支援 `size-4` (等同於 `w-4 h-4`) 等語法，推薦用於簡化圖示尺寸定義。
+- **標準間距**: 優先使用標準等級如 `4` (`16px`) 或 `5` (`20px`)，確保全站視覺節奏統一。
 
 ## 11. 字體與技術資訊規範 (Typography & Technical Data)
 
@@ -434,4 +434,182 @@ async fetchPage(url) {
 
 ### 14.4 統計卡片間距 (Stats Grid Spacing)
 - **網格間距**: 頂部統計卡片網格 (Grid) 建議使用 **`gap-4`** (16px)，避免使用過大的 `gap-6` 或 `gap-8` 導致版面鬆散。
-- **卡片內距**: 統計卡片內部統一使用 `p-6`。
\ No newline at end of file
+- **卡片內距**: 統計卡片內部統一使用 `p-6`。
+
+### 14.5 分頁與清單底部 (Pagination & Footer)
+- **佈局**: 清單底部應具備 `mt-8` 的間距，並配合 `border-t` 與 `pt-6` 進行視覺隔離。
+- **內容**: 需正確顯示「顯示總筆數」與「分頁導覽」。
+
+## 15. 響應式與 RWD 開發規範 (Responsive Guidelines)
+
+為了確保在行動裝置與平板上具備同樣奢華的操作體驗，必須遵守以下 RWD 準則。
+
+### 15.1 垂直空間優化 (Vertical Optimization)
+- **Sticky 區域**: 在手機版中，垂直空間極為珍貴。Sticky Header 應保持極簡，高度建議控制在 60px 以內。
+- **整合式 Header**: 禁止在手機版使用獨立的 Sidebar Toggle Bar，應將 Toggle 功能整合進頂部導航欄，以釋放至少 50px 的內容高度。
+
+### 15.2 表格與卡片轉換 (Table Cardification)
+- **橫向滾動**: 在 `xl` (1280px) 以下，表格應容器化並啟用 `overflow-x-auto`。
+- **卡片化切換**: 對於核心管理頁面（如機台列表），應實作手機版專用的 `luxury-card` 垂直佈局，並與桌面版 `table` 進行 `hidden / xl:block` 的切換。
+
+### 15.3 觸控目標與間距 (Touch & Spacing)
+- **觸控熱區**: 所有按鈕與連結的最小觸控目標應為 **44x44px**。
+- **間距縮減**: 桌面版的 `p-8` 在手機版應縮減為 `p-4` 或 `p-6`。根容器的 `space-y-4` 在 Sticky 區域可縮減為 `space-y-2`。
+
+### 15.4 滾動式分頁標籤 (Scrollable Tabs)
+- **結構**: `flex items-center gap-1 p-1.5 overflow-x-auto whitespace-nowrap custom-scrollbar`
+- **設計**: 在行動端必須移除 `w-fit` 或改為 `min-w-0 flex-1`，確保在手機螢幕寬度不足時標籤可以橫向捲動而不撐破版面。
+- **指示器**: 確保捲動區域不會被遮擋，標籤 `px-8` 寬度應適度縮減至 `px-4` 以增加密度。
+
+### 15.5 搜尋與操作按鈕綁定 (Search & Actions Binding)
+- **佈局**: `flex flex-wrap items-center gap-3 sm:gap-4`
+- **規則**: 
+  - 搜尋框與重製按鈕應被包裹在同一個 `flex` 容器中。
+  - 行動端搜尋框應設為 `flex-1`。
+  - 搜尋/重製按鈕應設為 `flex-none`，確保它們在同一行顯示，避免操作中斷。
+
+### 15.6 奢華表格凍結欄位 (Sticky Table Columns)
+- **場景**: 當資料欄位過多且需要橫向捲動時（如庫存總覽）。
+- **實作**:
+  - 關鍵資訊（商品名/SN）應使用 `sticky left-0 z-20` 並給予 `bg-white dark:bg-slate-900`。
+  - 當存在多個凍結欄位時（如總計欄位），需精確計算 `left-[Xpx]`。
+  - **視覺區隔**: 凍結欄位的右側應添加微弱陰影 `shadow-[1px_0_0_0_rgba(0,0,0,0.05)]` 或 `border-r`。
+
+### 15.7 卡片化折疊詳情 (Collapsible Card Detail)
+- **結構**: 在 `xl:hidden` 的卡片網格中，使用 Alpine.js 的 `x-collapse`。
+- **模式**: 
+  - **Header**: 顯示核心指標（名稱、總量、狀態）。
+  - **Content**: 折疊區域顯示次要資訊（各分店庫存、詳細日期、備註）。
+  - **互動**: 點擊卡片頂部或專屬箭頭切換展開狀態。
+
+---
+
+## 16. 整合式模組佈局標竿 (Integrated Module Layout Benchmark)
+
+針對具備「統計、分頁、清單」的複合式功能模組（如：客戶管理、機台總覽），必須嚴格遵守以下層級佈局。
+
+### 16.1 視覺層級與間距 (Visual Hierarchy & Spacing)
+
+1.  **頁面根容器 (Root)**: 使用 `space-y-2` 或 `space-y-4` (視內容密度)。
+2.  **第一層：頁面標頭 (Page Header)**
+    - **結構**: `flex flex-col md:flex-row md:items-center justify-between gap-4`
+    - **標題 (H1)**: `text-3xl font-black tracking-tight` (Outfit)。
+    - **副標題**: `text-sm font-bold text-slate-500 uppercase tracking-widest mt-1`。
+    - **全域動作**: 放在右側，使用 `.btn-luxury-primary`。
+3.  **第二層：膠囊式頁籤 (Module Tabs)**
+    - **結構**: `flex items-center gap-1 p-1.5 bg-slate-100 dark:bg-slate-900/50 rounded-2xl w-full sm:w-fit border border-slate-200/50 overflow-x-auto whitespace-nowrap`
+    - **按鈕**: `flex-1 sm:flex-none px-8 py-3 rounded-xl text-sm font-black uppercase tracking-widest`。
+4.  **第三層：AJAX 內容容器 (Content Area)**
+    - **容器內距**: 與頁籤之間保持自然間距（使用 `mt-6`）。
+    - **內部結構**: 使用 `luxury-card rounded-3xl p-6 sm:p-8` 作為主要數據承載容器。
+
+### 16.2 文字大小與排版細節 (Typography Nuances)
+
+為了在「極簡奢華風」中保持專業感與可讀性，必須遵循以下文字大小規範：
+
+1.  **表格標題 (Table Headers)**:
+    - 大小：`text-xs` (12px)
+    - 字重：`font-bold` 或 `font-black`
+    - 樣式：`uppercase` + `tracking-[0.15em]` (適度放寬字距)
+    - 顏色：`text-slate-500` 或 `text-slate-400` (深色模式)
+
+2.  **主體資料 (Primary Data)**:
+    - 大小：`text-base` (16px) 或 `text-sm` (14px)
+    - 字重：`font-extrabold` 或 `font-black`
+    - 顏色：`text-slate-800` 或 `text-white` (深色模式)
+    - 備註：主要名稱（如商品名、機台名）應使用 `text-base` 以突出重點。
+
+3.  **輔助資料 (Secondary/Metadata)**:
+    - 大小：`text-[10px]` 或 `text-xs`
+    - 字重：`font-black`
+    - 樣式：`uppercase` + `tracking-widest`
+    - 顏色：`text-slate-400` 或 `text-slate-500`
+    - 適用：日期、序號、公司名稱、分類標籤。
+
+4.  **數值資料 (Numerical Data)**:
+    - 價格：`text-emerald-500` + `font-black`
+    - 數量：`text-slate-700` + `font-black`
+    - 比例/百分比：`text-sm` + `font-black`
+
+5.  **日期顯示 (Date Display)**:
+    - 格式：`YYYY/MM/DD` 或 `YYYY-MM-DD HH:mm`
+    - 樣式：`font-mono` (等寬字體有利於對齊)
+    - 大小：`text-xs` 或 `text-[10px]`
+    - 顏色：`text-slate-400`
+
+### 16.3 RWD 觸控目標 (Touch Targets)
+
+行動版 (Cards) 的操作區應具備足夠的點擊空間：
+- **按鈕高度**: 至少 `py-3` 或 `h-11`。
+- **按鈕寬度**: 至少 `flex-1` (填滿一半寬度)。
+- **點擊間距**: 按鈕之間保持 `gap-3`。
+- **陰影反饋**: 點擊時應有 `active:scale-95` 的縮放效果。
+
+### 16.4 標竿佈局結構示例 (Benchmark Structure)
+
+```html
+<div class="space-y-4">
+    <!-- Header -->
+    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
+        <div>
+            <h1 class="text-3xl font-black text-slate-800 tracking-tight font-display">Module Name</h1>
+            <p class="text-sm font-bold text-slate-500 uppercase tracking-widest mt-1">Sub-headline</p>
+        </div>
+        <button class="btn-luxury-primary shrink-0">Action Button</button>
+    </div>
+
+    <!-- Tabs -->
+    <div class="flex items-center gap-1 p-1.5 bg-slate-100 rounded-2xl w-full sm:w-fit overflow-x-auto whitespace-nowrap">
+        <button class="px-8 py-3 rounded-xl text-sm font-black uppercase tracking-widest bg-white shadow-sm text-cyan-600">Tab A</button>
+        <button class="px-8 py-3 rounded-xl text-sm font-black uppercase tracking-widest text-slate-400">Tab B</button>
+    </div>
+
+    <!-- Content -->
+    <div class="luxury-card rounded-3xl p-6 sm:p-8 mt-6">
+        <!-- Filter Bar -->
+        <div class="flex flex-wrap items-center gap-4 mb-8">
+            <div class="flex items-center gap-2 flex-1 min-w-[300px]">
+                <div class="relative group flex-1">
+                    <span class="absolute inset-y-0 left-0 flex items-center pl-4 text-slate-400 group-focus-within:text-cyan-500"><i class="lucide-search size-4"></i></span>
+                    <input type="text" class="luxury-input pl-12 pr-6 w-full" placeholder="Search...">
+                </div>
+                <div class="flex items-center gap-2 flex-none">
+                    <button class="p-2.5 rounded-xl bg-cyan-500 text-white shadow-lg shadow-cyan-500/25">Search</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Table (Desktop) -->
+        <div class="hidden xl:block overflow-x-auto">
+            <table class="w-full text-left border-separate border-spacing-y-0">
+                <!-- Table Content -->
+            </table>
+        </div>
+
+        <!-- Cards (Mobile) -->
+        <div class="xl:hidden grid grid-cols-1 md:grid-cols-2 gap-6">
+            <!-- Card Content -->
+        </div>
+
+        <!-- Pagination -->
+        <div class="mt-8 border-t border-slate-100 pt-6">
+            {{ $items->links('vendor.pagination.luxury') }}
+        </div>
+    </div>
+</div>
+```
+
+### 16.3 文字大小細節 (Typography Nuances)
+
+- **主標題 (H1)**: `30px` (`text-3xl`)。
+- **副標題 (Subtitle)**: `14px` (`text-sm`)。
+- **統計數值 (Stats Value)**: `30px` (`text-3xl`)。
+- **表格主內容 (Primary Text)**: `16px` (`text-base`)。
+- **表格技術資料 (Technical/Dates)**: `12px` (`text-xs`)。
+- **表格標頭 (Table Header)**: `12px` (`text-xs`)。
+- **篩選器文字 (Filter Labels)**: `10px` 或 `12px` (`text-xs`)。
+
+### 16.4 顏色應用建議 (Color Rationale)
+- **統計卡片標籤**: 統一使用 `slate-500` (輕量感)。
+- **數值顏色**: 預設 `slate-800`，特殊狀態如「在線」可用 `emerald-500`，「過期/離線」可用 `rose-500`。
+- **篩選器選中狀態**: 強制使用 `cyan-600` (或 `cyan-500` 帶陰影)，建立品牌識別。
\ No newline at end of file
diff --git a/resources/views/admin/companies/index.blade.php b/resources/views/admin/companies/index.blade.php
index 9d612f3..5fcf156 100644
--- a/resources/views/admin/companies/index.blade.php
+++ b/resources/views/admin/companies/index.blade.php
@@ -1,7 +1,7 @@
 @extends('layouts.admin')
 
 @section('content')
-<div class="space-y-2" x-data="{
+<div class="space-y-2 pb-20" x-data="{
     showModal: false, 
     showHistoryModal: false, 
     showSettingsModal: false,
@@ -136,7 +136,7 @@
         }
     },
     init() {
-        this.$watch('activeTab', function(val) {
+        this.$watch('activeTab', (val) => {
             history.pushState({}, '', '{{ route('admin.permission.companies.index') }}?tab=' + val);
         });
         
@@ -173,38 +173,39 @@
     }
 }">
 
-    <!-- Header -->
-    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
+    <!-- Header Area -->
+    <div class="flex items-center justify-between gap-4">
         <div>
-            <h1 class="text-3xl font-black text-slate-800 dark:text-white tracking-tight font-display transition-all duration-300">
+            <h1 class="text-2xl sm:text-3xl font-black text-slate-800 dark:text-white tracking-tight font-display transition-all duration-300">
                 {{ __('Customer Management') }}
             </h1>
             <p class="text-sm font-bold text-slate-500 dark:text-slate-400 mt-1 uppercase tracking-widest">
                 {{ __('Manage all tenant accounts and validity') }}
             </p>
         </div>
-        <button @click="openCreateModal()" class="btn-luxury-primary">
+        <button @click="openCreateModal()" class="btn-luxury-primary whitespace-nowrap flex items-center gap-2 transition-all duration-300">
             <svg class="w-4 h-4 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14M5 12h14" />
             </svg>
-            <span>{{ __('Add Customer') }}</span>
+            <span class="text-sm sm:text-base">{{ __('Add Customer') }}</span>
         </button>
     </div>
 
-    <div class="flex items-center gap-1 p-1.5 bg-slate-100 dark:bg-slate-900/50 rounded-2xl w-fit border border-slate-200/50 dark:border-slate-800/50">
-        <button @click="activeTab = 'list'"
+    <!-- Tabs Navigation -->
+    <div class="flex items-center gap-1 p-1.5 bg-slate-100 dark:bg-slate-900/50 rounded-2xl w-fit border border-slate-200/50 dark:border-slate-800/50 overflow-x-auto whitespace-nowrap custom-scrollbar" aria-label="Tabs">
+        <button type="button" @click="activeTab = 'list'"
             :class="activeTab === 'list' ? 'bg-white dark:bg-slate-800 text-cyan-600 dark:text-cyan-400 shadow-sm shadow-cyan-500/10' : 'text-slate-400 hover:text-slate-600 dark:hover:text-slate-200'"
-            class="px-8 py-3 rounded-xl text-sm font-black uppercase tracking-widest transition-all">
+            class="px-8 py-3 rounded-xl text-sm font-black uppercase tracking-widest transition-all duration-300">
             {{ __('Customer List') }}
         </button>
-        <button @click="activeTab = 'settings'"
+        <button type="button" @click="activeTab = 'settings'"
             :class="activeTab === 'settings' ? 'bg-white dark:bg-slate-800 text-cyan-600 dark:text-cyan-400 shadow-sm shadow-cyan-500/10' : 'text-slate-400 hover:text-slate-600 dark:hover:text-slate-200'"
-            class="px-8 py-3 rounded-xl text-sm font-black uppercase tracking-widest transition-all">
+            class="px-8 py-3 rounded-xl text-sm font-black uppercase tracking-widest transition-all duration-300">
             {{ __('System Settings') }}
         </button>
     </div>
 
-    <div class="relative">
+    <div class="relative mt-6">
         <!-- Loading Spinner Overlay -->
         <div x-show="isLoadingTable" 
              x-transition:enter="transition ease-out duration-300"
@@ -255,25 +256,25 @@
 
     <!-- Table Section -->
     <div class="luxury-card rounded-3xl p-8 animate-luxury-in" style="animation-delay: 300ms">
-        <div class="flex flex-col md:flex-row md:items-center justify-between mb-8 gap-6">
-            <form action="{{ route('admin.permission.companies.index') }}" method="GET" class="relative group" @submit.prevent="fetchPage($el.action + '?' + new URLSearchParams(new FormData($el)).toString())">
-                <span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10">
-                    <svg class="w-4 h-4 text-slate-400 group-focus-within:text-cyan-500 transition-colors stroke-[2.5]"
-                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round"
-                        stroke-linejoin="round">
-                        <circle cx="11" cy="11" r="8"></circle>
-                        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-                    </svg>
-                </span>
-                <input type="text" name="search" value="{{ request('search') }}"
-                    class="py-2.5 pl-12 pr-6 block w-64 luxury-input"
-                    placeholder="{{ __('Search customers...') }}">
-                <input type="hidden" name="per_page" value="{{ request('per_page', 10) }}">
-            </form>
+        <div class="flex flex-wrap items-center gap-4 mb-8">
+            <form action="{{ route('admin.permission.companies.index') }}" method="GET" class="flex flex-wrap items-center gap-4 w-full" 
+                @submit.prevent="fetchPage($el.action + '?' + new URLSearchParams(new FormData($el)).toString())">
+                
+                <div class="relative group w-full sm:w-72">
+                    <span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10">
+                        <svg class="w-4 h-4 text-slate-400 group-focus-within:text-cyan-500 transition-colors stroke-[2.5]"
+                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round"
+                            stroke-linejoin="round">
+                            <circle cx="11" cy="11" r="8"></circle>
+                            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                        </svg>
+                    </span>
+                    <input type="text" name="search" value="{{ request('search') }}"
+                        class="py-2.5 pl-12 pr-6 block w-full luxury-input text-sm font-bold"
+                        placeholder="{{ __('Search customers...') }}">
+                </div>
 
-
-                <div
-                    class="flex items-center p-1 bg-slate-100/50 dark:bg-slate-900/50 backdrop-blur-md rounded-2xl border border-slate-200/50 dark:border-slate-700/50">
+                <div class="flex items-center p-1 bg-slate-100/50 dark:bg-slate-900/50 backdrop-blur-md rounded-2xl border border-slate-200/50 dark:border-slate-700/50 w-full sm:w-fit overflow-x-auto whitespace-nowrap">
                     <a href="{{ route('admin.permission.companies.index') }}" @click.prevent="fetchPage($event.currentTarget.href)"
                         class="px-5 py-2 text-xs font-black tracking-widest uppercase transition-all duration-300 rounded-xl {{ !request()->filled('status') ? 'bg-white dark:bg-slate-800 text-cyan-600 dark:text-cyan-400 shadow-lg shadow-cyan-500/10' : 'text-slate-400 dark:text-slate-500 hover:text-slate-600 dark:hover:text-slate-300' }}">
                         {{ __('All') }}
@@ -287,9 +288,34 @@
                         {{ __('Disabled') }}
                     </a>
                 </div>
-            </div>
 
-        <div class="overflow-x-auto">
+                <div class="flex items-center gap-2 ml-auto sm:ml-0">
+                    <button type="submit"
+                        class="p-2.5 rounded-xl bg-cyan-500 text-white hover:bg-cyan-600 shadow-lg shadow-cyan-500/25 transition-all active:scale-95"
+                        title="{{ __('Search') }}">
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                        </svg>
+                    </button>
+                    <a href="{{ route('admin.permission.companies.index') }}" @click.prevent="fetchPage($event.currentTarget.href)"
+                        class="p-2.5 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-700 transition-all active:scale-95 border border-slate-200 dark:border-slate-700"
+                        title="{{ __('Reset') }}">
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                        </svg>
+                    </a>
+                </div>
+
+                <input type="hidden" name="status" value="{{ request('status') }}">
+                <input type="hidden" name="per_page" value="{{ request('per_page', 10) }}">
+                <input type="hidden" name="tab" value="list">
+            </form>
+        </div>
+
+        <!-- Table View (Desktop) -->
+        <div class="hidden xl:block overflow-x-auto">
             <table class="w-full text-left border-separate border-spacing-y-0">
                 <thead>
                     <tr class="bg-slate-50/50 dark:bg-slate-900/30">
@@ -448,26 +474,20 @@
                                 </button>
                                 @endif
                                 <button @click='statusToggleSource = "edit"; openEditModal({{ json_encode($company) }})'
-                                    class="p-2 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 transition-all border border-transparent hover:border-cyan-500/20"
+                                    class="p-2 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-cyan-600 hover:bg-cyan-500/5 transition-all border border-transparent hover:border-cyan-500/20"
                                     title="{{ __('Edit') }}">
                                     <svg class="w-4 h-4 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                            d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
                                     </svg>
                                 </button>
-                                <button type="button" 
+                                <button
                                     @click="deleteFormAction = '{{ route('admin.permission.companies.destroy', $company->id) }}'; isDeleteConfirmOpen = true"
                                     class="p-2 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-rose-500 hover:bg-rose-500/5 transition-all border border-transparent hover:border-rose-500/20"
-                                    title="{{ __('Delete Customer') }}">
+                                    title="{{ __('Delete') }}">
                                     <svg class="w-4 h-4 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
-                                    </svg>
-                                </button>
-                                <button type="button" @click='openDetailSidebar({{ json_encode($company) }})'
-                                    class="p-2 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-indigo-500 hover:bg-indigo-500/5 transition-all border border-transparent hover:border-indigo-500/20"
-                                    title="{{ __('View Details') }}">
-                                    <svg class="w-4 h-4 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
-                                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                            d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-3.38a2.25 2.25 0 00-2.25-2.25h-3.51a2.25 2.25 0 00-2.25 2.25v3.38" />
                                     </svg>
                                 </button>
                             </div>
@@ -475,16 +495,14 @@
                     </tr>
                     @empty
                     <tr>
-                        <td colspan="5" class="px-6 py-24 text-center">
-                            <div class="flex flex-col items-center">
-                                <div
-                                    class="w-16 h-16 rounded-2xl bg-slate-50 dark:bg-slate-900 flex items-center justify-center text-slate-300 mb-4">
-                                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path
-                                            d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+                        <td colspan="6" class="px-6 py-20 text-center">
+                            <div class="flex flex-col items-center justify-center">
+                                <div class="w-20 h-20 rounded-full bg-slate-50 dark:bg-slate-800 flex items-center justify-center mb-4">
+                                    <svg class="w-10 h-10 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                                     </svg>
                                 </div>
-                                <p class="text-slate-400 font-bold">{{ __('No customers found') }}</p>
+                                <p class="text-slate-400 font-bold tracking-widest uppercase text-sm">{{ __('No Customers Found') }}</p>
                             </div>
                         </td>
                     </tr>
@@ -492,6 +510,102 @@
                 </tbody>
             </table>
         </div>
+        <!-- Mobile View (Cards) -->
+        <div class="xl:hidden space-y-4">
+            @forelse($companies as $company)
+            <div class="luxury-card p-6 rounded-3xl border border-slate-100 dark:border-slate-800/50 hover:shadow-xl transition-all duration-300">
+                <div class="flex justify-between items-start mb-6">
+                    <div class="flex items-center gap-4">
+                        <div class="w-12 h-12 rounded-2xl bg-cyan-500/10 text-cyan-500 flex items-center justify-center">
+                            <svg class="w-6 h-6 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+                            </svg>
+                        </div>
+                        <div>
+                            <h4 class="text-lg font-black text-slate-800 dark:text-white leading-tight">{{ $company->name }}</h4>
+                            <p class="text-xs font-mono font-bold text-slate-500 tracking-widest uppercase mt-0.5">{{ $company->code }}</p>
+                        </div>
+                    </div>
+                    @if($company->status)
+                    <span class="px-3 py-1 rounded-full text-[10px] font-black bg-emerald-500/10 text-emerald-500 border border-emerald-500/20 tracking-widest uppercase">{{ __('Active') }}</span>
+                    @else
+                    <span class="px-3 py-1 rounded-full text-[10px] font-black bg-rose-500/10 text-rose-500 border border-rose-500/20 tracking-widest uppercase">{{ __('Disabled') }}</span>
+                    @endif
+                </div>
+
+                <div class="grid grid-cols-2 gap-4 mb-6">
+                    <div class="p-3 bg-slate-50/50 dark:bg-slate-900/50 rounded-2xl border border-slate-100 dark:border-slate-800/50">
+                        <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">{{ __('Business') }}</p>
+                        <p class="text-xs font-bold {{ $company->current_type === 'buyout' ? 'text-amber-600' : 'text-blue-600' }} uppercase tracking-wider">
+                            {{ __($company->current_type === 'buyout' ? 'Buyout' : 'Lease') }}
+                        </p>
+                    </div>
+                    <div class="p-3 bg-slate-50/50 dark:bg-slate-900/50 rounded-2xl border border-slate-100 dark:border-slate-800/50">
+                        <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">{{ __('Scale') }}</p>
+                        <p class="text-xs font-bold text-slate-700 dark:text-slate-200 uppercase">
+                            {{ $company->users_count }}U / {{ $company->machines_count }}M
+                        </p>
+                    </div>
+                </div>
+
+                <div class="space-y-2.5 mb-6">
+                    @if($company->current_type === 'lease')
+                    <div class="flex items-center gap-3">
+                        <span class="px-2 py-0.5 rounded bg-blue-500/10 text-blue-600 text-[10px] font-black border border-blue-500/20 uppercase tracking-wider min-w-[55px] text-center">{{ __('Contract') }}</span>
+                        <span class="text-[11px] font-mono font-bold text-slate-600 dark:text-slate-300">
+                            {{ $company->start_date ? $company->start_date->format('Y-m-d') : '--' }} ~ {{ $company->end_date ? $company->end_date->format('Y-m-d') : __('Permanent') }}
+                        </span>
+                    </div>
+                    @endif
+
+                    @if($company->current_type === 'buyout')
+                    <div class="flex items-center gap-3">
+                        <span class="px-2 py-0.5 rounded bg-amber-500/10 text-amber-600 text-[10px] font-black border border-amber-500/20 uppercase tracking-wider min-w-[55px] text-center">{{ __('Warranty') }}</span>
+                        <span class="text-[11px] font-mono font-bold text-slate-600 dark:text-slate-300">
+                            {{ $company->warranty_start_date ? $company->warranty_start_date->format('Y-m-d') : '--' }} ~ {{ $company->warranty_end_date ? $company->warranty_end_date->format('Y-m-d') : '--' }}
+                        </span>
+                    </div>
+                    <div class="flex items-center gap-3">
+                        <span class="px-2 py-0.5 rounded bg-purple-500/10 text-purple-600 text-[10px] font-black border border-purple-500/20 uppercase tracking-wider min-w-[55px] text-center">{{ __('Software') }}</span>
+                        <span class="text-[11px] font-mono font-bold text-slate-600 dark:text-slate-300">
+                            {{ $company->software_start_date ? $company->software_start_date->format('Y-m-d') : '--' }} ~ {{ $company->software_end_date ? $company->software_end_date->format('Y-m-d') : '--' }}
+                        </span>
+                    </div>
+                    @endif
+                </div>
+
+                <div class="flex items-center justify-end gap-3 pt-4 border-t border-slate-100 dark:border-slate-800">
+                    @if($company->status)
+                    <button type="button"
+                        @click="toggleFormAction = '{{ route('admin.permission.companies.status.toggle', $company->id) }}'; statusToggleSource = 'list'; isStatusConfirmOpen = true"
+                        class="px-4 py-2 rounded-xl bg-amber-500/5 text-amber-500 text-xs font-black uppercase tracking-widest border border-amber-500/20 hover:bg-amber-500 hover:text-white transition-all">
+                        {{ __('Disable') }}
+                    </button>
+                    @else
+                    <button type="button"
+                        @click="toggleFormAction = '{{ route('admin.permission.companies.status.toggle', $company->id) }}'; $nextTick(() => $refs.statusToggleForm.submit())"
+                        class="px-4 py-2 rounded-xl bg-emerald-500/5 text-emerald-500 text-xs font-black uppercase tracking-widest border border-emerald-500/20 hover:bg-emerald-500 hover:text-white transition-all">
+                        {{ __('Enable') }}
+                    </button>
+                    @endif
+                    <button @click='statusToggleSource = "edit"; openEditModal({{ json_encode($company) }})'
+                        class="px-4 py-2 rounded-xl bg-cyan-500/5 text-cyan-500 text-xs font-black uppercase tracking-widest border border-cyan-500/20 hover:bg-cyan-500 hover:text-white transition-all">
+                        {{ __('Edit') }}
+                    </button>
+                    <button @click="deleteFormAction = '{{ route('admin.permission.companies.destroy', $company->id) }}'; isDeleteConfirmOpen = true"
+                        class="p-2 rounded-xl bg-rose-500/5 text-rose-500 border border-rose-500/20 hover:bg-rose-500 hover:text-white transition-all">
+                        <svg class="w-4 h-4 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-3.38a2.25 2.25 0 00-2.25-2.25h-3.51a2.25 2.25 0 00-2.25 2.25v3.38" />
+                        </svg>
+                    </button>
+                </div>
+            </div>
+            @empty
+            <div class="py-20 text-center bg-slate-50 dark:bg-slate-900/50 rounded-3xl border-2 border-dashed border-slate-200 dark:border-slate-800">
+                <p class="text-slate-400 font-bold uppercase tracking-widest text-sm">{{ __('No Customers Found') }}</p>
+            </div>
+            @endforelse
+        </div>
 
         <div class="mt-8 border-t border-slate-100 dark:border-slate-800 pt-6">
             {{ $companies->links('vendor.pagination.luxury') }}
diff --git a/resources/views/admin/products/index.blade.php b/resources/views/admin/products/index.blade.php
index 6e99327..94fdc6a 100644
--- a/resources/views/admin/products/index.blade.php
+++ b/resources/views/admin/products/index.blade.php
@@ -22,37 +22,35 @@ $roleSelectConfig = [
      data-errors="{{ json_encode($errors->any()) }}"
      data-store-url="{{ route($baseRoute . '.store') }}"
      data-index-url="{{ route($baseRoute . '.index') }}">
-    
-    <!-- Header -->
-    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
+     
+    <!-- Header Area -->
+    <div class="flex items-center justify-between gap-4">
         <div>
-            <h1 class="text-3xl font-black text-slate-800 dark:text-white font-display tracking-tight">{{ __('Product Management') }}</h1>
-            <p class="text-sm font-bold text-slate-500 dark:text-slate-400 mt-1 uppercase tracking-widest">
-                {{ __('Manage your catalog, prices, and multilingual details.') }}
-            </p>
+            <h1 class="text-2xl sm:text-3xl font-black text-slate-800 dark:text-white tracking-tight font-display">{{ __('Product Management') }}</h1>
+            <p class="text-sm font-bold text-slate-500 dark:text-slate-400 mt-1 uppercase tracking-widest">{{ __('Manage your catalog, prices, and multilingual details.') }}</p>
         </div>
         <div class="flex items-center gap-3">
             <template x-if="activeTab === 'products'">
-                <a href="{{ route($baseRoute . '.create') }}" class="btn-luxury-primary transition-all duration-300">
+                <a href="{{ route($baseRoute . '.create') }}" class="btn-luxury-primary whitespace-nowrap flex items-center gap-2 transition-all duration-300">
                     <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                     </svg>
-                    <span>{{ __('Add Product') }}</span>
+                    <span class="text-sm sm:text-base">{{ __('Add Product') }}</span>
                 </a>
             </template>
             <template x-if="activeTab === 'categories'">
-                <button @click="openCategoryModal()" type="button" class="btn-luxury-primary transition-all duration-300 bg-emerald-600 hover:bg-emerald-700 shadow-emerald-500/20">
+                <button @click="openCategoryModal()" type="button" class="btn-luxury-primary whitespace-nowrap flex items-center gap-2 transition-all duration-300">
                     <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                     </svg>
-                    <span>{{ __('Add Category') }}</span>
+                    <span class="text-sm sm:text-base">{{ __('Add Category') }}</span>
                 </button>
             </template>
         </div>
     </div>
 
     <!-- Tabs Navigation -->
-    <div class="flex items-center gap-1 p-1.5 bg-slate-100 dark:bg-slate-900/50 rounded-2xl w-fit border border-slate-200/50 dark:border-slate-800/50" aria-label="Tabs">
+    <div class="flex items-center gap-1 p-1.5 bg-slate-100 dark:bg-slate-900/50 rounded-2xl w-fit border border-slate-200/50 dark:border-slate-800/50 overflow-x-auto whitespace-nowrap custom-scrollbar" aria-label="Tabs">
         <button type="button" 
             @click="activeTab = 'products'" 
             :class="activeTab === 'products' ? 'bg-white dark:bg-slate-800 text-cyan-600 dark:text-cyan-400 shadow-sm shadow-cyan-500/10' : 'text-slate-400 hover:text-slate-600 dark:hover:text-slate-200'"
diff --git a/resources/views/admin/products/partials/tab-categories.blade.php b/resources/views/admin/products/partials/tab-categories.blade.php
index a84acb5..f1ec296 100644
--- a/resources/views/admin/products/partials/tab-categories.blade.php
+++ b/resources/views/admin/products/partials/tab-categories.blade.php
@@ -1,52 +1,57 @@
 <div class="relative">
-    <form @submit.prevent="handleFilterSubmit('categories')" id="categories-filter-form" class="mb-8 flex flex-wrap items-center gap-4">
-        <!-- Search Input -->
-        <div class="relative group">
-            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-slate-400 group-focus-within:text-cyan-500 transition-colors">
-                <svg class="w-4 h-4 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
-            </div>
-            <input type="text" name="category_search" value="{{ request('category_search', request('tab') === 'categories' ? request('category_search') : '') }}" 
-                   class="bg-slate-50 dark:bg-slate-900/50 border-none rounded-xl py-3 pl-10 pr-4 text-sm font-bold text-slate-700 dark:text-slate-200 focus:ring-2 focus:ring-cyan-500/20 w-64 transition-all shadow-sm"
-                   placeholder="{{ __('Search categories...') }}">
+    <!-- Toolbar & Filters -->
+    <div class="flex items-center justify-between mb-8">
+        <div class="flex items-center gap-6 w-full">
+            <form @submit.prevent="handleFilterSubmit('categories')" id="categories-filter-form" class="flex flex-wrap items-center gap-4 w-full">
+                <!-- Search Group -->
+                <div class="relative group w-full sm:w-72">
+                    <span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10">
+                        <svg class="h-4 w-4 text-slate-400 group-focus-within:text-cyan-500 transition-colors" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" name="search" value="{{ request('search') }}" 
+                        placeholder="{{ __('Search categories...') }}"
+                        class="luxury-input py-2.5 pl-11 pr-4 block w-full text-sm font-bold">
+                </div>
+
+                @if(auth()->user()->isSystemAdmin())
+                <div class="relative w-full sm:w-72 flex-none">
+                    <x-searchable-select name="category_company_id" 
+                        :options="$companies"
+                        :selected="request('category_company_id')"
+                        :placeholder="__('All Companies')"
+                        @change="handleFilterSubmit('categories')"
+                    />
+                </div>
+                @endif
+
+                <div class="flex items-center gap-2 ml-auto sm:ml-0">
+                    <button type="submit" 
+                        class="p-2.5 rounded-xl bg-cyan-500 text-white hover:bg-cyan-600 shadow-lg shadow-cyan-500/25 transition-all active:scale-95"
+                        title="{{ __('Search') }}">
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
+                    </button>
+                    <button type="button" 
+                        @click="
+                            $el.closest('form').querySelectorAll('input[type=text], input[type=hidden]:not([name=tab])').forEach(i => i.value = '');
+                            $el.closest('form').querySelectorAll('select').forEach(s => {
+                                s.value = '';
+                                const instance = window.HSSelect.getInstance(s);
+                                if(instance) instance.setValue('');
+                            });
+                            handleFilterSubmit('categories');
+                        "
+                        class="p-2.5 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-700 transition-all active:scale-95 border border-slate-200 dark:border-slate-700"
+                        title="{{ __('Reset') }}">
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
+                    </button>
+                </div>
+
+                <input type="hidden" name="tab" value="categories">
+            </form>
         </div>
-
-        @if(auth()->user()->isSystemAdmin())
-        <div class="relative w-72">
-            <x-searchable-select name="category_company_id" 
-                :options="$companies"
-                :selected="request('category_company_id')"
-                :placeholder="__('All Companies')"
-                @change="handleFilterSubmit('categories')"
-            />
-        </div>
-        @endif
-
-        
-        <input type="hidden" name="tab" value="categories">
-
-        <button type="submit" class="p-2.5 rounded-xl bg-cyan-500 text-white hover:bg-cyan-600 shadow-lg shadow-cyan-500/25 group" title="{{ __('Search') }}">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-            </svg>
-        </button>
-
-        <button type="button" 
-            @click="
-                $el.closest('form').querySelectorAll('input[type=text], input[type=hidden]:not([name=tab])').forEach(i => i.value = '');
-                $el.closest('form').querySelectorAll('select').forEach(s => {
-                    s.value = ' ';
-                    const instance = window.HSSelect.getInstance(s);
-                    if (instance) instance.setValue(' ');
-                });
-                handleFilterSubmit('categories');
-            "
-            class="p-2.5 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 group" title="{{ __('Reset') }}">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-            </svg>
-        </button>
-    </form>
-    <div class="overflow-x-auto luxury-scrollbar">
+    </div>
+    <!-- Desktop Table View -->
+    <div class="hidden xl:block overflow-x-auto luxury-scrollbar">
         <table class="w-full text-left border-separate border-spacing-y-0">
             <thead>
                 <tr class="bg-slate-50/50 dark:bg-slate-900/10">
@@ -100,6 +105,71 @@
         </table>
     </div>
 
+    <div class="xl:hidden grid grid-cols-1 md:grid-cols-2 gap-6">
+        @forelse($categories as $category)
+        <div class="luxury-card p-6 rounded-[2rem] border border-slate-100 dark:border-slate-800 bg-white/50 dark:bg-slate-900/50 transition-all duration-300 group">
+            <!-- Card Header -->
+            <div class="flex items-start justify-between gap-4 mb-6">
+                <div class="flex items-center gap-4 min-w-0">
+                    <div class="w-14 h-14 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 group-hover:text-white transition-all duration-300 overflow-hidden shadow-sm shrink-0">
+                        <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 003 5.25v13.5A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V9.432a2.25 2.25 0 00-.659-1.591l-4.182-4.182A2.25 2.25 0 0014.568 3h-5z" />
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12h-6m6 4h-6m6-8h-6" />
+                        </svg>
+                    </div>
+                    <div class="min-w-0">
+                        <h3 class="text-lg font-black text-slate-800 dark:text-slate-100 truncate tracking-tight transition-colors group-hover:text-cyan-600 dark:group-hover:text-cyan-400">
+                            {{ $category->localized_name }}
+                        </h3>
+                        <p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest truncate mt-1">
+                            {{ __('Category ID') }}: #{{ $category->id }}
+                        </p>
+                    </div>
+                </div>
+
+            </div>
+
+            <!-- Info Grid -->
+            @if(auth()->user()->isSystemAdmin())
+            <div class="mb-6 border-y border-slate-100 dark:border-slate-800/50 py-4">
+                <p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1">
+                    {{ __('Company') }}
+                </p>
+                <p class="text-sm font-bold text-slate-700 dark:text-slate-300">
+                    {{ $category->company->name ?? __('System Default') }}
+                </p>
+            </div>
+            @endif
+
+            <!-- Action Buttons -->
+            <div class="flex items-center gap-3">
+                <button type="button" 
+                        @click="confirmDelete('{{ route('admin.data-config.product-categories.destroy', $category->id) }}')"
+                        class="p-3 rounded-xl bg-slate-50 dark:bg-slate-800 text-slate-400 hover:bg-rose-500 hover:text-white transition-all duration-300 border border-slate-200/50 dark:border-slate-700/50"
+                        title="{{ __('Delete') }}">
+                    <svg class="w-4 h-4 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+                    </svg>
+                </button>
+
+                <button type="button" 
+                        @click="openCategoryModal(@js($category))"
+                        class="flex-1 flex items-center justify-center gap-2 py-3 rounded-xl bg-slate-50 dark:bg-slate-800 text-slate-500 dark:text-slate-400 font-bold text-xs hover:bg-cyan-500 hover:text-white transition-all duration-300 border border-slate-200/50 dark:border-slate-700/50">
+                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
+                    </svg>
+                    {{ __('Edit') }}
+                </button>
+            </div>
+            </div>
+        </div>
+        @empty
+        <div class="col-span-full py-20 text-center">
+            <p class="text-slate-400 italic font-bold tracking-widest small-caps">{{ __('No categories found.') }}</p>
+        </div>
+        @endforelse
+    </div>
+
     <!-- Pagination -->
     <div class="mt-6 py-6 border-t border-slate-50 dark:border-slate-800/50">
         {{ $categories->links('vendor.pagination.luxury') }}
diff --git a/resources/views/admin/products/partials/tab-products.blade.php b/resources/views/admin/products/partials/tab-products.blade.php
index 0cc1cd0..418da58 100644
--- a/resources/views/admin/products/partials/tab-products.blade.php
+++ b/resources/views/admin/products/partials/tab-products.blade.php
@@ -1,109 +1,156 @@
 @php
-    $baseRoute = 'admin.data-config.products';
+$baseRoute = 'admin.data-config.products';
 @endphp
 
 <div class="relative">
-    <!-- Filters & Search -->
-    <form @submit.prevent="handleFilterSubmit('products')" id="products-filter-form" class="flex flex-col md:flex-row md:items-center gap-4 mb-6">
-        <div class="relative group">
-            <button type="submit" class="absolute inset-y-0 left-0 flex items-center pl-4 z-10 text-slate-400 group-focus-within:text-cyan-500 transition-colors">
-                <svg class="w-4 h-4 stroke-[2.5]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
-                    <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-                </svg>
-            </button>
-            <input type="text" name="product_search" value="{{ request('product_search') }}" 
-                class="py-2.5 pl-12 pr-6 block w-full md:w-80 luxury-input" placeholder="{{ __('Search products...') }}">
-            <button type="submit" class="hidden"></button>
-        </div>
+    <!-- Toolbar & Filters -->
+    <div class="flex items-center justify-between mb-8">
+        <div class="flex items-center gap-6 w-full">
+            <form @submit.prevent="handleFilterSubmit('products')" id="products-filter-form"
+                class="flex flex-wrap items-center gap-4 w-full">
+                
+                <!-- Search Group -->
+                <div class="relative group w-full sm:w-72">
+                    <span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10">
+                        <svg class="h-4 w-4 text-slate-400 group-focus-within:text-cyan-500 transition-colors"
+                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
+                            stroke-linecap="round" stroke-linejoin="round">
+                            <circle cx="11" cy="11" r="8"></circle>
+                            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                        </svg>
+                    </span>
+                    <input type="text" name="search" value="{{ request('search') }}"
+                        placeholder="{{ __('Search products...') }}"
+                        class="luxury-input py-2.5 pl-11 pr-4 block w-full text-sm font-bold">
+                </div>
 
-        @if(auth()->user()->isSystemAdmin())
-        <div class="relative w-72">
-            <x-searchable-select name="product_company_id" :options="$companies" :selected="request('product_company_id')" :placeholder="__('All Companies')" @change="handleFilterSubmit('products')" />
-        </div>
-        @endif
-        
-        <div class="relative w-72">
-            <x-searchable-select name="category_id" :options="$categories" :selected="request('category_id')" :placeholder="__('All Categories')" @change="handleFilterSubmit('products')" />
-        </div>
+                <div class="relative w-full sm:w-72 flex-none">
+                    <x-searchable-select name="category_id" :options="$categories" :selected="request('category_id')"
+                        :placeholder="__('All Categories')" @change="handleFilterSubmit('products')" />
+                </div>
+
+                @if(auth()->user()->isSystemAdmin())
+                <div class="relative w-full sm:w-72 flex-none">
+                    <x-searchable-select name="product_company_id" :options="$companies"
+                        :selected="request('product_company_id')" :placeholder="__('All Companies')"
+                        @change="handleFilterSubmit('products')" />
+                </div>
+                @endif
+
+                <div class="flex items-center gap-2 ml-auto sm:ml-0">
+                    <button type="submit"
+                        class="p-2.5 rounded-xl bg-cyan-500 text-white hover:bg-cyan-600 shadow-lg shadow-cyan-500/25 transition-all active:scale-95"
+                        title="{{ __('Search') }}">
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                        </svg>
+                    </button>
+                    <button type="button" @click="
+                            $el.closest('form').querySelectorAll('input[type=text], input[type=hidden]:not([name=tab])').forEach(i => i.value = '');
+                            $el.closest('form').querySelectorAll('select').forEach(s => {
+                                s.value = '';
+                                const instance = window.HSSelect.getInstance(s);
+                                if(instance) instance.setValue('');
+                            });
+                            handleFilterSubmit('products');
+                        "
+                        class="p-2.5 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-700 transition-all active:scale-95 border border-slate-200 dark:border-slate-700"
+                        title="{{ __('Reset') }}">
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                        </svg>
+                    </button>
+                </div>
 
-        
         <input type="hidden" name="tab" value="products">
+            </form>
+        </div>
+    </div>
 
-        <button type="submit" class="p-2.5 rounded-xl bg-cyan-500 text-white hover:bg-cyan-600 shadow-lg shadow-cyan-500/25 group" title="{{ __('Search') }}">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-            </svg>
-        </button>
-
-        <button type="button" 
-            @click="
-                $el.closest('form').querySelectorAll('input[type=text], input[type=hidden]:not([name=tab])').forEach(i => i.value = '');
-                $el.closest('form').querySelectorAll('select').forEach(s => {
-                    s.value = ' ';
-                    const instance = window.HSSelect.getInstance(s);
-                    if (instance) instance.setValue(' ');
-                });
-                handleFilterSubmit('products');
-            "
-            class="p-2.5 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 group" title="{{ __('Reset') }}">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-            </svg>
-        </button>
-    </form>
-
-    <!-- Table -->
-    <div class="overflow-x-auto luxury-scrollbar">
+    <!-- Desktop Table View -->
+    <div class="hidden xl:block overflow-x-auto luxury-scrollbar">
         <table class="w-full text-left border-separate border-spacing-y-0">
             <thead>
                 <tr class="bg-slate-50/50 dark:bg-slate-900/10">
-                    <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">{{ __('Product Info') }}</th>
-                    <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">{{ __('Barcode') }}</th>
+                    <th
+                        class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">
+                        {{ __('Product Info') }}</th>
+                    <th
+                        class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">
+                        {{ __('Barcode') }}</th>
                     @if(auth()->user()->isSystemAdmin())
-                    <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center">{{ __('Company') }}</th>
+                    <th
+                        class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center">
+                        {{ __('Company') }}</th>
                     @endif
-                    <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center">{{ __('Sale Price') }}</th>
-                    <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center">{{ __('Track Limit (Track/Spring)') }}</th>
-                    <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center">{{ __('Status') }}</th>
-                    <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-right">{{ __('Actions') }}</th>
+                    <th
+                        class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center">
+                        {{ __('Sale Price') }}</th>
+                    <th
+                        class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center">
+                        {{ __('Track Limit (Track/Spring)') }}</th>
+                    <th
+                        class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center">
+                        {{ __('Status') }}</th>
+                    <th
+                        class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-right">
+                        {{ __('Actions') }}</th>
                 </tr>
             </thead>
             <tbody class="divide-y divide-slate-50 dark:divide-slate-800/80">
                 @forelse($products as $product)
                 <tr class="group hover:bg-slate-50/80 dark:hover:bg-slate-800/40 transition-all duration-300">
-                    <td class="px-6 py-5 cursor-pointer group/info" @click="viewProductDetail(@js($product))" title="{{ __('View Details') }}">
+                    <td class="px-6 py-5 cursor-pointer group/info" @click="viewProductDetail(@js($product))"
+                        title="{{ __('View Details') }}">
                         <div class="flex items-center gap-x-4">
-                            <div class="w-12 h-12 rounded-xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 group-hover/info:bg-cyan-500 group-hover/info:text-white group-hover/info:border-cyan-500 shadow-sm group-hover/info:shadow-cyan-500/50 transition-all duration-300 overflow-hidden relative">
+                            <div
+                                class="w-12 h-12 rounded-xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 group-hover/info:bg-cyan-500 group-hover/info:text-white group-hover/info:border-cyan-500 shadow-sm group-hover/info:shadow-cyan-500/50 transition-all duration-300 overflow-hidden relative">
                                 @if($product->image_url)
-                                    <img src="{{ $product->image_url }}" class="w-full h-full object-cover">
+                                <img src="{{ $product->image_url }}" class="w-full h-full object-cover">
                                 @else
-                                    <svg class="w-6 h-6 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" /></svg>
+                                <svg class="w-6 h-6 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                        d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
+                                </svg>
                                 @endif
                             </div>
                             <div class="flex flex-col">
-                                <span class="text-base font-extrabold text-slate-800 dark:text-slate-100 group-hover/info:text-cyan-600 dark:group-hover/info:text-cyan-400 transition-colors leading-tight">{{ $product->localized_name }}</span>
+                                <span
+                                    class="text-base font-extrabold text-slate-800 dark:text-slate-100 group-hover/info:text-cyan-600 dark:group-hover/info:text-cyan-400 transition-colors leading-tight">{{
+                                    $product->localized_name }}</span>
                                 <div class="flex flex-wrap items-center gap-1.5 mt-1.5">
                                     @php
-                                        $catName = $product->category->localized_name ?? __('Uncategorized');
+                                    $catName = $product->category->localized_name ?? __('Uncategorized');
                                     @endphp
-                                    <span class="text-[10px] font-black text-slate-500 dark:text-slate-400 uppercase tracking-[0.14em] bg-slate-100/80 dark:bg-slate-800/80 border border-slate-200/60 dark:border-slate-700/60 px-2.5 py-1 rounded-lg backdrop-blur-sm transition-all duration-300 group-hover/info:bg-cyan-500/10 group-hover/info:border-cyan-500/20 group-hover/info:text-cyan-500 group-hover/info:shadow-sm group-hover/info:shadow-cyan-500/10">{{ $catName }}</span>
-                                    @if(($companySettings['enable_material_code'] ?? false) && isset($product->metadata['material_code']))
-                                        <span class="text-[10px] font-black text-emerald-500/90 uppercase tracking-widest bg-emerald-500/10 px-2 py-0.5 rounded-lg border border-emerald-500/20 shadow-sm shadow-emerald-500/5">#{{ $product->metadata['material_code'] }}</span>
+                                    <span
+                                        class="text-[10px] font-black text-slate-500 dark:text-slate-400 uppercase tracking-[0.14em] bg-slate-100/80 dark:bg-slate-800/80 border border-slate-200/60 dark:border-slate-700/60 px-2.5 py-1 rounded-lg backdrop-blur-sm transition-all duration-300 group-hover/info:bg-cyan-500/10 group-hover/info:border-cyan-500/20 group-hover/info:text-cyan-500 group-hover/info:shadow-sm group-hover/info:shadow-cyan-500/10">{{
+                                        $catName }}</span>
+                                    @if(($companySettings['enable_material_code'] ?? false) &&
+                                    isset($product->metadata['material_code']))
+                                    <span
+                                        class="text-[10px] font-black text-emerald-500/90 uppercase tracking-widest bg-emerald-500/10 px-2 py-0.5 rounded-lg border border-emerald-500/20 shadow-sm shadow-emerald-500/5">#{{
+                                        $product->metadata['material_code'] }}</span>
                                     @endif
                                 </div>
                             </div>
                         </div>
                     </td>
                     <td class="px-6 py-5 whitespace-nowrap">
-                        <span class="text-sm font-mono font-bold text-slate-600 dark:text-slate-300 tracking-tight">{{ $product->barcode ?: '-' }}</span>
+                        <span class="text-sm font-mono font-bold text-slate-600 dark:text-slate-300 tracking-tight">{{
+                            $product->barcode ?: '-' }}</span>
                     </td>
                     @if(auth()->user()->isSystemAdmin())
                     <td class="px-6 py-5 text-center">
-                        <span class="text-xs font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest group-hover:text-slate-600 dark:group-hover:text-slate-300 transition-colors">{{ $product->company->name ?? '-' }}</span>
+                        <span
+                            class="text-xs font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest group-hover:text-slate-600 dark:group-hover:text-slate-300 transition-colors">{{
+                            $product->company->name ?? '-' }}</span>
                     </td>
                     @endif
                     <td class="px-6 py-5 text-center whitespace-nowrap">
-                        <span class="text-sm font-black text-slate-800 dark:text-white leading-none">${{ number_format($product->price, 0) }}</span>
+                        <span class="text-sm font-black text-slate-800 dark:text-white leading-none">${{
+                            number_format($product->price, 0) }}</span>
                     </td>
                     <td class="px-6 py-5">
                         <div class="flex items-center justify-center gap-2 font-black">
@@ -118,38 +165,53 @@
                     </td>
                     <td class="px-6 py-5 text-center">
                         @if($product->is_active)
-                            <span class="inline-flex items-center px-3 py-1.5 rounded-xl text-[10px] font-black bg-emerald-500/10 text-emerald-500 border border-emerald-500/20 tracking-widest uppercase shadow-sm shadow-emerald-500/5">{{ __('Active') }}</span>
+                        <span
+                            class="inline-flex items-center px-3 py-1.5 rounded-xl text-[10px] font-black bg-emerald-500/10 text-emerald-500 border border-emerald-500/20 tracking-widest uppercase shadow-sm shadow-emerald-500/5">{{
+                            __('Active') }}</span>
                         @else
-                            <span class="inline-flex items-center px-3 py-1.5 rounded-xl text-[10px] font-black bg-slate-400/10 text-slate-400 border border-slate-400/20 tracking-widest uppercase">{{ __('Disabled') }}</span>
+                        <span
+                            class="inline-flex items-center px-3 py-1.5 rounded-xl text-[10px] font-black bg-slate-400/10 text-slate-400 border border-slate-400/20 tracking-widest uppercase">{{
+                            __('Disabled') }}</span>
                         @endif
                     </td>
                     <td class="px-6 py-5 text-right">
                         <div class="flex justify-end items-center gap-2">
                             @if($product->is_active)
-                                <button type="button" 
-                                        @click="toggleStatus('{{ route($baseRoute . '.status.toggle', $product->id) }}')"
-                                        class="p-2.5 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-amber-500 hover:bg-amber-500/5 transition-all border border-transparent hover:border-amber-500/20" 
-                                        title="{{ __('Disable') }}">
-                                    <svg class="w-4 h-4 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25v13.5m-7.5-13.5v13.5" /></svg>
-                                </button>
-                            @else
-                                <button type="button" 
-                                        @click="toggleStatus('{{ route($baseRoute . '.status.toggle', $product->id) }}')"
-                                        class="p-2.5 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-emerald-500 hover:bg-emerald-500/5 transition-all border border-transparent hover:border-emerald-500/20" 
-                                        title="{{ __('Enable') }}">
-                                    <svg class="w-4 h-4 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347c-.75.412-1.667-.13-1.667-.986V5.653z" /></svg>
-                                </button>
-                            @endif
-                            <a href="{{ route($baseRoute . '.edit', $product->id) }}" class="p-2.5 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 transition-all border border-transparent hover:border-cyan-500/20" title="{{ __('Edit') }}">
-                                <svg class="w-4 h-4 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" /></svg>
-                            </a>
-                            <button type="button" @click="confirmDelete('{{ route($baseRoute . '.destroy', $product->id) }}')" class="p-2.5 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-rose-500 hover:bg-rose-500/5 transition-all border border-transparent hover:border-rose-500/20" title="{{ __('Delete') }}">
-                                <svg class="w-4 h-4 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" /></svg>
-                            </button>
-                            <button type="button" @click="viewProductDetail({{ json_encode($product) }})" class="p-2.5 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-indigo-500 hover:bg-indigo-500/5 transition-all border border-transparent hover:border-indigo-500/20" title="{{ __('View') }}">
+                            <button type="button"
+                                @click="toggleStatus('{{ route($baseRoute . '.status.toggle', $product->id) }}')"
+                                class="p-2.5 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-amber-500 hover:bg-amber-500/5 transition-all border border-transparent hover:border-amber-500/20"
+                                title="{{ __('Disable') }}">
                                 <svg class="w-4 h-4 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.644C3.67 8.5 7.652 6 12 6c4.348 0 8.33 2.5 9.964 5.678.134.263.134.561 0 .824C20.33 15.5 16.348 18 12 18c-4.348 0-8.33-2.5-9.964-5.678Z" />
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                        d="M15.75 5.25v13.5m-7.5-13.5v13.5" />
+                                </svg>
+                            </button>
+                            @else
+                            <button type="button"
+                                @click="toggleStatus('{{ route($baseRoute . '.status.toggle', $product->id) }}')"
+                                class="p-2.5 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-emerald-500 hover:bg-emerald-500/5 transition-all border border-transparent hover:border-emerald-500/20"
+                                title="{{ __('Enable') }}">
+                                <svg class="w-4 h-4 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                        d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347c-.75.412-1.667-.13-1.667-.986V5.653z" />
+                                </svg>
+                            </button>
+                            @endif
+                            <a href="{{ route($baseRoute . '.edit', $product->id) }}"
+                                class="p-2.5 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 transition-all border border-transparent hover:border-cyan-500/20"
+                                title="{{ __('Edit') }}">
+                                <svg class="w-4 h-4 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                        d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
+                                </svg>
+                            </a>
+                            <button type="button"
+                                @click="confirmDelete('{{ route($baseRoute . '.destroy', $product->id) }}')"
+                                class="p-2.5 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-rose-500 hover:bg-rose-500/5 transition-all border border-transparent hover:border-rose-500/20"
+                                title="{{ __('Delete') }}">
+                                <svg class="w-4 h-4 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                        d="m14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
                                 </svg>
                             </button>
                         </div>
@@ -157,15 +219,155 @@
                 </tr>
                 @empty
                 <tr>
-                    <td colspan="7" class="px-6 py-20 text-center text-slate-400 italic font-bold tracking-widest small-caps">{{ __('No products found matching your criteria.') }}</td>
+                    <td colspan="7"
+                        class="px-6 py-20 text-center text-slate-400 italic font-bold tracking-widest small-caps">{{
+                        __('No products found matching your criteria.') }}</td>
                 </tr>
                 @endforelse
             </tbody>
         </table>
     </div>
-    
+
+    <!-- Mobile Card View -->
+    <div class="xl:hidden grid grid-cols-1 md:grid-cols-2 gap-6">
+        @forelse($products as $product)
+        <div
+            class="luxury-card p-6 rounded-[2rem] border border-slate-100 dark:border-slate-800 bg-white/50 dark:bg-slate-900/50 transition-all duration-300 group">
+            <!-- Card Header -->
+            <div class="flex items-start justify-between gap-4 mb-6">
+                <div class="flex items-center gap-4 min-w-0">
+                    <div @click="viewProductDetail(@js($product))"
+                        class="w-14 h-14 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 group-hover:text-white transition-all duration-300 overflow-hidden shadow-sm shrink-0 cursor-pointer">
+                        @if($product->image_url)
+                        <img src="{{ $product->image_url }}" class="w-full h-full object-cover">
+                        @else
+                        <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
+                        </svg>
+                        @endif
+                    </div>
+                    <div class="min-w-0">
+                        <h3 @click="viewProductDetail(@js($product))"
+                            class="text-lg font-black text-slate-800 dark:text-slate-100 truncate hover:text-cyan-600 dark:hover:text-cyan-400 transition-colors tracking-tight cursor-pointer">
+                            {{ $product->localized_name }}
+                        </h3>
+                        <p
+                            class="text-xs font-mono font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest truncate">
+                            {{ $product->barcode ?: '--' }}
+                        </p>
+                    </div>
+                </div>
+
+                <!-- Status Label -->
+                <div class="mt-2">
+                    @if($product->is_active)
+                    <span
+                        class="inline-flex items-center px-3 py-1.5 rounded-xl text-[10px] font-black bg-emerald-500/10 text-emerald-500 border border-emerald-500/20 tracking-widest uppercase shadow-sm shadow-emerald-500/5">{{
+                        __('Active') }}</span>
+                    @else
+                    <span
+                        class="inline-flex items-center px-3 py-1.5 rounded-xl text-[10px] font-black bg-slate-400/10 text-slate-400 border border-slate-400/20 tracking-widest uppercase shadow-sm shadow-slate-400/5">{{
+                        __('Disabled') }}</span>
+                    @endif
+                </div>
+            </div>
+
+            <!-- Info Grid -->
+            <div class="grid grid-cols-2 gap-y-4 mb-6 border-y border-slate-100 dark:border-slate-800/50 py-4">
+                <div>
+                    <p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1">
+                        {{ __('Category') }}
+                    </p>
+                    <p class="text-sm font-bold text-slate-700 dark:text-slate-300 truncate">
+                        {{ $product->category->localized_name ?? __('Uncategorized') }}
+                    </p>
+                </div>
+                <div>
+                    <p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1">
+                        {{ __('Sale Price') }}
+                    </p>
+                    <p class="text-sm font-black text-emerald-600 dark:text-emerald-400 font-mono">
+                        ${{ number_format($product->price, 0) }}
+                    </p>
+                </div>
+                <div>
+                    <p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1">
+                        {{ __('Track Limit') }}
+                    </p>
+                    <p class="text-sm font-bold text-indigo-500 dark:text-indigo-400 font-mono">
+                        {{ $product->track_limit ?: 0 }}
+                    </p>
+                </div>
+                <div>
+                    <p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1">
+                        {{ __('Spring Limit') }}
+                    </p>
+                    <p class="text-sm font-bold text-amber-500 dark:text-amber-500 font-mono">
+                        {{ $product->spring_limit ?: 0 }}
+                    </p>
+                </div>
+                @if(auth()->user()->isSystemAdmin())
+                <div class="col-span-2">
+                    <p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1">
+                        {{ __('Company') }}
+                    </p>
+                    <p class="text-sm font-bold text-slate-700 dark:text-slate-300">
+                        {{ $product->company->name ?? '-' }}
+                    </p>
+                </div>
+                @endif
+            </div>
+
+            <!-- Action Buttons -->
+            <div class="flex items-center gap-3">
+                <div class="flex items-center gap-2">
+                    <button type="button"
+                        @click="toggleStatus('{{ route($baseRoute . '.status.toggle', $product->id) }}')"
+                        class="p-3 rounded-xl bg-slate-50 dark:bg-slate-800 text-slate-400 hover:bg-emerald-500 hover:text-white transition-all duration-300 border border-slate-200/50 dark:border-slate-700/50"
+                        title="{{ __('Status') }}">
+                        @if($product->is_active)
+                        <svg class="w-4 h-4 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25v13.5m-7.5-13.5v13.5" />
+                        </svg>
+                        @else
+                        <svg class="w-4 h-4 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347c-.75.412-1.667-.13-1.667-.986V5.653z" />
+                        </svg>
+                        @endif
+                    </button>
+                    <a href="{{ route($baseRoute . '.edit', $product->id) }}"
+                        class="p-3 rounded-xl bg-slate-50 dark:bg-slate-800 text-slate-400 hover:bg-cyan-500 hover:text-white transition-all duration-300 border border-slate-200/50 dark:border-slate-700/50"
+                        title="{{ __('Edit') }}">
+                        <svg class="w-4 h-4 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
+                        </svg>
+                    </a>
+                </div>
+
+                <button type="button" @click="viewProductDetail(@js($product))"
+                    class="flex-1 flex items-center justify-center gap-2 py-3 rounded-xl bg-slate-50 dark:bg-slate-800 text-slate-500 dark:text-slate-400 font-bold text-xs hover:bg-cyan-500 hover:text-white transition-all duration-300 border border-slate-200/50 dark:border-slate-700/50">
+                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                        <path stroke-linecap="round" stroke-linejoin="round"
+                            d="M2.036 12.322a1.012 1.012 0 0 1 0-.644C3.67 8.5 7.652 6 12 6c4.348 0 8.332 2.5 9.964 5.678a1.012 1.012 0 0 1 0 .644C20.33 15.5 16.348 18 12 18c-4.348 0-8.332-2.5-9.964-5.678z" />
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" />
+                    </svg>
+                    {{ __('Details') }}
+                </button>
+            </div>
+        </div>
+        @empty
+        <div class="col-span-full py-20 text-center">
+            <p class="text-slate-400 italic font-bold tracking-widest small-caps">{{ __('No products found matching your
+                criteria.') }}</p>
+        </div>
+        @endforelse
+    </div>
+
     <!-- Pagination -->
     <div class="mt-6 py-6 border-t border-slate-50 dark:border-slate-800/50">
         {{ $products->links('vendor.pagination.luxury') }}
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/resources/views/layouts/admin.blade.php b/resources/views/layouts/admin.blade.php
index b734b1a..7a43a9e 100644
--- a/resources/views/layouts/admin.blade.php
+++ b/resources/views/layouts/admin.blade.php
@@ -1,5 +1,7 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full" x-data="{ darkMode: localStorage.getItem('darkMode') === 'true' }" :class="{ 'dark': darkMode }">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full"
+    x-data="{ darkMode: localStorage.getItem('darkMode') === 'true' }" :class="{ 'dark': darkMode }">
+
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -10,7 +12,9 @@
     <!-- Fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
+    <link
+        href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap"
+        rel="stylesheet">
 
     <!-- Scripts -->
     <script>
@@ -24,13 +28,14 @@
     </script>
     @vite(['resources/css/app.css', 'resources/js/app.js'])
 </head>
-<body class="bg-gray-50 dark:bg-[#0f172a] antialiased font-sans h-full selection:bg-indigo-100 dark:selection:bg-indigo-900/40" 
+
+<body
+    class="bg-gray-50 dark:bg-[#0f172a] antialiased font-sans h-full selection:bg-indigo-100 dark:selection:bg-indigo-900/40"
     x-data="{ 
         sidebarOpen: false, 
         sidebarCollapsed: localStorage.getItem('sidebarCollapsed') === 'true',
         userDropdownOpen: false 
-    }"
-    x-init="$watch('sidebarCollapsed', value => localStorage.setItem('sidebarCollapsed', value))">
+    }" x-init="$watch('sidebarCollapsed', value => localStorage.setItem('sidebarCollapsed', value))">
     <!-- Option A: Loading Screen -->
     <x-loading-screen />
 
@@ -42,31 +47,29 @@
         window.addEventListener('beforeunload', () => {
             document.getElementById('top-loading-bar').classList.add('loading');
         });
-        
+
         window.addEventListener('pageshow', () => {
             document.getElementById('top-loading-bar').classList.remove('loading');
         });
     </script>
 
     <!-- Sidebar Overlay (Mobile) -->
-    <div x-show="sidebarOpen" 
-         x-transition:enter="transition-opacity ease-linear duration-300"
-         x-transition:enter-start="opacity-0"
-         x-transition:enter-end="opacity-100"
-         x-transition:leave="transition-opacity ease-linear duration-300"
-         x-transition:leave-start="opacity-100"
-         x-transition:leave-end="opacity-0"
-         @click="sidebarOpen = false"
-         class="fixed inset-0 z-[55] bg-gray-900/50 lg:hidden"
-         x-cloak></div>
+    <div x-show="sidebarOpen" x-transition:enter="transition-opacity ease-linear duration-300"
+        x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
+        x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100"
+        x-transition:leave-end="opacity-0" @click="sidebarOpen = false"
+        class="fixed inset-0 z-[55] bg-gray-900/50 lg:hidden" x-cloak></div>
 
     <!-- ========== HEADER ========== -->
-    <header class="sticky top-0 inset-x-0 flex flex-wrap sm:justify-start sm:flex-nowrap z-[48] w-full bg-white/80 backdrop-blur-md border-b border-slate-200/50 text-sm py-2.5 sm:py-4 lg:pl-[256px] dark:bg-[#0f172a]/80 dark:border-slate-800/50 shadow-sm transition-all duration-300"
-            :class="sidebarCollapsed ? 'lg:pl-24' : 'lg:pl-[256px]'">
+    <header
+        class="sticky top-0 inset-x-0 flex flex-wrap sm:justify-start sm:flex-nowrap z-[48] w-full bg-white/80 backdrop-blur-md border-b border-slate-200/50 text-sm py-2.5 sm:py-4 lg:pl-[256px] dark:bg-[#0f172a]/80 dark:border-slate-800/50 shadow-sm transition-all duration-300"
+        :class="sidebarCollapsed ? 'lg:pl-24' : 'lg:pl-[256px]'">
         <nav class="flex basis-full items-center w-full mx-auto px-4 sm:px-6 md:px-8" aria-label="Global">
             <div class="mr-5 lg:mr-0 lg:hidden text-center">
-                <a class="flex items-center gap-x-2 flex-none text-xl font-bold dark:text-white font-display tracking-tight" href="{{ route('admin.dashboard') }}" aria-label="Brand">
-                    <img src="{{ asset('S1_cropped_transparent.png') }}" alt="{{ config('app.name') }} Logo" class="w-7 h-7 object-contain">
+                <a class="flex items-center gap-x-2 flex-none text-xl font-bold dark:text-white font-display tracking-tight"
+                    href="{{ route('admin.dashboard') }}" aria-label="Brand">
+                    <img src="{{ asset('S1_cropped_transparent.png') }}" alt="{{ config('app.name') }} Logo"
+                        class="w-7 h-7 object-contain">
                     <span>Star<span class="text-cyan-500">Cloud</span></span>
                 </a>
             </div>
@@ -76,64 +79,87 @@
                 <div class="flex flex-row items-center justify-end gap-x-1.5 sm:gap-x-3">
                     <!-- Language Switcher -->
                     <div class="relative inline-flex" x-data="{ langOpen: false }">
-                        <button type="button" @click="langOpen = !langOpen" @click.away="langOpen = false" class="inline-flex flex-shrink-0 justify-center items-center gap-2 h-[2.375rem] px-3 rounded-full font-medium bg-white text-gray-700 align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white transition-all text-xs dark:bg-gray-800 dark:hover:bg-slate-800 dark:text-gray-400 dark:hover:text-white dark:focus:ring-gray-700 dark:focus:ring-offset-gray-800">
+                        <button type="button" @click="langOpen = !langOpen" @click.away="langOpen = false"
+                            class="inline-flex flex-shrink-0 justify-center items-center gap-2 h-[2.375rem] px-3 rounded-full font-medium bg-white text-gray-700 align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white transition-all text-xs dark:bg-gray-800 dark:hover:bg-slate-800 dark:text-gray-400 dark:hover:text-white dark:focus:ring-gray-700 dark:focus:ring-offset-gray-800">
                             <span class="flex items-center gap-x-2">
                                 @if(app()->getLocale() == 'zh_TW')
-                                    <span class="text-base">🇹🇼</span>
-                                    <span class="hidden md:inline font-bold">繁體中文</span>
+                                <span class="text-base">🇹🇼</span>
+                                <span class="hidden md:inline font-bold">繁體中文</span>
                                 @elseif(app()->getLocale() == 'ja')
-                                    <span class="text-base">🇯🇵</span>
-                                    <span class="hidden md:inline font-bold">日本語</span>
+                                <span class="text-base">🇯🇵</span>
+                                <span class="hidden md:inline font-bold">日本語</span>
                                 @else
-                                    <span class="text-base">🇬🇧</span>
-                                    <span class="hidden md:inline font-bold">English</span>
+                                <span class="text-base">🇬🇧</span>
+                                <span class="hidden md:inline font-bold">English</span>
                                 @endif
                             </span>
-                            <svg class="size-3 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+                            <svg class="size-3 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                                stroke-linecap="round" stroke-linejoin="round">
+                                <path d="m6 9 6 6 6-6" />
+                            </svg>
                         </button>
 
-                        <div x-show="langOpen"
-                             x-transition:enter="transition ease-out duration-100"
-                             x-transition:enter-start="transform opacity-0 scale-95"
-                             x-transition:enter-end="transform opacity-100 scale-100"
-                             x-transition:leave="transition ease-in duration-75"
-                             x-transition:leave-start="transform opacity-100 scale-100"
-                             x-transition:leave-end="transform opacity-0 scale-95"
-                             class="absolute right-0 top-full mt-2 min-w-[10rem] bg-white shadow-xl rounded-2xl p-2 dark:bg-gray-800 dark:border dark:border-gray-700 z-50 border border-slate-100"
-                             x-cloak>
-                            <a href="{{ route('lang.switch', 'zh_TW') }}" class="flex items-center gap-x-3 py-2.5 px-3 rounded-xl text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 transition-colors {{ app()->getLocale() == 'zh_TW' ? 'bg-gray-50 dark:bg-gray-900/50' : '' }}">
+                        <div x-show="langOpen" x-transition:enter="transition ease-out duration-100"
+                            x-transition:enter-start="transform opacity-0 scale-95"
+                            x-transition:enter-end="transform opacity-100 scale-100"
+                            x-transition:leave="transition ease-in duration-75"
+                            x-transition:leave-start="transform opacity-100 scale-100"
+                            x-transition:leave-end="transform opacity-0 scale-95"
+                            class="absolute right-0 top-full mt-2 min-w-[10rem] bg-white shadow-xl rounded-2xl p-2 dark:bg-gray-800 dark:border dark:border-gray-700 z-50 border border-slate-100"
+                            x-cloak>
+                            <a href="{{ route('lang.switch', 'zh_TW') }}"
+                                class="flex items-center gap-x-3 py-2.5 px-3 rounded-xl text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 transition-colors {{ app()->getLocale() == 'zh_TW' ? 'bg-gray-50 dark:bg-gray-900/50' : '' }}">
                                 <span class="text-lg">🇹🇼</span>
                                 <span class="font-bold">繁體中文</span>
                                 @if(app()->getLocale() == 'zh_TW')
-                                    <svg class="ml-auto size-4 text-cyan-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+                                <svg class="ml-auto size-4 text-cyan-500" xmlns="http://www.w3.org/2000/svg" width="24"
+                                    height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"
+                                    stroke-linecap="round" stroke-linejoin="round">
+                                    <polyline points="20 6 9 17 4 12" />
+                                </svg>
                                 @endif
                             </a>
-                            <a href="{{ route('lang.switch', 'en') }}" class="flex items-center gap-x-3 py-2.5 px-3 rounded-xl text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 transition-colors {{ app()->getLocale() == 'en' ? 'bg-gray-50 dark:bg-gray-900/50' : '' }}">
+                            <a href="{{ route('lang.switch', 'en') }}"
+                                class="flex items-center gap-x-3 py-2.5 px-3 rounded-xl text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 transition-colors {{ app()->getLocale() == 'en' ? 'bg-gray-50 dark:bg-gray-900/50' : '' }}">
                                 <span class="text-lg">🇬🇧</span>
                                 <span class="font-bold">English</span>
                                 @if(app()->getLocale() == 'en')
-                                    <svg class="ml-auto size-4 text-cyan-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+                                <svg class="ml-auto size-4 text-cyan-500" xmlns="http://www.w3.org/2000/svg" width="24"
+                                    height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"
+                                    stroke-linecap="round" stroke-linejoin="round">
+                                    <polyline points="20 6 9 17 4 12" />
+                                </svg>
                                 @endif
                             </a>
-                            <a href="{{ route('lang.switch', 'ja') }}" class="flex items-center gap-x-3 py-2.5 px-3 rounded-xl text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 transition-colors {{ app()->getLocale() == 'ja' ? 'bg-gray-50 dark:bg-gray-900/50' : '' }}">
+                            <a href="{{ route('lang.switch', 'ja') }}"
+                                class="flex items-center gap-x-3 py-2.5 px-3 rounded-xl text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 transition-colors {{ app()->getLocale() == 'ja' ? 'bg-gray-50 dark:bg-gray-900/50' : '' }}">
                                 <span class="text-lg">🇯🇵</span>
                                 <span class="font-bold">日本語</span>
                                 @if(app()->getLocale() == 'ja')
-                                    <svg class="ml-auto size-4 text-cyan-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+                                <svg class="ml-auto size-4 text-cyan-500" xmlns="http://www.w3.org/2000/svg" width="24"
+                                    height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"
+                                    stroke-linecap="round" stroke-linejoin="round">
+                                    <polyline points="20 6 9 17 4 12" />
+                                </svg>
                                 @endif
                             </a>
                         </div>
                     </div>
 
                     <!-- Dark Mode Toggle -->
-                    <button type="button" 
-                            @click="darkMode = !darkMode; localStorage.setItem('darkMode', darkMode); document.documentElement.classList.toggle('dark', darkMode)"
-                            class="inline-flex flex-shrink-0 justify-center items-center gap-2 h-[2.375rem] w-[2.375rem] rounded-full font-medium bg-white text-gray-700 align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white transition-all text-xs dark:bg-gray-800 dark:hover:bg-slate-800 dark:text-gray-400 dark:hover:text-white dark:focus:ring-gray-700 dark:focus:ring-offset-gray-800">
-                        <svg x-show="!darkMode" class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-                            <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278zM4.858 1.311A7.269 7.269 0 0 0 1.025 7.71c0 4.02 3.279 7.276 7.319 7.276a7.316 7.316 0 0 0 5.205-2.162c-.337.042-.68.063-1.029.063-4.61 0-8.343-3.714-8.343-8.29 0-1.167.242-2.278.681-3.286z"/>
+                    <button type="button"
+                        @click="darkMode = !darkMode; localStorage.setItem('darkMode', darkMode); document.documentElement.classList.toggle('dark', darkMode)"
+                        class="inline-flex flex-shrink-0 justify-center items-center gap-2 h-[2.375rem] w-[2.375rem] rounded-full font-medium bg-white text-gray-700 align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white transition-all text-xs dark:bg-gray-800 dark:hover:bg-slate-800 dark:text-gray-400 dark:hover:text-white dark:focus:ring-gray-700 dark:focus:ring-offset-gray-800">
+                        <svg x-show="!darkMode" class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16"
+                            height="16" fill="currentColor" viewBox="0 0 16 16">
+                            <path
+                                d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278zM4.858 1.311A7.269 7.269 0 0 0 1.025 7.71c0 4.02 3.279 7.276 7.319 7.276a7.316 7.316 0 0 0 5.205-2.162c-.337.042-.68.063-1.029.063-4.61 0-8.343-3.714-8.343-8.29 0-1.167.242-2.278.681-3.286z" />
                         </svg>
-                        <svg x-show="darkMode" class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-                            <path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
+                        <svg x-show="darkMode" class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+                            fill="currentColor" viewBox="0 0 16 16">
+                            <path
+                                d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" />
                         </svg>
                     </button>
 
@@ -142,34 +168,52 @@
                         open: false, 
                         avatarUrl: '{{ Auth::user()->avatar_url }}' 
                     }" @avatar-updated.window="avatarUrl = $event.detail.url">
-                        <button type="button" @click="open = !open" @click.away="open = false" class="inline-flex flex-shrink-0 justify-center items-center gap-2 h-[2.375rem] w-[2.375rem] rounded-full font-medium bg-white text-gray-700 align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white transition-all text-xs dark:bg-gray-800 dark:hover:bg-slate-800 dark:text-gray-400 dark:hover:text-white dark:focus:ring-gray-700 dark:focus:ring-offset-gray-800">
-                            <img class="inline-block h-[2.375rem] w-[2.375rem] rounded-full ring-2 ring-white dark:ring-gray-800 object-cover" :src="avatarUrl" alt="{{ Auth::user()->name }}">
+                        <button type="button" @click="open = !open" @click.away="open = false"
+                            class="inline-flex flex-shrink-0 justify-center items-center gap-2 h-[2.375rem] w-[2.375rem] rounded-full font-medium bg-white text-gray-700 align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white transition-all text-xs dark:bg-gray-800 dark:hover:bg-slate-800 dark:text-gray-400 dark:hover:text-white dark:focus:ring-gray-700 dark:focus:ring-offset-gray-800">
+                            <img class="inline-block h-[2.375rem] w-[2.375rem] rounded-full ring-2 ring-white dark:ring-gray-800 object-cover"
+                                :src="avatarUrl" alt="{{ Auth::user()->name }}">
                         </button>
 
-                        <div x-show="open"
-                             x-transition:enter="transition ease-out duration-100"
-                             x-transition:enter-start="transform opacity-0 scale-95"
-                             x-transition:enter-end="transform opacity-100 scale-100"
-                             x-transition:leave="transition ease-in duration-75"
-                             x-transition:leave-start="transform opacity-100 scale-100"
-                             x-transition:leave-end="transform opacity-0 scale-95"
-                             class="absolute right-0 top-full mt-2 min-w-[15rem] bg-white shadow-xl rounded-2xl p-2 dark:bg-gray-800 dark:border dark:border-gray-700 z-50 border border-slate-100"
-                             x-cloak>
-                            <div class="py-3 px-5 -m-2 bg-slate-50 rounded-t-2xl dark:bg-slate-900/50 border-b border-slate-100 dark:border-slate-700">
-                                <p class="text-[11px] font-bold uppercase tracking-widest text-slate-500 dark:text-slate-400">{{ __('Signed in as') }}</p>
-                                <p class="text-sm font-bold text-slate-700 dark:text-slate-200 truncate">{{ Auth::user()->name }}</p>
+                        <div x-show="open" x-transition:enter="transition ease-out duration-100"
+                            x-transition:enter-start="transform opacity-0 scale-95"
+                            x-transition:enter-end="transform opacity-100 scale-100"
+                            x-transition:leave="transition ease-in duration-75"
+                            x-transition:leave-start="transform opacity-100 scale-100"
+                            x-transition:leave-end="transform opacity-0 scale-95"
+                            class="absolute right-0 top-full mt-2 min-w-[15rem] bg-white shadow-xl rounded-2xl p-2 dark:bg-gray-800 dark:border dark:border-gray-700 z-50 border border-slate-100"
+                            x-cloak>
+                            <div
+                                class="py-3 px-5 -m-2 bg-slate-50 rounded-t-2xl dark:bg-slate-900/50 border-b border-slate-100 dark:border-slate-700">
+                                <p
+                                    class="text-[11px] font-bold uppercase tracking-widest text-slate-500 dark:text-slate-400">
+                                    {{ __('Signed in as') }}</p>
+                                <p class="text-sm font-bold text-slate-700 dark:text-slate-200 truncate">{{
+                                    Auth::user()->name }}</p>
                                 <p class="text-xs font-medium text-slate-500 truncate">{{ Auth::user()->email }}</p>
                             </div>
                             <div class="mt-2 py-2">
-                                <a class="flex items-center gap-x-3.5 py-2.5 px-3 rounded-xl text-sm font-bold text-slate-700 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-slate-300 dark:hover:bg-gray-700 dark:hover:text-white transition-colors" href="{{ route('profile.edit') }}">
-                                    <svg class="flex-shrink-0 size-4 text-cyan-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+                                <a class="flex items-center gap-x-3.5 py-2.5 px-3 rounded-xl text-sm font-bold text-slate-700 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-slate-300 dark:hover:bg-gray-700 dark:hover:text-white transition-colors"
+                                    href="{{ route('profile.edit') }}">
+                                    <svg class="flex-shrink-0 size-4 text-cyan-500" xmlns="http://www.w3.org/2000/svg"
+                                        width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                        stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                                        <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
+                                        <circle cx="12" cy="7" r="4" />
+                                    </svg>
                                     {{ __('Account Settings') }}
                                 </a>
                                 <div class="my-2 border-t border-slate-100 dark:border-slate-700"></div>
                                 <form method="POST" action="{{ route('logout') }}">
                                     @csrf
-                                    <button type="submit" class="w-full flex items-center gap-x-3.5 py-2.5 px-3 rounded-xl text-sm font-bold text-rose-500 hover:bg-rose-50 dark:hover:bg-rose-500/10 transition-colors">
-                                        <svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/></svg>
+                                    <button type="submit"
+                                        class="w-full flex items-center gap-x-3.5 py-2.5 px-3 rounded-xl text-sm font-bold text-rose-500 hover:bg-rose-50 dark:hover:bg-rose-500/10 transition-colors">
+                                        <svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24"
+                                            height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                            stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                                            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+                                            <polyline points="16 17 21 12 16 7" />
+                                            <line x1="21" x2="9" y1="12" y2="12" />
+                                        </svg>
                                         {{ __('Logout') }}
                                     </button>
                                 </form>
@@ -184,13 +228,15 @@
 
     <!-- ========== MAIN CONTENT ========== -->
     <!-- Sidebar Toggle (Mobile) -->
-    <div class="sticky top-[3.75rem] inset-x-0 z-20 bg-white border-y px-4 sm:px-6 md:px-8 lg:hidden dark:bg-gray-800 dark:border-gray-700">
+    <div
+        class="sticky top-[3.75rem] inset-x-0 z-20 bg-white border-y px-4 sm:px-6 md:px-8 lg:hidden dark:bg-gray-800 dark:border-gray-700">
         <div class="flex items-center py-4">
             <!-- Navigation Toggle -->
             <button type="button" class="text-gray-500 hover:text-gray-600" @click="sidebarOpen = !sidebarOpen">
                 <span class="sr-only">Toggle Navigation</span>
                 <svg class="w-5 h-5" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-                    <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
+                    <path fill-rule="evenodd"
+                        d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
                 </svg>
             </button>
             <!-- End Navigation Toggle -->
@@ -203,58 +249,61 @@
     <!-- End Sidebar Toggle -->
 
     <!-- Sidebar -->
-    <div id="application-sidebar" 
-         class="fixed top-0 left-0 bottom-0 z-[60] bg-white dark:bg-[#0f172a] pt-5 pb-10 border-e border-slate-200 dark:border-none overflow-y-auto overflow-x-hidden transition-all duration-300 transform lg:translate-x-0 shadow-xl dark:shadow-2xl flex flex-col"
-         :class="[
+    <div id="application-sidebar"
+        class="fixed top-0 left-0 bottom-0 z-[60] bg-white dark:bg-[#0f172a] pt-5 pb-10 border-e border-slate-200 dark:border-none overflow-y-auto overflow-x-hidden transition-all duration-300 transform lg:translate-x-0 shadow-xl dark:shadow-2xl flex flex-col"
+        :class="[
             sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0',
             sidebarCollapsed ? 'w-[60px]' : 'w-56'
          ]">
-        
+
         <!-- Close Button (Mobile) -->
-        <button type="button" @click="sidebarOpen = false" class="absolute top-4 right-4 text-slate-500 hover:text-slate-800 lg:hidden dark:text-slate-400 dark:hover:text-slate-200">
+        <button type="button" @click="sidebarOpen = false"
+            class="absolute top-4 right-4 text-slate-500 hover:text-slate-800 lg:hidden dark:text-slate-400 dark:hover:text-slate-200">
             <span class="sr-only">Close sidebar</span>
-            <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                stroke="currentColor" stroke-width="2">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
             </svg>
         </button>
-        
+
         <!-- Sidebar Header (Logo & Toggle) -->
         <div class="mb-8 mt-2 flex items-center h-8 transition-all duration-300 shrink-0 w-full"
-             :class="sidebarCollapsed ? 'px-[14px]' : 'px-4'">
-            
+            :class="sidebarCollapsed ? 'px-[14px]' : 'px-4'">
+
             <!-- Logo (Hidden when collapsed to save space) -->
-            <a class="flex items-center gap-x-2 text-xl font-bold text-slate-900 dark:text-white font-display tracking-tight whitespace-nowrap overflow-hidden transition-all duration-300" 
-               href="{{ route('admin.dashboard') }}" aria-label="Brand"
-               :class="sidebarCollapsed ? 'max-w-0 opacity-0' : 'max-w-[200px] opacity-100'">
-                <img src="{{ asset('S1_cropped_transparent.png') }}" alt="{{ config('app.name') }} Logo" class="w-8 h-8 object-contain shrink-0">
+            <a class="flex items-center gap-x-2 text-xl font-bold text-slate-900 dark:text-white font-display tracking-tight whitespace-nowrap overflow-hidden transition-all duration-300"
+                href="{{ route('admin.dashboard') }}" aria-label="Brand"
+                :class="sidebarCollapsed ? 'max-w-0 opacity-0' : 'max-w-[200px] opacity-100'">
+                <img src="{{ asset('S1_cropped_transparent.png') }}" alt="{{ config('app.name') }} Logo"
+                    class="w-8 h-8 object-contain shrink-0">
                 <span>Star<span class="text-cyan-500">Cloud</span></span>
             </a>
-            
+
             <div class="flex-1 transition-all duration-300"></div>
 
             <!-- Unified Toggle Button (Inside Sidebar) -->
-            <button type="button" @click="sidebarCollapsed = !sidebarCollapsed" 
-                    x-cloak
-                    class="hidden lg:flex items-center justify-center size-8 rounded-xl bg-slate-50 dark:bg-slate-800/80 text-slate-400 hover:bg-cyan-500 hover:text-white border border-slate-200 dark:border-slate-700 transition-all shrink-0">
-                <svg class="size-4.5 transition-transform duration-500" 
-                     :class="sidebarCollapsed ? 'rotate-180' : ''" 
-                     xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="m11 17-5-5 5-5M18 17l-5-5 5-5"/>
+            <button type="button" @click="sidebarCollapsed = !sidebarCollapsed" x-cloak
+                class="hidden lg:flex items-center justify-center size-8 rounded-xl bg-slate-50 dark:bg-slate-800/80 text-slate-400 hover:bg-cyan-500 hover:text-white border border-slate-200 dark:border-slate-700 transition-all shrink-0">
+                <svg class="size-4.5 transition-transform duration-500" :class="sidebarCollapsed ? 'rotate-180' : ''"
+                    xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="m11 17-5-5 5-5M18 17l-5-5 5-5" />
                 </svg>
             </button>
         </div>
 
-        <nav class="px-4 py-2 w-full flex flex-col flex-wrap transition-all duration-300 flex-1" :class="sidebarCollapsed ? 'px-2' : 'px-5'">
+        <nav class="px-4 py-2 w-full flex flex-col flex-wrap transition-all duration-300 flex-1"
+            :class="sidebarCollapsed ? 'px-2' : 'px-5'">
             <ul class="space-y-1.5">
                 @include('layouts.partials.sidebar-menu')
             </ul>
         </nav>
     </div>
     <!-- End Sidebar -->
-    
+
     <!-- Content -->
     <div class="w-full pt-4 lg:pt-5 pb-12 px-4 sm:px-6 md:px-8 transition-all duration-300"
-         :class="sidebarCollapsed ? 'lg:pl-24' : 'lg:pl-[256px]'">
+        :class="sidebarCollapsed ? 'lg:pl-24' : 'lg:pl-[256px]'">
         <x-breadcrumbs class="mb-4 hidden lg:flex" />
         <main class="animate-fade-up">
             @yield('content')
@@ -266,4 +315,5 @@
 
     @yield('scripts')
 </body>
-</html>
+
+</html>
\ No newline at end of file