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

@@ -1,5 +1,6 @@
 {{--
-    Table Header Cell Component - AdminLTE style
+    Table Header Cell Component - LucentUI Theme
+    Migrated from AdminLTE to Tailwind
 --}}
 
 @props([
@@ -11,77 +12,35 @@
 ])
 
 @php
-    $alignStyles = [
-        'start' => 'text-align: left; justify-content: flex-start;',
-        'center' => 'text-align: center; justify-content: center;',
-        'end' => 'text-align: right; justify-content: flex-end;',
+    $alignClasses = [
+        'start' => 'text-left justify-start',
+        'center' => 'text-center justify-center',
+        'end' => 'text-right justify-end',
     ];
-    $alignStyle = $alignStyles[$align] ?? $alignStyles['start'];
+    $alignClass = $alignClasses[$align] ?? $alignClasses['start'];
     
     $isSorted = $sortable && $sortKey === $currentSort;
+    
+    $baseClasses = 'px-5 py-3.5 text-xs font-semibold uppercase tracking-wider text-secondary dark:text-gray-400 bg-transparent align-middle whitespace-nowrap';
+    $sortableClasses = $sortable ? 'cursor-pointer select-none transition-colors duration-200 hover:text-primary dark:hover:text-primary' : '';
+    $sortedClasses = $isSorted ? 'text-primary dark:text-primary' : '';
 @endphp
 
-<style>
-    .table-th-lte {
-        padding: 0.875rem 1.25rem;
-        font-size: 0.75rem;
-        font-weight: 600;
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-        color: var(--lte-secondary, #6c757d);
-        background-color: transparent;
-        vertical-align: middle;
-        white-space: nowrap;
-    }
-    .table-th-lte-sortable {
-        cursor: pointer;
-        user-select: none;
-        transition: color var(--lte-transition-speed, 0.3s) ease;
-    }
-    .table-th-lte-sortable:hover {
-        color: var(--lte-primary, #0d6efd);
-    }
-    .table-th-lte-sorted {
-        color: var(--lte-primary, #0d6efd);
-    }
-    .table-th-lte-inner {
-        display: flex;
-        align-items: center;
-        gap: 0.375rem;
-    }
-    .table-th-lte-sort-icon {
-        display: inline-flex;
-        color: #adb5bd;
-    }
-    .table-th-lte-sorted .table-th-lte-sort-icon {
-        color: var(--lte-primary, #0d6efd);
-    }
-    .dark .table-th-lte {
-        color: #9ca3af;
-    }
-    .dark .table-th-lte-sortable:hover {
-        color: var(--lte-primary, #0d6efd);
-    }
-    .dark .table-th-lte-sort-icon {
-        color: #6b7280;
-    }
-</style>
-
 <th 
-    style="{{ $alignStyle }}"
     {{ $attributes->class([
-        'table-th-lte',
-        'table-th-lte-sortable' => $sortable,
-        'table-th-lte-sorted' => $isSorted,
+        $baseClasses,
+        $alignClass,
+        $sortableClasses,
+        $sortedClasses,
     ]) }}
     @if($sortable && $sortKey)
         wire:click="sort('{{ $sortKey }}')"
     @endif
 >
-    <div class="table-th-lte-inner" style="{{ $alignStyle }}">
+    <div class="flex items-center gap-1.5 {{ $alignClass }}">
         <span>{{ $slot }}</span>
         @if($sortable)
-            <span class="table-th-lte-sort-icon">
+            <span class="inline-flex {{ $isSorted ? 'text-primary' : 'text-secondary/50 dark:text-gray-500' }}">
                 @if($isSorted)
                     @if($currentDirection === 'asc')
                         <x-ri-arrow-up-s-line class="size-4" />