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

@@ -1,5 +1,6 @@
 {{--
-    Copyable Text Component - AdminLTE style
+    Copyable Text Component - LucentUI Theme
+    Migrated from AdminLTE to Tailwind
     Text field with copy to clipboard functionality
     
     Usage:
@@ -12,84 +13,9 @@
     'masked' => false,
 ])
 
-<style>
-    .copyable-lte-group {
-        display: flex;
-        flex-direction: column;
-        gap: 0.5rem;
-    }
-    .copyable-lte-label {
-        font-size: 0.875rem;
-        font-weight: 500;
-        color: #495057;
-    }
-    .copyable-lte-field {
-        display: flex;
-        align-items: center;
-        gap: 0.625rem;
-        padding: 0.625rem 1rem;
-        background-color: #f8f9fa;
-        border: 1px solid var(--lte-border-color, #dee2e6);
-        border-radius: var(--lte-border-radius, 0.375rem);
-        font-size: 0.875rem;
-        transition: border-color var(--lte-transition-speed, 0.3s) ease;
-    }
-    .copyable-lte-value {
-        flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-        color: #212529;
-    }
-    .copyable-lte-btn {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        position: relative;
-        width: 1.25rem;
-        height: 1.25rem;
-        flex-shrink: 0;
-        padding: 0;
-        background: transparent;
-        border: none;
-        color: #adb5bd;
-        cursor: pointer;
-        transition: color var(--lte-transition-speed, 0.3s) ease;
-    }
-    .copyable-lte-btn:hover {
-        color: var(--lte-primary, #0d6efd);
-    }
-    .copyable-lte-btn svg {
-        width: 1rem;
-        height: 1rem;
-        position: absolute;
-    }
-    .copyable-lte-btn-success {
-        color: var(--lte-success, #198754);
-    }
-    /* Dark mode */
-    .dark .copyable-lte-label {
-        color: #d1d5db;
-    }
-    .dark .copyable-lte-field {
-        background-color: #1f2937;
-        border-color: #374151;
-    }
-    .dark .copyable-lte-value {
-        color: #e5e7eb;
-    }
-    .dark .copyable-lte-btn {
-        color: #6b7280;
-    }
-    .dark .copyable-lte-btn:hover {
-        color: var(--lte-primary, #0d6efd);
-    }
-</style>
-
-<div class="copyable-lte-group">
+<div class="flex flex-col gap-2">
     @if($label)
-        <label class="copyable-lte-label">{{ $label }}</label>
+        <label class="text-sm font-medium text-base/80">{{ $label }}</label>
     @endif
     <div 
         x-data="{
@@ -102,31 +28,31 @@
                 setTimeout(() => this.copied = false, 2000);
             }
         }"
-        class="copyable-lte-field"
+        class="flex items-center gap-2.5 px-4 py-2.5 bg-background-secondary border border-neutral rounded-lg text-sm transition-colors duration-200"
     >
         @if($masked)
-            <span class="copyable-lte-value" x-text="showValue ? copyText : '••••••••••••'"></span>
+            <span class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap font-mono text-base" x-text="showValue ? copyText : '••••••••••••'"></span>
             <button 
                 @click="showValue = !showValue" 
                 type="button"
-                class="copyable-lte-btn"
+                class="relative inline-flex items-center justify-center size-5 shrink-0 p-0 bg-transparent border-none text-base/50 cursor-pointer transition-colors duration-200 hover:text-primary"
                 :aria-label="showValue ? 'Hide value' : 'Show value'"
             >
-                <x-ri-eye-line x-show="!showValue" />
-                <x-ri-eye-off-line x-show="showValue" x-cloak />
+                <x-ri-eye-line class="size-4 absolute" x-show="!showValue" />
+                <x-ri-eye-off-line class="size-4 absolute" x-show="showValue" x-cloak />
             </button>
         @else
-            <span class="copyable-lte-value">{{ $value }}</span>
+            <span class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap font-mono text-base">{{ $value }}</span>
         @endif
         <button 
             @click="copyToClipboard()" 
             type="button"
-            class="copyable-lte-btn"
-            :class="copied ? 'copyable-lte-btn-success' : ''"
+            class="relative inline-flex items-center justify-center size-5 shrink-0 p-0 bg-transparent border-none text-base/50 cursor-pointer transition-colors duration-200 hover:text-primary"
+            :class="copied ? 'text-success' : ''"
             aria-label="Copy to clipboard"
         >
-            <x-ri-check-fill x-show="copied" x-transition x-cloak />
-            <x-ri-file-copy-line x-show="!copied" x-transition />
+            <x-ri-check-fill class="size-4 absolute" x-show="copied" x-transition x-cloak />
+            <x-ri-file-copy-line class="size-4 absolute" x-show="!copied" x-transition />
         </button>
     </div>
 </div>