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

@@ -1,5 +1,6 @@
 {{--
-    Tooltip Component - AdminLTE style
+    Tooltip Component - LucentUI Theme
+    Migrated from AdminLTE to Tailwind
     
     Usage:
     <x-proxmox::ui.tooltip text="This is a tooltip">
@@ -13,44 +14,19 @@
 ])
 
 @php
-    $positionStyles = [
-        'top' => 'bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 0.5rem;',
-        'bottom' => 'top: 100%; left: 50%; transform: translateX(-50%); margin-top: 0.5rem;',
-        'left' => 'right: 100%; top: 50%; transform: translateY(-50%); margin-right: 0.5rem;',
-        'right' => 'left: 100%; top: 50%; transform: translateY(-50%); margin-left: 0.5rem;',
+    $positionClasses = [
+        'top' => 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+        'bottom' => 'top-full left-1/2 -translate-x-1/2 mt-2',
+        'left' => 'right-full top-1/2 -translate-y-1/2 mr-2',
+        'right' => 'left-full top-1/2 -translate-y-1/2 ml-2',
     ];
 @endphp
 
-<style>
-    .tooltip-lte-wrapper {
-        position: relative;
-        display: inline-block;
-    }
-    .tooltip-lte {
-        position: absolute;
-        z-index: 1070;
-        pointer-events: none;
-    }
-    .tooltip-lte-inner {
-        padding: 0.375rem 0.75rem;
-        font-size: 0.8125rem;
-        font-weight: 500;
-        color: #fff;
-        background-color: #212529;
-        border-radius: var(--lte-border-radius, 0.375rem);
-        box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
-        white-space: nowrap;
-    }
-    .dark .tooltip-lte-inner {
-        background-color: #4b5563;
-    }
-</style>
-
 <div 
     x-data="{ show: false }"
     @mouseenter="show = true"
     @mouseleave="show = false"
-    class="tooltip-lte-wrapper"
+    class="relative inline-block"
     {{ $attributes }}
 >
     {{ $slot }}
@@ -64,10 +40,9 @@
         x-transition:leave="transition ease-in duration-100"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
-        class="tooltip-lte"
-        style="{{ $positionStyles[$position] ?? $positionStyles['top'] }}"
+        class="absolute z-[1070] pointer-events-none {{ $positionClasses[$position] ?? $positionClasses['top'] }}"
     >
-        <div class="tooltip-lte-inner">
+        <div class="px-3 py-1.5 text-xs font-medium text-white bg-gray-900 dark:bg-gray-600 rounded-lg shadow-lg whitespace-nowrap">
             {{ $text }}
         </div>
     </div>