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

@@ -1,5 +1,5 @@
 {{--
-    Table Header Cell Component - TailAdmin style
+    Table Header Cell Component - AdminLTE style
 --}}
 
 @props([
@@ -11,30 +11,77 @@
 ])
 
 @php
-    $alignClasses = [
-        'start' => 'text-left',
-        'center' => 'text-center',
-        'end' => 'text-right',
+    $alignStyles = [
+        'start' => 'text-align: left; justify-content: flex-start;',
+        'center' => 'text-align: center; justify-content: center;',
+        'end' => 'text-align: right; justify-content: flex-end;',
     ];
-    $alignClass = $alignClasses[$align] ?? $alignClasses['start'];
+    $alignStyle = $alignStyles[$align] ?? $alignStyles['start'];
     
     $isSorted = $sortable && $sortKey === $currentSort;
 @endphp
 
+<style>
+    .table-th-lte {
+        padding: 0.875rem 1.25rem;
+        font-size: 0.75rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--lte-secondary, #6c757d);
+        background-color: transparent;
+        vertical-align: middle;
+        white-space: nowrap;
+    }
+    .table-th-lte-sortable {
+        cursor: pointer;
+        user-select: none;
+        transition: color var(--lte-transition-speed, 0.3s) ease;
+    }
+    .table-th-lte-sortable:hover {
+        color: var(--lte-primary, #0d6efd);
+    }
+    .table-th-lte-sorted {
+        color: var(--lte-primary, #0d6efd);
+    }
+    .table-th-lte-inner {
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+    }
+    .table-th-lte-sort-icon {
+        display: inline-flex;
+        color: #adb5bd;
+    }
+    .table-th-lte-sorted .table-th-lte-sort-icon {
+        color: var(--lte-primary, #0d6efd);
+    }
+    .dark .table-th-lte {
+        color: #9ca3af;
+    }
+    .dark .table-th-lte-sortable:hover {
+        color: var(--lte-primary, #0d6efd);
+    }
+    .dark .table-th-lte-sort-icon {
+        color: #6b7280;
+    }
+</style>
+
 <th 
+    style="{{ $alignStyle }}"
     {{ $attributes->class([
-        'px-5 py-3.5 text-theme-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400',
-        $alignClass,
-        'cursor-pointer select-none transition-colors duration-150 hover:text-gray-700 dark:hover:text-gray-300' => $sortable,
+        'table-th-lte',
+        'table-th-lte-sortable' => $sortable,
+        'table-th-lte-sorted' => $isSorted,
     ]) }}
     @if($sortable && $sortKey)
         wire:click="sort('{{ $sortKey }}')"
     @endif
 >
-    <div class="flex items-center gap-1.5 @if($align === 'end') justify-end @elseif($align === 'center') justify-center @endif">
+    <div class="table-th-lte-inner" style="{{ $alignStyle }}">
         <span>{{ $slot }}</span>
         @if($sortable)
-            <span class="text-gray-400 dark:text-gray-500">
+            <span class="table-th-lte-sort-icon">
                 @if($isSorted)
                     @if($currentDirection === 'asc')
                         <x-ri-arrow-up-s-line class="size-4" />