Migrate UI components from AdminLTE to LucentUI Theme using Tailwind CSS

- Updated tab-panel component to use Tailwind for styling and transitions.
- Refactored table-row component to implement Tailwind classes for hover effects and borders.
- Converted table-td component to utilize Tailwind for alignment and text styles.
- Changed table-th component to apply Tailwind for header styling and sorting indicators.
- Revised table component to adopt Tailwind for layout, borders, and responsive design.
- Enhanced tabs component with Tailwind for navigation styles and transitions.
- Updated toggle component to use Tailwind for switch styles and accessibility.
- Refactored tooltip component to implement Tailwind for positioning and styling.
- Added visual enhancements to app.css for improved UI interactions and animations.

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

@@ -3,38 +3,37 @@
     ===================================
     
     This file documents all available UI components for the Proxmox server views.
-    All components styled using AdminLTE CSS Framework patterns from:
-    https://github.com/ColorlibHQ/AdminLTE/releases (v4 - Bootstrap 5)
+    All components styled using LucentUI Theme with Tailwind CSS.
+    Migrated from AdminLTE to pure Tailwind utility classes.
     
-    AdminLTE Design Patterns:
-    - Card: card-lte with box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2)
-    - Typography: font-size .875rem (14px), font-family "Source Sans Pro"
-    - Text Colors: #212529 (headings), #6c757d (muted), #495057 (body)
-    - Layout: Bootstrap grid with gap utilities
-    - Transitions: .3s for all interactions (--lte-transition-speed)
-    - Shadows: 0 .5rem 1rem rgba(0,0,0,.15) for modals
-    - Borders: border-radius .375rem (--lte-border-radius)
+    LucentUI Design Patterns:
+    - Card: bg-background border border-neutral rounded-xl shadow-sm
+    - Typography: text-sm (14px), font-sans
+    - Text Colors: text-primary (headings), text-secondary (muted)
+    - Layout: Tailwind flex/grid with gap utilities
+    - Transitions: duration-200 for interactions
+    - Shadows: shadow-xl for modals
+    - Borders: rounded-lg (0.5rem)
     
-    AdminLTE Color System (Bootstrap 5):
-    - Primary: #0d6efd (blue)
-    - Secondary: #6c757d (gray)
-    - Success: #198754 (green)
-    - Danger: #dc3545 (red)
-    - Warning: #ffc107 (yellow)
-    - Info: #0dcaf0 (cyan)
+    LucentUI Color System (Semantic):
+    - Primary: bg-primary, text-primary, border-primary
+    - Success: bg-success, text-success
+    - Error: bg-error, text-error  
+    - Warning: bg-warning, text-warning
+    - Info: bg-info, text-info
+    - Neutral: border-neutral, bg-neutral
+    - Background: bg-background, bg-background-secondary
     
-    CSS Classes:
-    - .card-lte: Card container
-    - .btn-lte-primary, .btn-lte-secondary, etc.: Buttons
-    - .alert-lte-info, .alert-lte-success, etc.: Alerts
-    - .badge-lte-primary, .badge-lte-success, etc.: Badges
-    - .form-control-lte: Form inputs
-    - .form-select-lte: Select dropdowns
-    - .toggle-lte: Toggle switches
-    - .table-lte: Tables
-    - .tabs-lte: Tab navigation
-    - .dropdown-lte: Dropdowns
-    - .modal-lte: Modals
+    Tailwind Utility Patterns:
+    - Cards: bg-background border border-neutral rounded-xl shadow-sm
+    - Buttons: px-4 py-2 rounded-lg font-medium transition-all duration-200
+    - Alerts: p-4 rounded-lg border
+    - Badges: px-2 py-0.5 text-xs font-medium rounded-full
+    - Inputs: w-full px-4 py-2 border border-neutral rounded-lg focus:ring-2 focus:ring-primary/25
+    - Tables: w-full divide-y divide-neutral
+    - Tabs: flex gap-1 border-b border-neutral
+    - Dropdowns: absolute z-50 bg-background border border-neutral rounded-lg shadow-lg
+    - Modals: fixed inset-0 z-50 flex items-center justify-center
     
     === LAYOUT COMPONENTS ===