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

@@ -1,5 +1,6 @@
 {{--
-    Progress Bar Component - TailAdmin style
+    Progress Bar Component - AdminLTE Theme
+    Based on AdminLTE v4 Progress Bar styling patterns
     
     Usage:
     <x-proxmox::ui.progress :value="75" />
@@ -23,69 +24,52 @@
     $percent = $max > 0 ? min(100, ($value / $max) * 100) : 0;
     
     $colorClasses = [
-        'primary' => 'bg-brand-500',
-        'secondary' => 'bg-gray-500',
-        'success' => 'bg-success-500',
-        'warning' => 'bg-warning-500',
-        'danger' => 'bg-error-500',
-        'info' => 'bg-blue-light-500',
-    ];
-    
-    $bgClasses = [
-        'primary' => 'bg-brand-100 dark:bg-brand-500/20',
-        'secondary' => 'bg-gray-200 dark:bg-gray-700',
-        'success' => 'bg-success-100 dark:bg-success-500/20',
-        'warning' => 'bg-warning-100 dark:bg-warning-500/20',
-        'danger' => 'bg-error-100 dark:bg-error-500/20',
-        'info' => 'bg-blue-light-100 dark:bg-blue-light-500/20',
+        'primary' => 'lte-bg-primary',
+        'secondary' => 'lte-bg-secondary',
+        'success' => 'lte-bg-success',
+        'warning' => 'lte-bg-warning',
+        'danger' => 'lte-bg-danger',
+        'info' => 'lte-bg-info',
     ];
     
     $sizeClasses = [
-        'xs' => 'h-1',
-        'sm' => 'h-1.5',
-        'md' => 'h-2',
-        'lg' => 'h-2.5',
-        'xl' => 'h-3',
+        'xs' => 'lte-progress-xs',
+        'sm' => 'lte-progress-sm',
+        'md' => '',
+        'lg' => '',
+        'xl' => '',
     ];
     
     $colorClass = $colorClasses[$color] ?? $colorClasses['primary'];
-    $bgClass = $bgClasses[$color] ?? $bgClasses['primary'];
-    $sizeClass = $sizeClasses[$size] ?? $sizeClasses['md'];
+    $sizeClass = $sizeClasses[$size] ?? '';
     
     // Auto-select color based on value if specified
     if ($color === 'auto') {
         if ($percent >= 90) {
             $colorClass = $colorClasses['danger'];
-            $bgClass = $bgClasses['danger'];
         } elseif ($percent >= 70) {
             $colorClass = $colorClasses['warning'];
-            $bgClass = $bgClasses['warning'];
         } else {
             $colorClass = $colorClasses['success'];
-            $bgClass = $bgClasses['success'];
         }
     }
 @endphp
 
 <div {{ $attributes->class(['w-full']) }}>
     @if($showLabel || $label)
-        <div class="mb-2 flex items-center justify-between text-theme-xs">
-            <span class="font-medium text-gray-700 dark:text-gray-300">{{ $label ?? 'Usage' }}</span>
-            <span class="font-semibold text-gray-800 dark:text-white/90">{{ number_format($percent, 1) }}%</span>
+        <div class="mb-2 flex items-center justify-between" style="font-size: 0.875rem;">
+            <span style="font-weight: 500;">{{ $label ?? 'Usage' }}</span>
+            <span style="font-weight: 600;">{{ number_format($percent, 1) }}%</span>
         </div>
     @endif
-    <div class="relative {{ $sizeClass }} w-full overflow-hidden rounded-full {{ $bgClass }}">
+    <div class="lte-progress {{ $sizeClass }}">
         <div 
-            @class([
-                $sizeClass,
-                'w-full flex-1 rounded-full transition-all duration-300',
-                $colorClass => !$gradient,
-            ])
-            @if($gradient)
-                style="width: {{ $percent }}%; background-image: {{ $gradient }};"
-            @else
-                style="width: {{ $percent }}%;"
-            @endif
+            class="lte-progress-bar {{ $colorClass }} {{ $striped ? 'lte-progress-bar-striped' : '' }} {{ $animated ? 'lte-progress-bar-animated' : '' }}"
+            role="progressbar"
+            style="width: {{ $percent }}%; {{ $gradient ? 'background-image: ' . $gradient . ';' : '' }}"
+            aria-valuenow="{{ $percent }}"
+            aria-valuemin="0"
+            aria-valuemax="100"
         ></div>
     </div>
 </div>