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

@@ -1,5 +1,6 @@
 {{--
-    Toggle/Switch Component - AdminLTE style
+    Toggle/Switch Component - LucentUI Theme
+    Migrated from AdminLTE to Tailwind
     
     Usage:
     <x-proxmox::ui.toggle wire:model="enabled" label="Enable Feature" />
@@ -11,116 +12,28 @@
     'disabled' => false,
 ])
 
-<style>
-    .toggle-wrapper-lte {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 1rem;
-        cursor: pointer;
-    }
-    .toggle-wrapper-lte-disabled {
-        cursor: not-allowed;
-        opacity: 0.65;
-    }
-    .toggle-content-lte {
-        display: flex;
-        flex-direction: column;
-        gap: 0.125rem;
-    }
-    .toggle-label-lte {
-        font-size: 0.875rem;
-        font-weight: 500;
-        color: #495057;
-    }
-    .toggle-description-lte {
-        font-size: 0.8125rem;
-        color: var(--lte-secondary, #6c757d);
-    }
-    .toggle-switch-lte {
-        position: relative;
-        flex-shrink: 0;
-    }
-    .toggle-input-lte {
-        position: absolute;
-        width: 1px;
-        height: 1px;
-        padding: 0;
-        margin: -1px;
-        overflow: hidden;
-        clip: rect(0, 0, 0, 0);
-        white-space: nowrap;
-        border: 0;
-    }
-    .toggle-track-lte {
-        display: block;
-        width: 2.75rem;
-        height: 1.5rem;
-        background-color: #dee2e6;
-        border-radius: 9999px;
-        border: 2px solid transparent;
-        transition: background-color var(--lte-transition-speed, 0.3s) ease;
-    }
-    .toggle-input-lte:checked + .toggle-track-lte {
-        background-color: var(--lte-primary, #0d6efd);
-    }
-    .toggle-input-lte:focus-visible + .toggle-track-lte {
-        outline: none;
-        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
-    }
-    .toggle-input-lte:disabled + .toggle-track-lte {
-        opacity: 0.5;
-        cursor: not-allowed;
-    }
-    .toggle-thumb-lte {
-        position: absolute;
-        top: 0.125rem;
-        left: 0.125rem;
-        width: 1.25rem;
-        height: 1.25rem;
-        background-color: #fff;
-        border-radius: 9999px;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-        transition: transform var(--lte-transition-speed, 0.3s) ease;
-        pointer-events: none;
-    }
-    .toggle-input-lte:checked ~ .toggle-thumb-lte {
-        transform: translateX(1.25rem);
-    }
-    /* Dark mode */
-    .dark .toggle-label-lte {
-        color: #d1d5db;
-    }
-    .dark .toggle-description-lte {
-        color: #9ca3af;
-    }
-    .dark .toggle-track-lte {
-        background-color: #374151;
-    }
-    .dark .toggle-input-lte:checked + .toggle-track-lte {
-        background-color: var(--lte-primary, #0d6efd);
-    }
-</style>
-
-<label {{ $attributes->only('class')->class(['toggle-wrapper-lte', 'toggle-wrapper-lte-disabled' => $disabled]) }}>
+<label {{ $attributes->only('class')->class([
+    'flex items-center justify-between gap-4 cursor-pointer',
+    'cursor-not-allowed opacity-65' => $disabled,
+]) }}>
     @if($label || $description)
-        <div class="toggle-content-lte">
+        <div class="flex flex-col gap-0.5">
             @if($label)
-                <span class="toggle-label-lte">{{ $label }}</span>
+                <span class="text-sm font-medium text-secondary dark:text-gray-300">{{ $label }}</span>
             @endif
             @if($description)
-                <p class="toggle-description-lte">{{ $description }}</p>
+                <p class="text-xs text-secondary/80 dark:text-gray-400">{{ $description }}</p>
             @endif
         </div>
     @endif
     
-    <div class="toggle-switch-lte">
+    <div class="relative shrink-0">
         <input
             type="checkbox"
             {{ $attributes->whereDoesntStartWith('class')->merge(['disabled' => $disabled]) }}
-            class="toggle-input-lte"
+            class="peer sr-only"
         />
-        <div class="toggle-track-lte"></div>
-        <div class="toggle-thumb-lte"></div>
+        <div class="w-11 h-6 bg-neutral/40 dark:bg-gray-600 rounded-full border-2 border-transparent transition-colors duration-200 peer-checked:bg-primary peer-focus-visible:ring-2 peer-focus-visible:ring-primary/25 peer-disabled:opacity-50 peer-disabled:cursor-not-allowed"></div>
+        <div class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow-sm transition-transform duration-200 peer-checked:translate-x-5 pointer-events-none"></div>
     </div>
 </label>