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-td.blade.php

@@ -1,5 +1,6 @@
 {{--
-    Table Data Cell Component - AdminLTE style
+    Table Data Cell Component - LucentUI Theme
+    Migrated from AdminLTE to Tailwind
 --}}
 
 @props([
@@ -10,50 +11,20 @@
 ])
 
 @php
-    $alignStyles = [
-        'start' => 'text-align: left;',
-        'center' => 'text-align: center;',
-        'end' => 'text-align: right;',
+    $alignClasses = [
+        'start' => 'text-left',
+        'center' => 'text-center',
+        'end' => 'text-right',
     ];
-    $alignStyle = $alignStyles[$align] ?? $alignStyles['start'];
+    $alignClass = $alignClasses[$align] ?? $alignClasses['start'];
 @endphp
 
-<style>
-    .table-td-lte {
-        padding: 0.875rem 1.25rem;
-        font-size: 0.875rem;
-        color: #495057;
-        vertical-align: middle;
-    }
-    .table-td-lte-nowrap {
-        white-space: nowrap;
-    }
-    .table-td-lte-muted {
-        color: var(--lte-secondary, #6c757d);
-    }
-    .table-td-lte-strong {
-        font-weight: 500;
-        color: #212529;
-    }
-    .dark .table-td-lte {
-        color: #d1d5db;
-    }
-    .dark .table-td-lte-muted {
-        color: #9ca3af;
-    }
-    .dark .table-td-lte-strong {
-        color: #f3f4f6;
-    }
-</style>
-
-<td 
-    style="{{ $alignStyle }}"
-    {{ $attributes->class([
-        'table-td-lte',
-        'table-td-lte-nowrap' => $nowrap,
-        'table-td-lte-muted' => $muted,
-        'table-td-lte-strong' => $strong,
-    ]) }}
->
+<td {{ $attributes->class([
+    'px-5 py-3.5 text-sm text-secondary dark:text-gray-300 align-middle',
+    $alignClass,
+    'whitespace-nowrap' => $nowrap,
+    'text-secondary/80 dark:text-gray-400' => $muted,
+    'font-medium text-primary dark:text-gray-100' => $strong,
+]) }}>
     {{ $slot }}
 </td>