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

@@ -1,5 +1,5 @@
 {{--
-    Table Component - TailAdmin style
+    Table Component - AdminLTE style
     
     Usage:
     <x-proxmox::ui.table>
@@ -19,29 +19,113 @@
     'hoverable' => true,
     'responsive' => true,
     'compact' => false,
+    'bordered' => false,
 ])
 
-<div @class(['relative w-full overflow-x-auto rounded-xl border border-gray-200 dark:border-gray-800' => $responsive])>
+<style>
+    .table-lte-wrapper {
+        position: relative;
+        width: 100%;
+        overflow-x: auto;
+        border-radius: var(--lte-border-radius, 0.375rem);
+        border: 1px solid var(--lte-border-color, #dee2e6);
+        background-color: #fff;
+    }
+    .table-lte {
+        width: 100%;
+        margin-bottom: 0;
+        color: #212529;
+        vertical-align: top;
+        border-collapse: collapse;
+        font-size: 0.875rem;
+    }
+    .table-lte thead {
+        background-color: #f8f9fa;
+        border-bottom: 2px solid var(--lte-border-color, #dee2e6);
+    }
+    .table-lte tbody {
+        background-color: #fff;
+    }
+    .table-lte tfoot {
+        background-color: #f8f9fa;
+        border-top: 2px solid var(--lte-border-color, #dee2e6);
+        font-weight: 500;
+    }
+    .table-lte-striped tbody tr:nth-of-type(even) {
+        background-color: rgba(0, 0, 0, 0.02);
+    }
+    .table-lte-hoverable tbody tr {
+        transition: background-color var(--lte-transition-speed, 0.3s) ease;
+    }
+    .table-lte-hoverable tbody tr:hover {
+        background-color: rgba(0, 0, 0, 0.04);
+    }
+    .table-lte-bordered {
+        border: 1px solid var(--lte-border-color, #dee2e6);
+    }
+    .table-lte-bordered th,
+    .table-lte-bordered td {
+        border: 1px solid var(--lte-border-color, #dee2e6);
+    }
+    .table-lte-compact th,
+    .table-lte-compact td {
+        padding: 0.375rem 0.75rem;
+    }
+    /* Dark mode */
+    .dark .table-lte-wrapper {
+        background-color: #1f2937;
+        border-color: #374151;
+    }
+    .dark .table-lte {
+        color: #e5e7eb;
+    }
+    .dark .table-lte thead {
+        background-color: rgba(55, 65, 81, 0.5);
+        border-bottom-color: #374151;
+    }
+    .dark .table-lte tbody {
+        background-color: transparent;
+    }
+    .dark .table-lte tfoot {
+        background-color: rgba(55, 65, 81, 0.5);
+        border-top-color: #374151;
+    }
+    .dark .table-lte-striped tbody tr:nth-of-type(even) {
+        background-color: rgba(255, 255, 255, 0.02);
+    }
+    .dark .table-lte-hoverable tbody tr:hover {
+        background-color: rgba(255, 255, 255, 0.04);
+    }
+    .dark .table-lte-bordered th,
+    .dark .table-lte-bordered td {
+        border-color: #374151;
+    }
+</style>
+
+<div @class(['table-lte-wrapper' => $responsive])>
     <table 
         {{ $attributes->class([
-            'w-full text-theme-sm',
-            '[&_tbody_tr:nth-child(even)]:bg-gray-50 dark:[&_tbody_tr:nth-child(even)]:bg-gray-800/50' => $striped,
+            'table-lte',
+            'table-lte-striped' => $striped,
+            'table-lte-hoverable' => $hoverable,
+            'table-lte-bordered' => $bordered,
+            'table-lte-compact' => $compact,
         ]) }}
         data-hoverable="{{ $hoverable ? 'true' : 'false' }}"
         data-compact="{{ $compact ? 'true' : 'false' }}"
     >
         @if(isset($head))
-            <thead class="border-b border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-800/50">
+            <thead>
                 <tr>
                     {{ $head }}
                 </tr>
             </thead>
         @endif
-        <tbody class="divide-y divide-gray-200 dark:divide-gray-800">
+        <tbody>
             {{ $slot }}
         </tbody>
         @if(isset($foot))
-            <tfoot class="border-t border-gray-200 bg-gray-50 font-medium dark:border-gray-800 dark:bg-gray-800/50">
+            <tfoot>
                 {{ $foot }}
             </tfoot>
         @endif