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

@@ -1,5 +1,5 @@
 {{--
-    Toggle/Switch Component - TailAdmin style
+    Toggle/Switch Component - AdminLTE style
     
     Usage:
     <x-proxmox::ui.toggle wire:model="enabled" label="Enable Feature" />
@@ -11,34 +11,116 @@
     'disabled' => false,
 ])
 
-<label {{ $attributes->only('class')->class(['flex cursor-pointer items-center justify-between gap-4']) }}>
+<style>
+    .toggle-wrapper-lte {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 1rem;
+        cursor: pointer;
+    }
+    .toggle-wrapper-lte-disabled {
+        cursor: not-allowed;
+        opacity: 0.65;
+    }
+    .toggle-content-lte {
+        display: flex;
+        flex-direction: column;
+        gap: 0.125rem;
+    }
+    .toggle-label-lte {
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: #495057;
+    }
+    .toggle-description-lte {
+        font-size: 0.8125rem;
+        color: var(--lte-secondary, #6c757d);
+    }
+    .toggle-switch-lte {
+        position: relative;
+        flex-shrink: 0;
+    }
+    .toggle-input-lte {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+    }
+    .toggle-track-lte {
+        display: block;
+        width: 2.75rem;
+        height: 1.5rem;
+        background-color: #dee2e6;
+        border-radius: 9999px;
+        border: 2px solid transparent;
+        transition: background-color var(--lte-transition-speed, 0.3s) ease;
+    }
+    .toggle-input-lte:checked + .toggle-track-lte {
+        background-color: var(--lte-primary, #0d6efd);
+    }
+    .toggle-input-lte:focus-visible + .toggle-track-lte {
+        outline: none;
+        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+    }
+    .toggle-input-lte:disabled + .toggle-track-lte {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+    .toggle-thumb-lte {
+        position: absolute;
+        top: 0.125rem;
+        left: 0.125rem;
+        width: 1.25rem;
+        height: 1.25rem;
+        background-color: #fff;
+        border-radius: 9999px;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+        transition: transform var(--lte-transition-speed, 0.3s) ease;
+        pointer-events: none;
+    }
+    .toggle-input-lte:checked ~ .toggle-thumb-lte {
+        transform: translateX(1.25rem);
+    }
+    /* Dark mode */
+    .dark .toggle-label-lte {
+        color: #d1d5db;
+    }
+    .dark .toggle-description-lte {
+        color: #9ca3af;
+    }
+    .dark .toggle-track-lte {
+        background-color: #374151;
+    }
+    .dark .toggle-input-lte:checked + .toggle-track-lte {
+        background-color: var(--lte-primary, #0d6efd);
+    }
+</style>
+
+<label {{ $attributes->only('class')->class(['toggle-wrapper-lte', 'toggle-wrapper-lte-disabled' => $disabled]) }}>
     @if($label || $description)
-        <div class="space-y-0.5">
+        <div class="toggle-content-lte">
             @if($label)
-                <span class="text-theme-sm font-medium text-gray-700 dark:text-gray-300">{{ $label }}</span>
+                <span class="toggle-label-lte">{{ $label }}</span>
             @endif
             @if($description)
-                <p class="text-theme-xs text-gray-500 dark:text-gray-400">{{ $description }}</p>
+                <p class="toggle-description-lte">{{ $description }}</p>
             @endif
         </div>
     @endif
     
-    <div class="relative">
+    <div class="toggle-switch-lte">
         <input
             type="checkbox"
             {{ $attributes->whereDoesntStartWith('class')->merge(['disabled' => $disabled]) }}
-            class="peer sr-only"
+            class="toggle-input-lte"
         />
-        <div @class([
-            'block h-6 w-11 rounded-full border-2 border-transparent transition-colors duration-200',
-            'bg-gray-200 peer-checked:bg-brand-500',
-            'peer-focus-visible:outline-none peer-focus-visible:ring-3 peer-focus-visible:ring-brand-500/20',
-            'peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
-            'dark:bg-gray-700 dark:peer-checked:bg-brand-500',
-        ])></div>
-        <div @class([
-            'pointer-events-none absolute left-0.5 top-0.5 size-5 rounded-full bg-white shadow-theme-sm ring-0 transition-transform duration-200',
-            'peer-checked:translate-x-5',
-        ])></div>
+        <div class="toggle-track-lte"></div>
+        <div class="toggle-thumb-lte"></div>
     </div>
 </label>