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/spinner.blade.php

@@ -1,5 +1,6 @@
 {{--
-    Spinner Component - AdminLTE style
+    Spinner Component - LucentUI Theme
+    Migrated from AdminLTE to Tailwind
     
     Usage:
     <x-proxmox::ui.spinner />
@@ -12,43 +13,31 @@
 ])
 
 @php
-    $sizeStyles = [
-        'xs' => 'width: 0.75rem; height: 0.75rem;',
-        'sm' => 'width: 1rem; height: 1rem;',
-        'md' => 'width: 1.25rem; height: 1.25rem;',
-        'lg' => 'width: 1.5rem; height: 1.5rem;',
-        'xl' => 'width: 2rem; height: 2rem;',
+    $sizeClasses = [
+        'xs' => 'w-3 h-3',
+        'sm' => 'w-4 h-4',
+        'md' => 'w-5 h-5',
+        'lg' => 'w-6 h-6',
+        'xl' => 'w-8 h-8',
     ];
     
-    $colorStyles = [
-        'current' => 'color: currentColor;',
-        'primary' => 'color: var(--lte-primary, #0d6efd);',
-        'secondary' => 'color: var(--lte-secondary, #6c757d);',
-        'success' => 'color: var(--lte-success, #198754);',
-        'warning' => 'color: var(--lte-warning, #ffc107);',
-        'danger' => 'color: var(--lte-danger, #dc3545);',
-        'info' => 'color: var(--lte-info, #0dcaf0);',
-        'muted' => 'color: #adb5bd;',
+    $colorClasses = [
+        'current' => 'text-current',
+        'primary' => 'text-primary',
+        'secondary' => 'text-secondary',
+        'success' => 'text-success',
+        'warning' => 'text-warning',
+        'danger' => 'text-error',
+        'info' => 'text-info',
+        'muted' => 'text-neutral',
     ];
     
-    $sizeStyle = $sizeStyles[$size] ?? $sizeStyles['md'];
-    $colorStyle = $colorStyles[$color] ?? $colorStyles['current'];
+    $sizeClass = $sizeClasses[$size] ?? $sizeClasses['md'];
+    $colorClass = $colorClasses[$color] ?? $colorClasses['current'];
 @endphp
 
-<style>
-    .spinner-lte {
-        animation: spin-lte 1s linear infinite;
-    }
-    @keyframes spin-lte {
-        from { transform: rotate(0deg); }
-        to { transform: rotate(360deg); }
-    }
-</style>
-
 <svg 
-    {{ $attributes }}
-    class="spinner-lte"
-    style="{{ $sizeStyle }} {{ $colorStyle }}"
+    {{ $attributes->class(['animate-spin', $sizeClass, $colorClass]) }}
     xmlns="http://www.w3.org/2000/svg" 
     fill="none" 
     viewBox="0 0 24 24"