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

@@ -1,5 +1,5 @@
 {{--
-    Dropdown Component - TailAdmin style
+    Dropdown Component - AdminLTE style
     
     Usage:
     <x-proxmox::ui.dropdown>
@@ -21,23 +21,50 @@
 ])
 
 @php
-    $alignClasses = [
-        'left' => 'ltr:origin-top-left rtl:origin-top-right start-0',
-        'right' => 'ltr:origin-top-right rtl:origin-top-left end-0',
-        'center' => 'origin-top left-1/2 -translate-x-1/2',
+    $alignStyles = [
+        'left' => 'left: 0; transform-origin: top left;',
+        'right' => 'right: 0; transform-origin: top right;',
+        'center' => 'left: 50%; transform: translateX(-50%); transform-origin: top center;',
     ];
     
-    $widthClasses = [
-        '32' => 'w-32',
-        '40' => 'w-40',
-        '48' => 'w-48',
-        '56' => 'w-56',
-        '64' => 'w-64',
-        '80' => 'w-80',
+    $widthStyles = [
+        '32' => 'width: 8rem;',
+        '40' => 'width: 10rem;',
+        '48' => 'width: 12rem;',
+        '56' => 'width: 14rem;',
+        '64' => 'width: 16rem;',
+        '80' => 'width: 20rem;',
     ];
 @endphp
 
-<div class="relative inline-block" x-data="{ open: false }" @click.outside="open = false" @close.stop="open = false">
+<style>
+    .dropdown-lte {
+        position: relative;
+        display: inline-block;
+    }
+    .dropdown-menu-lte {
+        position: absolute;
+        z-index: 1000;
+        margin-top: 0.5rem;
+        min-width: 10rem;
+        padding: 0.5rem;
+        background-color: #fff;
+        border: 1px solid var(--lte-border-color, #dee2e6);
+        border-radius: var(--lte-border-radius, 0.375rem);
+        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+    }
+    .dropdown-menu-lte[x-cloak] {
+        display: none !important;
+    }
+    /* Dark mode */
+    .dark .dropdown-menu-lte {
+        background-color: #1f2937;
+        border-color: #374151;
+        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
+    }
+</style>
+
+<div class="dropdown-lte" x-data="{ open: false }" @click.outside="open = false" @close.stop="open = false">
     <div @click="open = !open">
         {{ $trigger }}
     </div>
@@ -50,12 +77,11 @@
         x-transition:leave="transition ease-in duration-100"
         x-transition:leave-start="opacity-100 scale-100"
         x-transition:leave-end="opacity-0 scale-95"
-        class="absolute z-50 mt-2 {{ $widthClasses[$width] ?? 'w-48' }} {{ $alignClasses[$align] ?? $alignClasses['right'] }}"
-        style="display: none;"
+        class="dropdown-menu-lte {{ $contentClasses }}"
+        style="{{ $widthStyles[$width] ?? 'width: 12rem;' }} {{ $alignStyles[$align] ?? $alignStyles['right'] }}"
+        x-cloak
         @click="open = false"
     >
-        <div class="rounded-xl border border-gray-200 bg-white p-2 shadow-theme-lg dark:border-gray-800 dark:bg-gray-900 {{ $contentClasses }}">
-            {{ $slot }}
-        </div>
+        {{ $slot }}
     </div>
 </div>