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

@@ -0,0 +1,73 @@
+{{--
+    Resource Allocation Card Component - TailServer Theme
+    For displaying CPU, Memory, and other resource allocation vs entitlement
+    
+    Usage:
+    <x-proxmox::ui.allocation-card
+        label="CPU Allocation"
+        :percent="45"
+        usage-summary="1.8 / 4 vCPU"
+        entitlement-label="4 vCPU entitlement"
+        description="Live hypervisor usage sampled directly from the cluster."
+        gradient="linear-gradient(90deg, #38bdf8 0%, #6366f1 100%)"
+        :badge="['label' => 'Healthy', 'class' => 'text-success bg-success/15']"
+    />
+--}}
+
+@props([
+    'label',
+    'percent' => null,
+    'usageSummary',
+    'entitlementLabel',
+    'description' => null,
+    'gradient' => 'linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%)',
+    'badge' => null,
+    'icon' => null,
+    'iconColor' => 'text-primary',
+])
+
+<div {{ $attributes->class(['group relative border border-neutral/20 rounded-xl p-4 bg-background hover:border-neutral/30 hover:shadow-sm transition-all duration-200']) }}>
+    {{-- Subtle gradient overlay on hover --}}
+    <div class="absolute inset-0 rounded-xl bg-gradient-to-br from-primary/[0.02] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
+    
+    <div class="relative flex flex-col gap-3">
+        <div class="flex items-start justify-between gap-3">
+            <div class="flex items-start gap-3">
+                @if($icon)
+                    <div class="flex-shrink-0 w-9 h-9 rounded-lg bg-primary/10 flex items-center justify-center">
+                        <x-dynamic-component :component="$icon" class="size-4.5 {{ $iconColor }}" />
+                    </div>
+                @endif
+                <div class="min-w-0">
+                    <p class="text-[11px] font-semibold tracking-wider uppercase text-base/50">{{ $label }}</p>
+                    <p class="text-xl font-bold text-base leading-tight mt-0.5">{{ $usageSummary }}</p>
+                    <p class="text-xs text-base/50 mt-0.5">{{ $entitlementLabel }}</p>
+                </div>
+            </div>
+            @if($badge)
+                <span class="flex-shrink-0 text-[10px] font-bold px-2 py-1 rounded-full {{ $badge['class'] ?? 'text-base/60 bg-neutral/10' }}">
+                    {{ $badge['label'] ?? '' }}
+                </span>
+            @endif
+        </div>
+        
+        @if(!is_null($percent))
+            <div class="space-y-1.5">
+                <div class="flex items-center justify-between text-xs">
+                    <span class="text-base/50">Usage</span>
+                    <span class="font-semibold text-base/70">{{ $percent }}%</span>
+                </div>
+                <div class="h-1.5 rounded-full bg-neutral/10 overflow-hidden">
+                    <div 
+                        class="h-full rounded-full transition-all duration-500 ease-out"
+                        style="width: {{ min($percent, 130) }}%; background-image: {{ $gradient }};"
+                    ></div>
+                </div>
+            </div>
+        @endif
+        
+        @if($description)
+            <p class="text-[11px] text-base/40 leading-relaxed">{{ $description }}</p>
+        @endif
+    </div>
+</div>