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

@@ -1,5 +1,6 @@
 {{--
-    Info Row / Key-Value Pair Component - AdminLTE style
+    Info Row / Key-Value Pair Component - LucentUI Theme
+    Migrated from AdminLTE to Tailwind
     
     Usage:
     <x-proxmox::ui.info-row label="IP Address" value="192.168.1.1" />
@@ -16,93 +17,15 @@
     'muted' => false,
 ])
 
-<style>
-    .info-row-lte {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 0.75rem 0;
-        border-bottom: 1px solid var(--lte-border-color, #dee2e6);
-    }
-    .info-row-lte:last-child {
-        border-bottom: none;
-    }
-    .info-row-lte-label {
-        display: flex;
-        align-items: center;
-        gap: 0.625rem;
-        font-size: 0.875rem;
-        color: var(--lte-secondary, #6c757d);
-    }
-    .info-row-lte-label svg {
-        width: 1rem;
-        height: 1rem;
-    }
-    .info-row-lte-value {
-        display: flex;
-        align-items: center;
-        gap: 0.625rem;
-    }
-    .info-row-lte-value-text {
-        font-size: 0.875rem;
-        font-weight: 500;
-        color: #212529;
-    }
-    .info-row-lte-value-text-muted {
-        color: var(--lte-secondary, #6c757d);
-    }
-    .info-row-lte-copy-btn {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        width: 1.75rem;
-        height: 1.75rem;
-        padding: 0;
-        background: transparent;
-        border: none;
-        border-radius: var(--lte-border-radius, 0.375rem);
-        color: #adb5bd;
-        cursor: pointer;
-        transition: all var(--lte-transition-speed, 0.3s) ease;
-    }
-    .info-row-lte-copy-btn:hover {
-        background-color: #f8f9fa;
-        color: var(--lte-primary, #0d6efd);
-    }
-    .info-row-lte-copy-btn svg {
-        width: 1rem;
-        height: 1rem;
-    }
-    /* Dark mode */
-    .dark .info-row-lte {
-        border-bottom-color: #374151;
-    }
-    .dark .info-row-lte-label {
-        color: #9ca3af;
-    }
-    .dark .info-row-lte-value-text {
-        color: #f3f4f6;
-    }
-    .dark .info-row-lte-value-text-muted {
-        color: #9ca3af;
-    }
-    .dark .info-row-lte-copy-btn {
-        color: #6b7280;
-    }
-    .dark .info-row-lte-copy-btn:hover {
-        background-color: #374151;
-    }
-</style>
-
-<div {{ $attributes->class(['info-row-lte']) }}>
-    <div class="info-row-lte-label">
+<div {{ $attributes->class(['flex items-center justify-between py-3 border-b border-neutral last:border-b-0']) }}>
+    <div class="flex items-center gap-2.5 text-sm text-base/60">
         @if($icon)
-            <x-dynamic-component :component="$icon" />
+            <x-dynamic-component :component="$icon" class="size-4" />
         @endif
         <span>{{ $label }}</span>
     </div>
-    <div class="info-row-lte-value">
-        <span class="info-row-lte-value-text {{ $muted ? 'info-row-lte-value-text-muted' : '' }}">
+    <div class="flex items-center gap-2.5">
+        <span class="text-sm font-medium {{ $muted ? 'text-base/60' : 'text-base' }}">
             {{ $value ?? $slot }}
         </span>
         @if($copyable && $value)
@@ -114,11 +37,11 @@
                     copied = true;
                     setTimeout(() => copied = false, 2000);
                 "
-                class="info-row-lte-copy-btn"
+                class="inline-flex items-center justify-center size-7 p-0 bg-transparent border-none rounded-lg text-base/50 cursor-pointer transition-all duration-200 hover:bg-background-secondary hover:text-primary"
                 title="Copy to clipboard"
             >
-                <x-ri-file-copy-line x-show="!copied" />
-                <x-ri-check-line x-show="copied" x-cloak style="color: var(--lte-success, #198754);" />
+                <x-ri-file-copy-line class="size-4" x-show="!copied" />
+                <x-ri-check-line class="size-4 text-success" x-show="copied" x-cloak />
             </button>
         @endif
     </div>