style: custom CSS theme with top navigation from HTML design tokens

- Custom Filament CSS: Material colors (#0058be primary), Manrope/Inter fonts
- Top navigation bar 56px, white bg, border-bottom
- Sharper border-radius, custom badge colors, form input styling
- Similar Cases & Attachment Links redesigned to match HTML mockups
- AdminPanelProvider: topNavigation(), custom colors, renderHook CSS injection
- Dark mode overrides included

app/Providers/Filament/AdminPanelProvider.php

@@ -7,16 +7,20 @@ use Filament\Http\Middleware\AuthenticateSession;
 use Filament\Http\Middleware\DisableBladeIconComponents;
 use Filament\Http\Middleware\DispatchServingFilamentEvent;
 use Filament\Navigation\NavigationGroup;
+use Filament\Navigation\NavigationItem;
 use Filament\Pages\Dashboard;
 use Filament\Panel;
 use Filament\PanelProvider;
 use Filament\Support\Colors\Color;
+use Filament\Support\Facades\FilamentView;
+use Filament\View\PanelsRenderHook;
 use Filament\Widgets\AccountWidget;
 use Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse;
 use Illuminate\Cookie\Middleware\EncryptCookies;
 use Illuminate\Foundation\Http\Middleware\PreventRequestForgery;
 use Illuminate\Routing\Middleware\SubstituteBindings;
 use Illuminate\Session\Middleware\StartSession;
+use Illuminate\Support\Facades\Blade;
 use Illuminate\View\Middleware\ShareErrorsFromSession;
 
 class AdminPanelProvider extends PanelProvider
@@ -29,9 +33,17 @@ class AdminPanelProvider extends PanelProvider
             ->path('admin')
             ->login()
             ->brandName('AfterSales CRM')
+            ->topNavigation()
             ->colors([
-                'primary' => Color::Blue,
+                'primary' => '#0058be',
+                'secondary' => '#585f6c',
+                'gray' => '#585f6c',
+                'success' => '#10b981',
+                'warning' => '#f59e0b',
+                'danger' => '#ba1a1a',
+                'info' => '#3b82f6',
             ])
+            ->font('Inter')
             ->discoverResources(in: app_path('Filament/Resources'), for: 'App\Filament\Resources')
             ->discoverPages(in: app_path('Filament/Pages'), for: 'App\Filament\Pages')
             ->pages([
@@ -60,6 +72,14 @@ class AdminPanelProvider extends PanelProvider
             ])
             ->authMiddleware([
                 Authenticate::class,
-            ]);
+            ])
+            ->renderHook(
+                PanelsRenderHook::HEAD_END,
+                fn (): string => '<link rel="stylesheet" href="' . asset('css/filament-custom.css') . '">',
+            )
+            ->renderHook(
+                PanelsRenderHook::BODY_END,
+                fn (): string => '<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">',
+            );
     }
 }

public/css/filament-custom.css

@@ -0,0 +1,497 @@
+/* ================================================================
+   AfterSales CRM — Custom Filament Theme
+   Derived from Material Design tokens in webappUI/ HTML designs
+   ================================================================ */
+
+/* ---------- Google Fonts ---------- */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@500;600;700;800&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');
+
+/* ---------- CSS Variables (Design Tokens from HTML) ---------- */
+:root {
+    /* Primary palette */
+    --crm-primary: #0058be;
+    --crm-primary-hover: #2170e4;
+    --crm-primary-container: #2170e4;
+    --crm-on-primary: #ffffff;
+    --crm-on-primary-container: #fefcff;
+    --crm-primary-fixed: #d8e2ff;
+    --crm-primary-fixed-dim: #adc6ff;
+    --crm-on-primary-fixed: #001a42;
+    --crm-on-primary-fixed-variant: #004395;
+    --crm-inverse-primary: #adc6ff;
+
+    /* Secondary palette */
+    --crm-secondary: #585f6c;
+    --crm-secondary-container: #dce2f3;
+    --crm-on-secondary: #ffffff;
+    --crm-on-secondary-container: #5e6572;
+    --crm-secondary-fixed: #dce2f3;
+    --crm-secondary-fixed-dim: #c0c7d6;
+    --crm-on-secondary-fixed: #151c27;
+    --crm-on-secondary-fixed-variant: #404754;
+
+    /* Tertiary */
+    --crm-tertiary: #924700;
+    --crm-tertiary-container: #b75b00;
+    --crm-tertiary-fixed: #ffdcc6;
+    --crm-tertiary-fixed-dim: #ffb786;
+
+    /* Surface / Background */
+    --crm-background: #f9f9ff;
+    --crm-surface: #f9f9ff;
+    --crm-surface-bright: #f9f9ff;
+    --crm-surface-dim: #d8d9e3;
+    --crm-surface-container: #ecedf7;
+    --crm-surface-container-low: #f2f3fd;
+    --crm-surface-container-lowest: #ffffff;
+    --crm-surface-container-high: #e6e7f2;
+    --crm-surface-container-highest: #e1e2ec;
+    --crm-surface-variant: #e1e2ec;
+    --crm-surface-tint: #005ac2;
+
+    /* Text on surface */
+    --crm-on-surface: #191b23;
+    --crm-on-surface-variant: #424754;
+    --crm-on-background: #191b23;
+    --crm-inverse-surface: #2e3038;
+    --crm-inverse-on-surface: #eff0fa;
+
+    /* Borders / Outlines */
+    --crm-outline: #727785;
+    --crm-outline-variant: #c2c6d6;
+
+    /* Error */
+    --crm-error: #ba1a1a;
+    --crm-error-container: #ffdad6;
+    --crm-on-error: #ffffff;
+    --crm-on-error-container: #93000a;
+
+    /* Spacing */
+    --crm-nav-height: 56px;
+    --crm-margin-x: 1.5rem;
+    --crm-gutter: 1rem;
+    --crm-stack-gap: 1.5rem;
+    --crm-form-gap: 1.25rem;
+    --crm-container-max: 1280px;
+
+    /* Radius */
+    --crm-radius: 0.125rem;
+    --crm-radius-lg: 0.25rem;
+    --crm-radius-xl: 0.5rem;
+    --crm-radius-full: 0.75rem;
+
+    /* Font */
+    --crm-font-heading: 'Manrope', sans-serif;
+    --crm-font-body: 'Inter', sans-serif;
+}
+
+/* ---------- Override Filament Defaults ---------- */
+
+/* Force font family everywhere */
+.fi-body,
+.fi-main,
+.fi-sidebar,
+.fi-topbar,
+body {
+    font-family: var(--crm-font-body) !important;
+}
+
+.fi-header h1,
+.fi-header h2,
+.fi-header h3,
+.fi-widget-heading,
+.fi-section-header h3,
+.fi-modal-heading,
+h1, h2, h3 {
+    font-family: var(--crm-font-heading) !important;
+}
+
+/* Override Filament primary colors */
+.fi-btn.fi-color {
+    --c-500: var(--crm-primary);
+    --c-600: var(--crm-primary-hover);
+}
+
+.fi-btn.fi-btn-color-primary {
+    background-color: var(--crm-primary) !important;
+    border-radius: var(--crm-radius) !important;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
+    font-family: var(--crm-font-body) !important;
+    font-weight: 500 !important;
+    font-size: 14px !important;
+}
+
+.fi-btn.fi-btn-color-primary:hover {
+    background-color: var(--crm-primary-hover) !important;
+    filter: brightness(1.1);
+}
+
+/* Sharper border radius globally */
+.fi-card,
+.fi-ta-ctn,
+.fi-fo-tabs,
+.fi-modal-window,
+.fi-dropdown-panel,
+.fi-section,
+input, select, textarea {
+    border-radius: var(--crm-radius) !important;
+}
+
+/* Card/section borders */
+.fi-card {
+    border: 1px solid var(--crm-outline-variant) !important;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
+    border-radius: var(--crm-radius-xl) !important;
+}
+
+/* Page background */
+body {
+    background-color: var(--crm-background) !important;
+    color: var(--crm-on-background) !important;
+}
+
+/* ---------- TOP NAVIGATION BAR ---------- */
+.fi-top-nav {
+    height: var(--crm-nav-height) !important;
+    background-color: var(--crm-surface-container-lowest) !important;
+    border-bottom: 1px solid var(--crm-outline-variant) !important;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
+    font-family: var(--crm-font-body) !important;
+}
+
+.fi-top-nav .fi-top-nav-item a {
+    font-size: 14px !important;
+    font-weight: 500 !important;
+    color: var(--crm-on-surface-variant) !important;
+    transition: color 0.2s !important;
+}
+
+.fi-top-nav .fi-top-nav-item a:hover {
+    color: var(--crm-primary) !important;
+}
+
+.fi-top-nav .fi-top-nav-item-active a {
+    color: var(--crm-primary) !important;
+    border-bottom: 2px solid var(--crm-primary) !important;
+}
+
+/* Brand name in top nav */
+.fi-top-nav .fi-logo {
+    font-family: var(--crm-font-heading) !important;
+    font-weight: 700 !important;
+    font-size: 20px !important;
+    color: var(--crm-primary) !important;
+}
+
+/* ---------- MAIN CONTENT AREA ---------- */
+.fi-main {
+    background: var(--crm-background) !important;
+}
+
+.fi-main-ctn {
+    max-width: var(--crm-container-max) !important;
+    margin-left: auto !important;
+    margin-right: auto !important;
+    padding-left: var(--crm-margin-x) !important;
+    padding-right: var(--crm-margin-x) !important;
+    padding-top: 1.5rem !important;
+}
+
+/* ---------- TABLES ---------- */
+.fi-ta {
+    border-radius: var(--crm-radius-xl) !important;
+    border: 1px solid var(--crm-outline-variant) !important;
+    background: var(--crm-surface-container-lowest) !important;
+}
+
+.fi-ta-header {
+    background: var(--crm-surface-container-low) !important;
+    border-bottom: 1px solid var(--crm-outline-variant) !important;
+}
+
+.fi-ta-header-cell {
+    font-family: var(--crm-font-body) !important;
+    font-size: 12px !important;
+    font-weight: 600 !important;
+    color: var(--crm-on-surface-variant) !important;
+    text-transform: none !important;
+    padding: 12px 16px !important;
+}
+
+.fi-ta-row {
+    border-bottom: 1px solid var(--crm-outline-variant) !important;
+}
+
+.fi-ta-row:hover {
+    background: var(--crm-surface-container-low) !important;
+}
+
+.fi-ta-cell {
+    font-family: var(--crm-font-body) !important;
+    font-size: 14px !important;
+    color: var(--crm-on-surface) !important;
+    padding: 12px 16px !important;
+}
+
+/* ---------- STATUS BADGES ---------- */
+.fi-badge {
+    border-radius: 4px !important;
+    font-size: 11px !important;
+    font-weight: 600 !important;
+}
+
+/* Pending - amber */
+.fi-badge-color-warning {
+    background-color: #fff8e1 !important;
+    color: #b45309 !important;
+    border: 1px solid #fde68a !important;
+}
+
+/* Processing - blue */
+.fi-badge-color-info {
+    background-color: #d8e2ff !important;
+    color: #004395 !important;
+    border: 1px solid #adc6ff !important;
+}
+
+/* Resolved - green */
+.fi-badge-color-success {
+    background-color: #ecfdf5 !important;
+    color: #047857 !important;
+    border: 1px solid #a7f3d0 !important;
+}
+
+/* Closed - gray */
+.fi-badge-color-gray {
+    background-color: #f3f4f6 !important;
+    color: #374151 !important;
+    border: 1px solid #d1d5db !important;
+}
+
+/* Tag badges */
+.fi-ta-tags .fi-badge {
+    background-color: var(--crm-surface-container-high) !important;
+    color: var(--crm-on-surface-variant) !important;
+    border: 1px solid var(--crm-outline-variant) !important;
+    border-radius: 2px !important;
+    font-size: 10px !important;
+    padding: 1px 6px !important;
+}
+
+/* ---------- FORM COMPONENTS ---------- */
+.fi-fo-field-label {
+    font-family: var(--crm-font-body) !important;
+    font-size: 14px !important;
+    font-weight: 600 !important;
+    color: var(--crm-on-surface) !important;
+}
+
+.fi-input-wrp input,
+.fi-input-wrp select,
+.fi-input-wrp textarea,
+.fi-select-input,
+select {
+    border: 1px solid var(--crm-outline-variant) !important;
+    border-radius: var(--crm-radius) !important;
+    background: var(--crm-surface-container-lowest) !important;
+    color: var(--crm-on-surface) !important;
+    font-family: var(--crm-font-body) !important;
+    font-size: 14px !important;
+    padding: 8px 12px !important;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
+}
+
+.fi-input-wrp input:focus,
+.fi-input-wrp select:focus,
+.fi-input-wrp textarea:focus {
+    border-color: var(--crm-primary) !important;
+    box-shadow: 0 0 0 3px rgba(0,88,190,0.15) !important;
+    ring: 2px !important;
+}
+
+/* Form sections */
+.fi-section {
+    border: 1px solid var(--crm-outline-variant) !important;
+    border-radius: var(--crm-radius-xl) !important;
+    background: var(--crm-surface-container-lowest) !important;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
+}
+
+.fi-section-header {
+    padding: 16px 24px !important;
+    border-bottom: 1px solid rgba(194,198,214,0.5) !important;
+    background: rgba(249,249,255,0.5) !important;
+}
+
+/* ---------- STAT CARDS (Dashboard) ---------- */
+.fi-wi-stats-overview-stat {
+    background: var(--crm-surface-container-lowest) !important;
+    border: 1px solid var(--crm-outline-variant) !important;
+    border-radius: var(--crm-radius-xl) !important;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
+    padding: 20px !important;
+}
+
+.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value {
+    font-family: var(--crm-font-heading) !important;
+    font-size: 32px !important;
+    font-weight: 700 !important;
+    color: var(--crm-on-background) !important;
+}
+
+.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label {
+    font-family: var(--crm-font-body) !important;
+    font-size: 14px !important;
+    font-weight: 600 !important;
+    color: var(--crm-on-surface-variant) !important;
+}
+
+/* ---------- PAGE HEADER (breadcrumb + title) ---------- */
+.fi-header {
+    margin-bottom: var(--crm-stack-gap) !important;
+}
+
+.fi-breadcrumbs a,
+.fi-breadcrumbs span {
+    font-size: 12px !important;
+    color: var(--crm-on-surface-variant) !important;
+}
+
+/* ---------- TABS ---------- */
+.fi-tabs {
+    border-bottom: 1px solid var(--crm-outline-variant) !important;
+    gap: 1.5rem !important;
+}
+
+.fi-tabs .fi-tabs-item {
+    padding-bottom: 12px !important;
+    font-family: var(--crm-font-body) !important;
+    font-size: 14px !important;
+    font-weight: 600 !important;
+    color: var(--crm-secondary) !important;
+}
+
+.fi-tabs .fi-tabs-item-active {
+    color: var(--crm-primary) !important;
+    border-bottom: 2px solid var(--crm-primary) !important;
+}
+
+/* ---------- MODALS ---------- */
+.fi-modal-window {
+    border-radius: var(--crm-radius-xl) !important;
+    border: 1px solid var(--crm-outline-variant) !important;
+    box-shadow: 0 20px 25px rgba(0,0,0,0.1) !important;
+}
+
+.fi-modal-heading {
+    font-family: var(--crm-font-heading) !important;
+    font-size: 18px !important;
+    font-weight: 600 !important;
+}
+
+/* ---------- DELETE / DANGER BUTTONS ---------- */
+.fi-btn.fi-btn-color-danger {
+    border: 1px solid rgba(186,26,26,0.3) !important;
+    background: var(--crm-surface-container-lowest) !important;
+    color: var(--crm-error) !important;
+    border-radius: var(--crm-radius) !important;
+    font-weight: 500 !important;
+}
+
+.fi-btn.fi-btn-color-danger:hover {
+    background: var(--crm-error-container) !important;
+}
+
+/* ---------- SECONDARY / OUTLINED BUTTONS ---------- */
+.fi-btn.fi-btn-color-gray,
+.fi-btn.fi-btn-color-secondary {
+    background: var(--crm-surface-container-lowest) !important;
+    border: 1px solid var(--crm-outline-variant) !important;
+    color: var(--crm-secondary) !important;
+    border-radius: var(--crm-radius) !important;
+    font-family: var(--crm-font-body) !important;
+    font-weight: 500 !important;
+    font-size: 14px !important;
+}
+
+.fi-btn.fi-btn-color-gray:hover,
+.fi-btn.fi-btn-color-secondary:hover {
+    background: var(--crm-surface-variant) !important;
+}
+
+/* ---------- TOGGLE SWITCH ---------- */
+.fi-toggle .fi-toggle-input:checked ~ .fi-toggle-bg {
+    background-color: var(--crm-primary) !important;
+}
+
+/* ---------- CHECKBOX ---------- */
+.fi-checkbox-input:checked {
+    background-color: var(--crm-primary) !important;
+    border-color: var(--crm-primary) !important;
+}
+
+/* ---------- FILTER BAR ---------- */
+.fi-filters {
+    background: var(--crm-surface-container-lowest) !important;
+    border: 1px solid var(--crm-outline-variant) !important;
+    border-radius: var(--crm-radius-lg) !important;
+    padding: 1rem !important;
+    margin-bottom: var(--crm-stack-gap) !important;
+}
+
+/* ---------- PAGINATION ---------- */
+.fi-pagination .fi-pagination-item-active {
+    background-color: var(--crm-primary) !important;
+    color: var(--crm-on-primary) !important;
+    border-radius: var(--crm-radius) !important;
+}
+
+/* ---------- SIDEBAR (hide since we use top nav) ---------- */
+.fi-sidebar {
+    display: none !important;
+}
+
+/* Adjust main content when sidebar is hidden */
+.fi-main-ctn {
+    padding-left: var(--crm-margin-x) !important;
+}
+
+/* ---------- NOTIFICATION BELL ---------- */
+.fi-icon-btn {
+    color: var(--crm-on-surface-variant) !important;
+}
+
+.fi-icon-btn:hover {
+    color: var(--crm-primary) !important;
+}
+
+/* ---------- USER MENU ---------- */
+.fi-user-menu .fi-user-menu-trigger {
+    font-family: var(--crm-font-body) !important;
+    font-size: 14px !important;
+}
+
+/* ---------- DARK MODE OVERRIDES ---------- */
+.dark, [class*="dark"] {
+    --crm-background: #0f172a;
+    --crm-surface-container-lowest: #1e293b;
+    --crm-surface-container-high: #334155;
+    --crm-surface-variant: #334155;
+    --crm-on-surface: #e2e8f0;
+    --crm-on-surface-variant: #94a3b8;
+    --crm-on-background: #e2e8f0;
+    --crm-outline-variant: #475569;
+}
+
+/* ---------- FIX: remove Filament's default blue backgrounds ---------- */
+.fi-sidebar, .fi-topbar {
+    background-color: var(--crm-surface-container-lowest) !important;
+}
+
+/* ---------- Similar Cases footer panel ---------- */
+.fi-footer {
+    margin-top: 2rem;
+    background: var(--crm-surface-container-lowest) !important;
+    border: 1px solid var(--crm-outline-variant) !important;
+    border-radius: var(--crm-radius-xl) !important;
+}

resources/views/filament/resources/feedback/attachment-links.blade.php

@@ -1,42 +1,40 @@
-<div style="padding: 1rem;">
+<div class="p-4">
     @if(empty($links) || count($links) === 0)
-        <p>No attachments.</p>
+        <p class="text-sm text-gray-500 py-8 text-center">No attachments.</p>
     @else
-        <table style="width: 100%; border-collapse: collapse;">
+        <table class="w-full text-left border-collapse">
             <thead>
-                <tr style="border-bottom: 2px solid #e5e7eb;">
+                <tr class="border-b-2 border-gray-200">
-                    <th style="text-align: left; padding: 8px;">File</th>
+                    <th class="text-left py-2 px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">File</th>
-                    <th style="text-align: left; padding: 8px;">Collection</th>
+                    <th class="text-left py-2 px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Collection</th>
-                    <th style="text-align: left; padding: 8px;">Size</th>
+                    <th class="text-left py-2 px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Size</th>
-                    <th style="text-align: right; padding: 8px;">Action</th>
+                    <th class="text-right py-2 px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Action</th>
                 </tr>
             </thead>
             <tbody>
                 @foreach($links as $link)
-                <tr style="border-bottom: 1px solid #f3f4f6;">
+                <tr class="border-b border-gray-100 hover:bg-gray-50/50 transition-colors">
-                    <td style="padding: 8px;">{{ $link['name'] }}</td>
+                    <td class="py-3 px-3 text-sm text-gray-900 font-medium">{{ $link['name'] }}</td>
-                    <td style="padding: 8px;">
+                    <td class="py-3 px-3">
-                        <span style="
+                        @if($link['collection'] === 'proof_of_resolution')
-                            display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 12px;
+                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-green-100 text-green-700 border border-green-200">proof_of_resolution</span>
-                            @if($link['collection'] === 'proof_of_resolution') background: #dcfce7; color: #166534;
+                        @elseif($link['collection'] === 'customer_evidence')
-                            @elseif($link['collection'] === 'customer_evidence') background: #dbeafe; color: #1e40af;
+                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-blue-100 text-blue-700 border border-blue-200">customer_evidence</span>
-                            @else background: #f3f4f6; color: #374151;
+                        @else
-                            @endif
+                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-gray-100 text-gray-600 border border-gray-200">{{ $link['collection'] }}</span>
-                        ">
+                        @endif
-                            {{ $link['collection'] }}
-                        </span>
                     </td>
-                    <td style="padding: 8px;">{{ $link['size'] }}</td>
+                    <td class="py-3 px-3 text-sm text-gray-500">{{ $link['size'] }}</td>
-                    <td style="padding: 8px; text-align: right;">
+                    <td class="py-3 px-3 text-right">
-                        <a href="{{ $link['url'] }}" target="_blank" style="
+                        <a href="{{ $link['url'] }}" target="_blank"
-                            display: inline-block; padding: 4px 12px; border-radius: 6px;
+                           class="inline-flex items-center px-3 py-1.5 rounded text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 transition-colors shadow-sm no-underline">
-                            background: #3b82f6; color: white; text-decoration: none; font-size: 13px;
+                            Download
-                        ">Download</a>
+                        </a>
                     </td>
                 </tr>
                 @endforeach
             </tbody>
         </table>
-        <p style="margin-top: 12px; font-size: 12px; color: #6b7280;">Links expire after 60 minutes.</p>
+        <p class="mt-4 text-xs text-gray-500">Links expire after 60 minutes.</p>
     @endif
 </div>

resources/views/filament/resources/feedback/similar-cases.blade.php

@@ -15,48 +15,55 @@
 @endphp
 
 @if($similarCases->isNotEmpty())
-<div class="p-6 bg-white rounded-xl shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10">
+<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden mt-8">
-    <h3 class="text-lg font-semibold text-gray-950 dark:text-white mb-4">
+    <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex justify-between items-center">
-        Similar Cases (shared tags)
+        <h3 class="font-semibold text-lg text-gray-900 flex items-center gap-2" style="font-family: 'Manrope', sans-serif;">
-    </h3>
+            <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
-    <div class="overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700">
+            Similar Cases
-        <table class="w-full text-sm text-left">
+        </h3>
-            <thead class="bg-gray-50 dark:bg-gray-800">
+        <span class="text-xs text-gray-500">Matching tags: {{ $record->tags->pluck('name')->implode(', ') }}</span>
-                <tr>
+    </div>
-                    <th class="px-4 py-3 font-medium">Title</th>
+    <div class="overflow-x-auto">
-                    <th class="px-4 py-3 font-medium">Customer</th>
+        <table class="w-full text-left border-collapse">
-                    <th class="px-4 py-3 font-medium">Status</th>
+            <thead>
-                    <th class="px-4 py-3 font-medium">Assigned To</th>
+                <tr class="bg-gray-50 border-b border-gray-200">
-                    <th class="px-4 py-3 font-medium">Date</th>
+                    <th class="px-6 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Title</th>
+                    <th class="px-6 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Customer</th>
+                    <th class="px-6 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</th>
+                    <th class="px-6 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Handler</th>
+                    <th class="px-6 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Date</th>
                 </tr>
             </thead>
-            <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
+            <tbody class="divide-y divide-gray-100">
                 @foreach($similarCases as $case)
-                <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50">
+                <tr class="hover:bg-gray-50/50 transition-colors cursor-pointer"
-                    <td class="px-4 py-3">
+                    onclick="window.location='{{ \App\Filament\Resources\Feedback\FeedbackResource::getUrl('edit', ['record' => $case]) }}'">
-                        <a href="{{ \App\Filament\Resources\Feedback\FeedbackResource::getUrl('edit', ['record' => $case]) }}"
+                    <td class="px-6 py-4 text-sm text-gray-900 hover:text-blue-600 transition-colors font-medium">
-                           class="text-blue-600 dark:text-blue-400 hover:underline font-medium">
+                        {{ $case->title }}
-                            {{ $case->title }}
-                        </a>
                     </td>
-                    <td class="px-4 py-3 text-gray-600 dark:text-gray-400">
+                    <td class="px-6 py-4 text-sm text-gray-600">
                         {{ $case->customer?->name }}
                     </td>
-                    <td class="px-4 py-3">
+                    <td class="px-6 py-4">
-                        <span class="px-2 py-1 text-xs rounded-full font-medium
+                        @switch($case->status)
-                            @switch($case->status)
+                            @case('pending')
-                                @case('pending') bg-yellow-100 text-yellow-800 @break
+                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-amber-50 text-amber-700 border border-amber-200">Pending</span>
-                                @case('processing') bg-blue-100 text-blue-800 @break
+                                @break
-                                @case('resolved') bg-green-100 text-green-800 @break
+                            @case('processing')
-                                @case('closed') bg-gray-100 text-gray-800 @break
+                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-blue-50 text-blue-700 border border-blue-200">Processing</span>
-                            @endswitch">
+                                @break
-                            {{ ucfirst($case->status) }}
+                            @case('resolved')
-                        </span>
+                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-green-50 text-green-700 border border-green-200">Resolved</span>
+                                @break
+                            @case('closed')
+                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-gray-100 text-gray-600 border border-gray-200">Closed</span>
+                                @break
+                        @endswitch
                     </td>
-                    <td class="px-4 py-3 text-gray-600 dark:text-gray-400">
+                    <td class="px-6 py-4 text-sm text-gray-600">
                         {{ $case->assignedTo?->name ?? 'Unassigned' }}
                     </td>
-                    <td class="px-4 py-3 text-gray-500 dark:text-gray-400">
+                    <td class="px-6 py-4 text-sm text-gray-500">
                         {{ $case->created_at->format('d/m/Y') }}
                     </td>
                 </tr>