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

@@ -1,5 +1,6 @@
 {{--
-    Table Component - AdminLTE style
+    Table Component - LucentUI Theme
+    Migrated from AdminLTE to Tailwind
     
     Usage:
     <x-proxmox::ui.table>
@@ -22,110 +23,28 @@
     'bordered' => false,
 ])
 
-<style>
-    .table-lte-wrapper {
-        position: relative;
-        width: 100%;
-        overflow-x: auto;
-        border-radius: var(--lte-border-radius, 0.375rem);
-        border: 1px solid var(--lte-border-color, #dee2e6);
-        background-color: #fff;
-    }
-    .table-lte {
-        width: 100%;
-        margin-bottom: 0;
-        color: #212529;
-        vertical-align: top;
-        border-collapse: collapse;
-        font-size: 0.875rem;
-    }
-    .table-lte thead {
-        background-color: #f8f9fa;
-        border-bottom: 2px solid var(--lte-border-color, #dee2e6);
-    }
-    .table-lte tbody {
-        background-color: #fff;
-    }
-    .table-lte tfoot {
-        background-color: #f8f9fa;
-        border-top: 2px solid var(--lte-border-color, #dee2e6);
-        font-weight: 500;
-    }
-    .table-lte-striped tbody tr:nth-of-type(even) {
-        background-color: rgba(0, 0, 0, 0.02);
-    }
-    .table-lte-hoverable tbody tr {
-        transition: background-color var(--lte-transition-speed, 0.3s) ease;
-    }
-    .table-lte-hoverable tbody tr:hover {
-        background-color: rgba(0, 0, 0, 0.04);
-    }
-    .table-lte-bordered {
-        border: 1px solid var(--lte-border-color, #dee2e6);
-    }
-    .table-lte-bordered th,
-    .table-lte-bordered td {
-        border: 1px solid var(--lte-border-color, #dee2e6);
-    }
-    .table-lte-compact th,
-    .table-lte-compact td {
-        padding: 0.375rem 0.75rem;
-    }
-    /* Dark mode */
-    .dark .table-lte-wrapper {
-        background-color: #1f2937;
-        border-color: #374151;
-    }
-    .dark .table-lte {
-        color: #e5e7eb;
-    }
-    .dark .table-lte thead {
-        background-color: rgba(55, 65, 81, 0.5);
-        border-bottom-color: #374151;
-    }
-    .dark .table-lte tbody {
-        background-color: transparent;
-    }
-    .dark .table-lte tfoot {
-        background-color: rgba(55, 65, 81, 0.5);
-        border-top-color: #374151;
-    }
-    .dark .table-lte-striped tbody tr:nth-of-type(even) {
-        background-color: rgba(255, 255, 255, 0.02);
-    }
-    .dark .table-lte-hoverable tbody tr:hover {
-        background-color: rgba(255, 255, 255, 0.04);
-    }
-    .dark .table-lte-bordered th,
-    .dark .table-lte-bordered td {
-        border-color: #374151;
-    }
-</style>
-
-<div @class(['table-lte-wrapper' => $responsive])>
-    <table 
-        {{ $attributes->class([
-            'table-lte',
-            'table-lte-striped' => $striped,
-            'table-lte-hoverable' => $hoverable,
-            'table-lte-bordered' => $bordered,
-            'table-lte-compact' => $compact,
-        ]) }}
-        data-hoverable="{{ $hoverable ? 'true' : 'false' }}"
-        data-compact="{{ $compact ? 'true' : 'false' }}"
-    >
+<div @class([
+    'relative w-full overflow-x-auto rounded-lg border border-neutral dark:border-gray-700 bg-background dark:bg-gray-800' => $responsive,
+])>
+    <table {{ $attributes->class([
+        'w-full text-sm text-primary dark:text-gray-200 border-collapse',
+        '[&_tbody_tr:nth-of-type(even)]:bg-black/[0.02] dark:[&_tbody_tr:nth-of-type(even)]:bg-white/[0.02]' => $striped,
+        '[&_tbody_tr]:transition-colors [&_tbody_tr]:duration-200 [&_tbody_tr:hover]:bg-black/[0.04] dark:[&_tbody_tr:hover]:bg-white/[0.04]' => $hoverable,
+        'border border-neutral dark:border-gray-700 [&_th]:border [&_th]:border-neutral dark:[&_th]:border-gray-700 [&_td]:border [&_td]:border-neutral dark:[&_td]:border-gray-700' => $bordered,
+        '[&_th]:px-3 [&_th]:py-1.5 [&_td]:px-3 [&_td]:py-1.5' => $compact,
+    ]) }}>
         @if(isset($head))
-            <thead>
+            <thead class="bg-background-secondary dark:bg-gray-700/50 border-b-2 border-neutral dark:border-gray-600">
                 <tr>
                     {{ $head }}
                 </tr>
             </thead>
         @endif
-        <tbody>
+        <tbody class="bg-background dark:bg-transparent">
             {{ $slot }}
         </tbody>
         @if(isset($foot))
-            <tfoot>
+            <tfoot class="bg-background-secondary dark:bg-gray-700/50 border-t-2 border-neutral dark:border-gray-600 font-medium">
                 {{ $foot }}
             </tfoot>
         @endif