Add AdminLTE-style CSS framework to app.css

- Introduced AdminLTE CSS variables for color palette, body colors, card styles, and button styles.
- Implemented card components with variants for primary, success, warning, danger, and info.
- Added button styles including sizes and outline variants.
- Created form controls, select inputs, and input groups with consistent styling.
- Included utility classes for text and background colors, gradients, and shadows.
- Developed components for badges, alerts, callouts, progress bars, tables, small boxes, and info boxes.
- Integrated modal, dropdown, spinner, tooltip, and direct chat styles.
- Established timeline and close button styles, with dark mode support for specific components.

extensions/Servers/Proxmox/views/components/ui/copyable.blade.php

@@ -1,5 +1,5 @@
 {{--
-    Copyable Text Component - TailAdmin style
+    Copyable Text Component - AdminLTE style
     Text field with copy to clipboard functionality
     
     Usage:
@@ -12,9 +12,84 @@
     'masked' => false,
 ])
 
-<div class="space-y-2">
+<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">
     @if($label)
-        <label class="text-theme-sm font-medium text-gray-700 dark:text-gray-300">{{ $label }}</label>
+        <label class="copyable-lte-label">{{ $label }}</label>
     @endif
     <div 
         x-data="{
@@ -27,30 +102,31 @@
                 setTimeout(() => this.copied = false, 2000);
             }
         }"
-        class="flex items-center gap-2.5 rounded-lg border border-gray-300 bg-gray-50 px-4 py-2.5 text-theme-sm transition-colors duration-150 dark:border-gray-700 dark:bg-gray-800"
+        class="copyable-lte-field"
     >
         @if($masked)
-            <span class="flex-1 truncate font-mono text-gray-700 dark:text-gray-300" x-text="showValue ? copyText : '••••••••••••'"></span>
+            <span class="copyable-lte-value" x-text="showValue ? copyText : '••••••••••••'"></span>
             <button 
                 @click="showValue = !showValue" 
                 type="button"
-                class="text-gray-400 transition-colors duration-150 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
+                class="copyable-lte-btn"
                 :aria-label="showValue ? 'Hide value' : 'Show value'"
             >
-                <x-ri-eye-line x-show="!showValue" class="size-4" />
-                <x-ri-eye-off-line x-show="showValue" x-cloak class="size-4" />
+                <x-ri-eye-line x-show="!showValue" />
+                <x-ri-eye-off-line x-show="showValue" x-cloak />
             </button>
         @else
-            <span class="flex-1 truncate font-mono text-gray-700 dark:text-gray-300">{{ $value }}</span>
+            <span class="copyable-lte-value">{{ $value }}</span>
         @endif
         <button 
             @click="copyToClipboard()" 
             type="button"
-            class="relative inline-flex size-5 items-center justify-center text-gray-400 transition-colors duration-150 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
+            class="copyable-lte-btn"
+            :class="copied ? 'copyable-lte-btn-success' : ''"
             aria-label="Copy to clipboard"
         >
-            <x-ri-check-fill x-show="copied" x-transition x-cloak class="absolute size-4 text-success-500" />
-            <x-ri-file-copy-line x-show="!copied" x-transition class="absolute size-4" />
+            <x-ri-check-fill x-show="copied" x-transition x-cloak />
+            <x-ri-file-copy-line x-show="!copied" x-transition />
         </button>
     </div>
 </div>