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

@@ -1,6 +1,6 @@
 {{--
-    Modal Component - AdminLTE Theme
-    Based on AdminLTE v4 Modal styling patterns
+    Modal Component - LucentUI Theme
+    Migrated from AdminLTE to Tailwind
     
     Usage:
     <x-proxmox::ui.modal name="my-modal" title="Modal Title">Content</x-proxmox::ui.modal>
@@ -14,7 +14,7 @@
     'title' => null,
     'subtitle' => null,
     'icon' => null,
-    'iconColor' => 'lte-text-primary',
+    'iconColor' => 'text-primary',
     'maxWidth' => 'md',
     'closeable' => true,
     'footer' => null,
@@ -55,7 +55,7 @@
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         @if($closeable) @click="show = false" @endif
-        class="lte-modal-backdrop backdrop-blur-sm"
+        class="fixed inset-0 bg-black/50 backdrop-blur-sm"
     ></div>
     
     {{-- Modal Panel --}}
@@ -69,44 +69,46 @@
             x-transition:leave-start="opacity-100 scale-100 translate-y-0"
             x-transition:leave-end="opacity-0 scale-95 translate-y-4"
             @click.stop
-            class="lte-modal-content lte-slide-in-up w-full {{ $maxWidthClass }} max-h-[90vh] overflow-y-auto shadow-2xl"
+            class="w-full {{ $maxWidthClass }} max-h-[90vh] overflow-y-auto bg-background dark:bg-gray-800 border border-neutral dark:border-gray-700 rounded-xl shadow-2xl"
         >
             {{-- Header --}}
             @if($title || $closeable)
-                <div class="lte-modal-header">
+                <div class="flex items-center justify-between p-5 border-b border-neutral dark:border-gray-700">
                     <div class="flex items-center gap-3">
                         @if($icon)
-                            <span class="lte-info-box-icon lte-bg-light rounded" style="width: 40px; height: 40px; font-size: 1rem;">
+                            <span class="flex items-center justify-center w-10 h-10 bg-background-secondary dark:bg-gray-700 rounded-lg">
                                 <x-dynamic-component :component="$icon" class="size-5 {{ $iconColor }}" />
                             </span>
                         @endif
                         <div>
                             @if($title)
-                                <h5 class="lte-modal-title">{{ $title }}</h5>
+                                <h5 class="text-lg font-semibold text-primary dark:text-gray-100">{{ $title }}</h5>
                             @endif
                             @if($subtitle)
-                                <p class="lte-text-muted" style="font-size: 0.875rem; margin: 0;">{{ $subtitle }}</p>
+                                <p class="text-sm text-secondary dark:text-gray-400 mt-0.5">{{ $subtitle }}</p>
                             @endif
                         </div>
                     </div>
                     @if($closeable)
                         <button 
                             @click="show = false" 
-                            class="lte-btn-close transition-all duration-200 hover:scale-110 hover:opacity-70"
+                            class="flex items-center justify-center w-8 h-8 rounded-lg text-secondary dark:text-gray-400 hover:bg-background-secondary dark:hover:bg-gray-700 hover:text-primary dark:hover:text-gray-100 transition-all duration-200"
                             aria-label="Close"
-                        ></button>
+                        >
+                            <x-ri-close-line class="size-5" />
+                        </button>
                     @endif
                 </div>
             @endif
             
             {{-- Content --}}
-            <div class="lte-modal-body">
+            <div class="p-5">
                 {{ $slot }}
             </div>
             
             {{-- Footer --}}
             @if($footer)
-                <div class="lte-modal-footer">
+                <div class="flex items-center justify-end gap-3 p-5 border-t border-neutral dark:border-gray-700">
                     {{ $footer }}
                 </div>
             @endif