Refactor Proxmox server views for improved UI consistency and usability

- Updated server card component to use new UI elements and improved layout.
- Enhanced status display with badges and better status indicators.
- Refined quick info row for server details with consistent styling.
- Reorganized server configuration statistics into stat cards for clarity.
- Improved help modals for statistics and storage management sections.
- Streamlined alerts and warnings for better user experience.
- Updated storage management view to utilize new UI components and improve readability.

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

@@ -0,0 +1,115 @@
+{{--
+    Modal Component - TailServer Theme
+    
+    Usage:
+    <x-proxmox::ui.modal name="my-modal" title="Modal Title">Content</x-proxmox::ui.modal>
+    
+    Open with: $dispatch('open-modal', { name: 'my-modal' })
+    Close with: $dispatch('close-modal', { name: 'my-modal' })
+--}}
+
+@props([
+    'name',
+    'title' => null,
+    'subtitle' => null,
+    'icon' => null,
+    'iconColor' => 'text-primary',
+    'maxWidth' => 'md',
+    'closeable' => true,
+    'footer' => null,
+])
+
+@php
+    $maxWidthClasses = [
+        'sm' => 'max-w-sm',
+        'md' => 'max-w-md',
+        'lg' => 'max-w-lg',
+        'xl' => 'max-w-xl',
+        '2xl' => 'max-w-2xl',
+        '3xl' => 'max-w-3xl',
+        '4xl' => 'max-w-4xl',
+        '5xl' => 'max-w-5xl',
+        'full' => 'max-w-full mx-4',
+    ];
+    $maxWidthClass = $maxWidthClasses[$maxWidth] ?? $maxWidthClasses['md'];
+@endphp
+
+<div
+    x-data="{ show: false }"
+    x-on:open-modal.window="if ($event.detail.name === '{{ $name }}') show = true"
+    x-on:close-modal.window="if ($event.detail.name === '{{ $name }}') show = false"
+    x-on:keydown.escape.window="@if($closeable) show = false @endif"
+    x-show="show"
+    x-cloak
+    class="fixed inset-0 z-50 overflow-y-auto"
+    {{ $attributes }}
+>
+    {{-- Backdrop --}}
+    <div 
+        x-show="show"
+        x-transition:enter="transition ease-out duration-300"
+        x-transition:enter-start="opacity-0"
+        x-transition:enter-end="opacity-100"
+        x-transition:leave="transition ease-in duration-200"
+        x-transition:leave-start="opacity-100"
+        x-transition:leave-end="opacity-0"
+        @if($closeable) @click="show = false" @endif
+        class="fixed inset-0 bg-black/60 backdrop-blur-md"
+    ></div>
+    
+    {{-- Modal Panel --}}
+    <div class="fixed inset-0 flex items-center justify-center p-4">
+        <div
+            x-show="show"
+            x-transition:enter="transition ease-out duration-300"
+            x-transition:enter-start="opacity-0 scale-95 translate-y-4"
+            x-transition:enter-end="opacity-100 scale-100 translate-y-0"
+            x-transition:leave="transition ease-in duration-200"
+            x-transition:leave-start="opacity-100 scale-100 translate-y-0"
+            x-transition:leave-end="opacity-0 scale-95 translate-y-4"
+            @click.stop
+            class="relative w-full {{ $maxWidthClass }} max-h-[90vh] overflow-y-auto bg-background-secondary rounded-2xl border border-neutral/20 shadow-2xl ring-1 ring-black/5"
+        >
+            {{-- Header --}}
+            @if($title || $closeable)
+                <div class="flex items-start justify-between gap-4 p-6 border-b border-neutral/10">
+                    <div class="flex items-center gap-3">
+                        @if($icon)
+                            <div class="flex-shrink-0 flex items-center justify-center w-10 h-10 rounded-xl bg-gradient-to-br from-primary/20 to-primary/5 shadow-sm">
+                                <x-dynamic-component :component="$icon" class="size-5 {{ $iconColor }}" /> />
+                            </div>
+                        @endif
+                        <div>
+                            @if($title)
+                                <h3 class="text-lg font-semibold text-base">{{ $title }}</h3>
+                            @endif
+                            @if($subtitle)
+                                <p class="text-sm text-base/60 mt-0.5">{{ $subtitle }}</p>
+                            @endif
+                        </div>
+                    </div>
+                    @if($closeable)
+                        <button 
+                            @click="show = false" 
+                            class="flex-shrink-0 p-2 -m-2 text-base/40 hover:text-base transition-all duration-200 rounded-xl hover:bg-neutral/10 hover:rotate-90"
+                        >
+                            <x-ri-close-line class="size-5" />
+                        </button>
+                    @endif
+                </div>
+            @endif
+            
+            {{-- Content --}}
+            <div class="p-6">
+                {{ $slot }}
+            </div>
+            
+            {{-- Footer --}}
+            @if($footer)
+                <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-neutral/10 bg-gradient-to-t from-neutral/5 to-transparent">
+                    {{ $footer }}
+                </div>
+            @endif
+        </div>
+    </div>
+</div>