Migrate UI components from AdminLTE to LucentUI Theme using Tailwind CSS

- Updated tab-panel component to use Tailwind for styling and transitions.
- Refactored table-row component to implement Tailwind classes for hover effects and borders.
- Converted table-td component to utilize Tailwind for alignment and text styles.
- Changed table-th component to apply Tailwind for header styling and sorting indicators.
- Revised table component to adopt Tailwind for layout, borders, and responsive design.
- Enhanced tabs component with Tailwind for navigation styles and transitions.
- Updated toggle component to use Tailwind for switch styles and accessibility.
- Refactored tooltip component to implement Tailwind for positioning and styling.
- Added visual enhancements to app.css for improved UI interactions and animations.

extensions/Servers/Proxmox/views/components/ui/empty-state.blade.php

@@ -1,5 +1,6 @@
 {{--
-    Empty State Component - AdminLTE style
+    Empty State Component - LucentUI Theme
+    Migrated from AdminLTE to Tailwind
     
     Usage:
     <x-proxmox::ui.empty-state title="No servers found" />
@@ -20,121 +21,36 @@
     'compact' => false,
 ])
 
-<style>
-    .empty-state-lte {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        text-align: center;
-    }
-    .empty-state-lte-regular {
-        padding: 3rem 1.5rem;
-    }
-    .empty-state-lte-compact {
-        padding: 1.5rem 1rem;
-    }
-    .empty-state-lte-icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-color: #f8f9fa;
-        border-radius: 50%;
-    }
-    .empty-state-lte-icon-regular {
-        width: 4rem;
-        height: 4rem;
-        margin-bottom: 1.25rem;
-    }
-    .empty-state-lte-icon-compact {
-        width: 2.75rem;
-        height: 2.75rem;
-        margin-bottom: 0.75rem;
-    }
-    .empty-state-lte-icon svg {
-        color: #adb5bd;
-    }
-    .empty-state-lte-icon-regular svg {
-        width: 2rem;
-        height: 2rem;
-    }
-    .empty-state-lte-icon-compact svg {
-        width: 1.25rem;
-        height: 1.25rem;
-    }
-    .empty-state-lte-title {
-        font-weight: 600;
-        color: #212529;
-    }
-    .empty-state-lte-title-regular {
-        font-size: 1.125rem;
-    }
-    .empty-state-lte-title-compact {
-        font-size: 0.875rem;
-    }
-    .empty-state-lte-description {
-        max-width: 24rem;
-        color: var(--lte-secondary, #6c757d);
-    }
-    .empty-state-lte-description-regular {
-        font-size: 0.875rem;
-        margin-top: 0.5rem;
-    }
-    .empty-state-lte-description-compact {
-        font-size: 0.8125rem;
-        margin-top: 0.25rem;
-    }
-    .empty-state-lte-actions-regular {
-        margin-top: 1.25rem;
-    }
-    .empty-state-lte-actions-compact {
-        margin-top: 0.75rem;
-    }
-    /* Dark mode */
-    .dark .empty-state-lte-icon {
-        background-color: #374151;
-    }
-    .dark .empty-state-lte-icon svg {
-        color: #6b7280;
-    }
-    .dark .empty-state-lte-title {
-        color: #f3f4f6;
-    }
-    .dark .empty-state-lte-description {
-        color: #9ca3af;
-    }
-</style>
-
 <div 
     {{ $attributes->class([
-        'empty-state-lte',
-        'empty-state-lte-regular' => !$compact,
-        'empty-state-lte-compact' => $compact,
+        'flex flex-col items-center justify-center text-center',
+        'py-12 px-6' => !$compact,
+        'py-6 px-4' => $compact,
     ]) }}
     x-data="{ loaded: false }"
     x-init="setTimeout(() => loaded = true, 100)"
     :class="loaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'"
-    style="transition: all 0.5s ease-out;"
+    class="transition-all duration-500 ease-out"
 >
     @if($icon)
-        <div class="empty-state-lte-icon {{ $compact ? 'empty-state-lte-icon-compact' : 'empty-state-lte-icon-regular' }} transition-transform duration-300 hover:scale-110"
+        <div class="flex items-center justify-center bg-background-secondary rounded-full transition-transform duration-300 hover:scale-110 {{ $compact ? 'size-11 mb-3' : 'size-16 mb-5' }}"
              :class="loaded ? 'scale-100' : 'scale-90'"
              style="transition: transform 0.5s ease-out 0.1s;">
             <x-dynamic-component 
                 :component="$icon" 
-                class="{{ $iconClass ?? '' }}"
+                class="text-base/50 {{ $iconClass ?? ($compact ? 'size-5' : 'size-8') }}"
             />
         </div>
     @endif
     
-    <h3 class="empty-state-lte-title {{ $compact ? 'empty-state-lte-title-compact' : 'empty-state-lte-title-regular' }}"
+    <h3 class="font-semibold text-base {{ $compact ? 'text-sm' : 'text-lg' }}"
         :class="loaded ? 'opacity-100' : 'opacity-0'"
         style="transition: opacity 0.4s ease-out 0.15s;">
         {{ $title }}
     </h3>
     
     @if($description)
-        <p class="empty-state-lte-description {{ $compact ? 'empty-state-lte-description-compact' : 'empty-state-lte-description-regular' }}"
+        <p class="max-w-sm text-base/60 {{ $compact ? 'text-xs mt-1' : 'text-sm mt-2' }}"
            :class="loaded ? 'opacity-100' : 'opacity-0'"
            style="transition: opacity 0.4s ease-out 0.25s;">
             {{ $description }}
@@ -142,7 +58,7 @@
     @endif
     
     @if($slot->isNotEmpty())
-        <div class="{{ $compact ? 'empty-state-lte-actions-compact' : 'empty-state-lte-actions-regular' }}"
+        <div class="{{ $compact ? 'mt-3' : 'mt-5' }}"
              :class="loaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2'"
              style="transition: all 0.4s ease-out 0.35s;">
             {{ $slot }}