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

@@ -1,6 +1,6 @@
 {{--
-    Badge Component - AdminLTE Theme
-    Based on AdminLTE v4 Badge styling patterns
+    Badge Component - LucentUI Theme
+    Migrated from AdminLTE to Tailwind
     
     Usage:
     <x-proxmox::ui.badge>Default</x-proxmox::ui.badge>
@@ -19,16 +19,23 @@
 
 @php
     $variantClasses = [
-        'default' => 'lte-badge-primary',
-        'primary' => 'lte-badge-primary',
-        'secondary' => 'lte-badge-secondary',
-        'success' => 'lte-badge-success',
-        'warning' => 'lte-badge-warning',
-        'danger' => 'lte-badge-danger',
-        'info' => 'lte-badge-info',
-        'light' => 'lte-badge-light',
-        'dark' => 'lte-badge-dark',
-        'muted' => 'lte-badge-secondary',
+        'default' => 'bg-primary/20 text-primary',
+        'primary' => 'bg-primary/20 text-primary',
+        'secondary' => 'bg-neutral/20 text-base/70',
+        'success' => 'bg-success/20 text-success',
+        'warning' => 'bg-warning/20 text-warning',
+        'danger' => 'bg-error/20 text-error',
+        'info' => 'bg-info/20 text-info',
+        'light' => 'bg-neutral/10 text-base/60',
+        'dark' => 'bg-neutral/80 text-white',
+        'muted' => 'bg-neutral/20 text-base/50',
+    ];
+    
+    $sizeClasses = [
+        'xs' => 'px-1.5 py-0.5 text-[10px]',
+        'sm' => 'px-2 py-0.5 text-xs',
+        'md' => 'px-2.5 py-1 text-xs',
+        'lg' => 'px-3 py-1.5 text-sm',
     ];
     
     $iconSizes = [
@@ -47,13 +54,15 @@
     
     $iconSize = $iconSizes[$size] ?? $iconSizes['md'];
     $dotSize = $dotSizes[$size] ?? $dotSizes['md'];
+    $badgeSize = $sizeClasses[$size] ?? $sizeClasses['md'];
 @endphp
 
 <span {{ $attributes->class([
-    'lte-badge',
+    'inline-flex items-center font-semibold rounded-full transition-all duration-200',
+    $badgeSize,
     $variantClasses[$variant] ?? $variantClasses['default'],
-    'gap-1' => $icon || $dot,
-]) }} style="{{ $size === 'lg' ? 'font-size: 0.9em; padding: 0.5em 0.8em;' : '' }}">
+    'gap-1.5' => $icon || $dot,
+]) }}>
     @if($dot)
         <span class="relative flex {{ $dotSize }}">
             @if($pulse)