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

@@ -1,5 +1,5 @@
 {{--
-    Tooltip Component - TailAdmin style
+    Tooltip Component - AdminLTE style
     
     Usage:
     <x-proxmox::ui.tooltip text="This is a tooltip">
@@ -13,19 +13,44 @@
 ])
 
 @php
-    $positions = [
-        'top' => 'bottom-full left-1/2 -translate-x-1/2 mb-2',
-        'bottom' => 'top-full left-1/2 -translate-x-1/2 mt-2',
-        'left' => 'right-full top-1/2 -translate-y-1/2 mr-2',
-        'right' => 'left-full top-1/2 -translate-y-1/2 ml-2',
+    $positionStyles = [
+        'top' => 'bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 0.5rem;',
+        'bottom' => 'top: 100%; left: 50%; transform: translateX(-50%); margin-top: 0.5rem;',
+        'left' => 'right: 100%; top: 50%; transform: translateY(-50%); margin-right: 0.5rem;',
+        'right' => 'left: 100%; top: 50%; transform: translateY(-50%); margin-left: 0.5rem;',
     ];
 @endphp
 
+<style>
+    .tooltip-lte-wrapper {
+        position: relative;
+        display: inline-block;
+    }
+    .tooltip-lte {
+        position: absolute;
+        z-index: 1070;
+        pointer-events: none;
+    }
+    .tooltip-lte-inner {
+        padding: 0.375rem 0.75rem;
+        font-size: 0.8125rem;
+        font-weight: 500;
+        color: #fff;
+        background-color: #212529;
+        border-radius: var(--lte-border-radius, 0.375rem);
+        box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
+        white-space: nowrap;
+    }
+    .dark .tooltip-lte-inner {
+        background-color: #4b5563;
+    }
+</style>
+
 <div 
     x-data="{ show: false }"
     @mouseenter="show = true"
     @mouseleave="show = false"
-    class="relative inline-block"
+    class="tooltip-lte-wrapper"
     {{ $attributes }}
 >
     {{ $slot }}
@@ -39,9 +64,10 @@
         x-transition:leave="transition ease-in duration-100"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
-        class="absolute z-50 {{ $positions[$position] ?? $positions['top'] }} pointer-events-none"
+        class="tooltip-lte"
+        style="{{ $positionStyles[$position] ?? $positionStyles['top'] }}"
     >
-        <div class="overflow-hidden rounded-lg bg-gray-900 px-3 py-1.5 text-theme-xs font-medium text-white shadow-theme-md dark:bg-gray-700">
+        <div class="tooltip-lte-inner">
             {{ $text }}
         </div>
     </div>