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

@@ -1,5 +1,5 @@
 {{--
-    Empty State Component - TailAdmin style
+    Empty State Component - AdminLTE style
     
     Usage:
     <x-proxmox::ui.empty-state title="No servers found" />
@@ -20,50 +20,119 @@
     'compact' => false,
 ])
 
+<style>
+    .empty-state-lte {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+    }
+    .empty-state-lte-regular {
+        padding: 3rem 1.5rem;
+    }
+    .empty-state-lte-compact {
+        padding: 1.5rem 1rem;
+    }
+    .empty-state-lte-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #f8f9fa;
+        border-radius: 50%;
+    }
+    .empty-state-lte-icon-regular {
+        width: 4rem;
+        height: 4rem;
+        margin-bottom: 1.25rem;
+    }
+    .empty-state-lte-icon-compact {
+        width: 2.75rem;
+        height: 2.75rem;
+        margin-bottom: 0.75rem;
+    }
+    .empty-state-lte-icon svg {
+        color: #adb5bd;
+    }
+    .empty-state-lte-icon-regular svg {
+        width: 2rem;
+        height: 2rem;
+    }
+    .empty-state-lte-icon-compact svg {
+        width: 1.25rem;
+        height: 1.25rem;
+    }
+    .empty-state-lte-title {
+        font-weight: 600;
+        color: #212529;
+    }
+    .empty-state-lte-title-regular {
+        font-size: 1.125rem;
+    }
+    .empty-state-lte-title-compact {
+        font-size: 0.875rem;
+    }
+    .empty-state-lte-description {
+        max-width: 24rem;
+        color: var(--lte-secondary, #6c757d);
+    }
+    .empty-state-lte-description-regular {
+        font-size: 0.875rem;
+        margin-top: 0.5rem;
+    }
+    .empty-state-lte-description-compact {
+        font-size: 0.8125rem;
+        margin-top: 0.25rem;
+    }
+    .empty-state-lte-actions-regular {
+        margin-top: 1.25rem;
+    }
+    .empty-state-lte-actions-compact {
+        margin-top: 0.75rem;
+    }
+    /* Dark mode */
+    .dark .empty-state-lte-icon {
+        background-color: #374151;
+    }
+    .dark .empty-state-lte-icon svg {
+        color: #6b7280;
+    }
+    .dark .empty-state-lte-title {
+        color: #f3f4f6;
+    }
+    .dark .empty-state-lte-description {
+        color: #9ca3af;
+    }
+</style>
+
 <div 
     {{ $attributes->class([
-        'flex flex-col items-center justify-center text-center',
-        'px-6 py-12' => !$compact,
-        'px-4 py-6' => $compact,
+        'empty-state-lte',
+        'empty-state-lte-regular' => !$compact,
+        'empty-state-lte-compact' => $compact,
     ]) }}
 >
     @if($icon)
-        <div @class([
-            'flex items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800',
-            'mb-5 size-16' => !$compact,
-            'mb-3 size-11' => $compact,
-        ])>
+        <div class="empty-state-lte-icon {{ $compact ? 'empty-state-lte-icon-compact' : 'empty-state-lte-icon-regular' }}">
             <x-dynamic-component 
                 :component="$icon" 
-                @class([
-                    $iconClass ?? 'text-gray-400 dark:text-gray-500',
-                    'size-8' => !$compact,
-                    'size-5' => $compact,
-                ])
+                class="{{ $iconClass ?? '' }}"
             />
         </div>
     @endif
     
-    <h3 @class([
-        'font-semibold text-gray-800 dark:text-white/90',
-        'text-lg' => !$compact,
-        'text-theme-sm' => $compact,
-    ])>
+    <h3 class="empty-state-lte-title {{ $compact ? 'empty-state-lte-title-compact' : 'empty-state-lte-title-regular' }}">
         {{ $title }}
     </h3>
     
     @if($description)
-        <p @class([
-            'max-w-sm text-gray-500 dark:text-gray-400',
-            'mt-2 text-theme-sm' => !$compact,
-            'mt-1 text-theme-xs' => $compact,
-        ])>
+        <p class="empty-state-lte-description {{ $compact ? 'empty-state-lte-description-compact' : 'empty-state-lte-description-regular' }}">
             {{ $description }}
         </p>
     @endif
     
     @if($slot->isNotEmpty())
-        <div @class(['mt-5' => !$compact, 'mt-3' => $compact])>
+        <div class="{{ $compact ? 'empty-state-lte-actions-compact' : 'empty-state-lte-actions-regular' }}">
             {{ $slot }}
         </div>
     @endif