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.

themes/lucentui/css/app.css

@@ -1933,3 +1933,190 @@ img {
 .dark .lte-btn-close {
     filter: invert(1) grayscale(100%) brightness(200%);
 }
+
+/* =============================================================================
+   LUCENTUI VISUAL ENHANCEMENTS
+   ============================================================================= */
+
+/* Focus-visible states for keyboard accessibility */
+:focus-visible {
+    outline: 2px solid hsl(var(--color-primary));
+    outline-offset: 2px;
+}
+
+:focus:not(:focus-visible) {
+    outline: none;
+}
+
+/* Status glow for running/active states */
+.status-glow-success {
+    box-shadow: 0 0 10px hsl(var(--color-success) / 0.5);
+    animation: glow-pulse 2s ease-in-out infinite;
+}
+
+@keyframes glow-pulse {
+    0%, 100% { box-shadow: 0 0 10px hsl(var(--color-success) / 0.3); }
+    50% { box-shadow: 0 0 20px hsl(var(--color-success) / 0.6); }
+}
+
+/* Table row hover with left border indicator */
+.table-row-hover {
+    transition: all 0.15s ease;
+}
+
+.table-row-hover:hover {
+    background-color: hsl(var(--color-primary) / 0.05);
+    box-shadow: inset 3px 0 0 hsl(var(--color-primary));
+}
+
+/* Empty state floating animation */
+.empty-state-float {
+    animation: empty-float 3s ease-in-out infinite;
+}
+
+@keyframes empty-float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+}
+
+/* Skeleton pulse variant */
+.skeleton-pulse {
+    animation: skeleton-pulse-anim 1.5s ease-in-out infinite;
+}
+
+@keyframes skeleton-pulse-anim {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+
+/* Interactive lift for cards */
+.interactive-lift {
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.interactive-lift:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.interactive-lift:active {
+    transform: translateY(0);
+}
+
+/* Form error shake animation */
+@keyframes input-shake {
+    0%, 100% { transform: translateX(0); }
+    25% { transform: translateX(-4px); }
+    75% { transform: translateX(4px); }
+}
+
+.form-error-shake {
+    animation: input-shake 0.3s ease-in-out;
+}
+
+/* Ripple effect for buttons */
+.ripple {
+    position: relative;
+    overflow: hidden;
+}
+
+.ripple::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    background-image: radial-gradient(circle, hsl(var(--color-primary)) 10%, transparent 10.01%);
+    background-repeat: no-repeat;
+    background-position: 50%;
+    transform: scale(10, 10);
+    opacity: 0;
+    transition: transform 0.4s, opacity 0.8s;
+}
+
+.ripple:active::after {
+    transform: scale(0, 0);
+    opacity: 0.2;
+    transition: 0s;
+}
+
+/* Striped progress bar animation */
+.progress-striped {
+    background-image: linear-gradient(
+        45deg,
+        rgba(255, 255, 255, 0.15) 25%,
+        transparent 25%,
+        transparent 50%,
+        rgba(255, 255, 255, 0.15) 50%,
+        rgba(255, 255, 255, 0.15) 75%,
+        transparent 75%,
+        transparent
+    );
+    background-size: 1rem 1rem;
+    animation: progress-stripes 1s linear infinite;
+}
+
+@keyframes progress-stripes {
+    0% { background-position: 1rem 0; }
+    100% { background-position: 0 0; }
+}
+
+/* Indeterminate progress bar */
+.progress-indeterminate {
+    background: linear-gradient(
+        90deg,
+        transparent 0%,
+        hsl(var(--color-primary)) 50%,
+        transparent 100%
+    );
+    background-size: 200% 100%;
+    animation: indeterminate-slide 1.5s ease-in-out infinite;
+}
+
+@keyframes indeterminate-slide {
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+}
+
+/* Button glow on hover */
+.btn-glow:hover {
+    box-shadow: 0 0 20px hsl(var(--color-primary) / 0.4);
+}
+
+/* Sidebar active indicator bar */
+.nav-active-bar {
+    position: relative;
+}
+
+.nav-active-bar::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 3px;
+    height: 60%;
+    background: hsl(var(--color-primary));
+    border-radius: 0 2px 2px 0;
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+    .status-glow-success,
+    .empty-state-float,
+    .skeleton-pulse,
+    .status-pulse,
+    .progress-striped,
+    .progress-indeterminate,
+    .ripple::after,
+    .interactive-lift,
+    .form-error-shake,
+    [wire\:navigate],
+    ::view-transition-old(page),
+    ::view-transition-new(page) {
+        animation: none !important;
+        transition: none !important;
+    }
+}