diff --git a/HeadySystems_v13/apps/heady_admin_ui/ADVANCED_FEATURES.md b/HeadySystems_v13/apps/heady_admin_ui/ADVANCED_FEATURES.md
new file mode 100644
index 00000000..7f9d43fb
--- /dev/null
+++ b/HeadySystems_v13/apps/heady_admin_ui/ADVANCED_FEATURES.md
@@ -0,0 +1,309 @@
+# Advanced UI Features - Heady Admin Dashboard
+
+## Overview
+This document describes the advanced UI features added to the Heady Admin Dashboard, including the command palette, keyboard shortcuts modal, toast notifications, and loading skeletons.
+
+## Features
+
+### 1. Command Palette
+A Spotlight/VS Code style command palette for quick navigation and actions.
+
+**Trigger:** `Ctrl+K` (Windows/Linux) or `Cmd+K` (Mac)
+
+**Features:**
+- Fuzzy search through all available commands
+- Categorized commands (Navigation, Verticals, Actions, Help)
+- Keyboard navigation with arrow keys
+- Recent commands tracking
+- Glassmorphism modal design
+
+**Available Commands:**
+- Navigate to Dashboard, Verticals, Governance, Activity
+- Navigate to each vertical (Make, Field, Legacy, Kinetic, Bio, Ed, Guard)
+- Toggle theme (Dark/Light)
+- Open notifications
+- View keyboard shortcuts
+- Search documentation
+
+**API:**
+```javascript
+// Open command palette programmatically
+window.commandPalette.open();
+
+// Close command palette
+window.commandPalette.close();
+
+// Toggle command palette
+window.commandPalette.toggle();
+```
+
+### 2. Keyboard Shortcuts Modal
+A comprehensive reference for all keyboard shortcuts in the application.
+
+**Trigger:** `?` key (when not in an input field)
+
+**Categories:**
+- **Navigation:** Page navigation shortcuts
+- **Actions:** Theme toggle, notifications
+- **Modals:** Modal interaction shortcuts
+
+**Shortcuts List:**
+- `Ctrl/Cmd + K` - Open command palette
+- `?` - Show keyboard shortcuts
+- `Alt + D` - Go to Dashboard
+- `Alt + V` - Go to Verticals
+- `Alt + G` - Go to Governance
+- `Alt + A` - Go to Activity
+- `Alt + T` - Toggle theme
+- `Alt + N` - Open notifications
+- `Escape` - Close any modal
+
+**API:**
+```javascript
+// Open shortcuts modal programmatically
+window.shortcutsModal.open();
+
+// Close shortcuts modal
+window.shortcutsModal.close();
+
+// Toggle shortcuts modal
+window.shortcutsModal.toggle();
+```
+
+### 3. Toast Notification System
+A modern toast notification system for user feedback.
+
+**Types:**
+- `success` - Green with checkmark icon
+- `error` - Red with X icon
+- `warning` - Orange with warning icon
+- `info` - Blue with info icon
+
+**Features:**
+- Auto-dismiss with configurable duration (default 5 seconds)
+- Manual dismiss with close button
+- Stack multiple notifications
+- Slide-in animation from top-right
+- Progress bar showing time until auto-dismiss
+- Accessible with ARIA live regions
+
+**API:**
+```javascript
+// Show a success toast
+window.toastSystem.showToast({
+ type: 'success',
+ title: 'Success!',
+ message: 'Operation completed successfully',
+ duration: 5000 // optional, default 5000ms, 0 = no auto-dismiss
+});
+
+// Show an error toast
+window.toastSystem.showToast({
+ type: 'error',
+ title: 'Error',
+ message: 'Something went wrong',
+ duration: 0 // Will not auto-dismiss
+});
+
+// Show a warning toast
+window.toastSystem.showToast({
+ type: 'warning',
+ title: 'Warning',
+ message: 'Please review your input'
+});
+
+// Show an info toast
+window.toastSystem.showToast({
+ type: 'info',
+ title: 'Info',
+ message: 'New update available'
+});
+
+// Dismiss a specific toast
+window.toastSystem.dismissToast(toastId);
+
+// Dismiss all toasts
+window.toastSystem.dismissAll();
+```
+
+### 4. Loading Skeleton Screens
+Skeleton loading states for improved perceived performance.
+
+**Components:**
+- `.skeleton` - Base skeleton element with shimmer animation
+- `.skeleton-text` - Text line skeleton (with width variants: `.w-full`, `.w-75`, `.w-50`, `.w-25`)
+- `.skeleton-card` - Card skeleton with header, body, and footer
+- `.skeleton-chart` - Chart skeleton with animated bars
+- `.skeleton-avatar` - Circular avatar skeleton (sizes: `.small`, `.large`)
+- `.skeleton-button` - Button skeleton
+- `.skeleton-badge` - Badge skeleton
+
+**Usage:**
+```html
+
+
+
+
+
+
+
+
+
+
+```
+
+See `skeleton-demo.html` for more examples.
+
+## File Structure
+
+```
+HeadySystems_v13/apps/heady_admin_ui/
+├── css/
+│ ├── modals.css # Modal and toast styles
+│ └── skeletons.css # Loading skeleton styles
+├── js/
+│ ├── command-palette.js # Command palette implementation
+│ ├── shortcuts.js # Keyboard shortcuts modal
+│ └── toast.js # Toast notification system
+├── index.html # Main dashboard (updated)
+├── skeleton-demo.html # Skeleton components demo
+└── ADVANCED_FEATURES.md # This file
+```
+
+## Design Philosophy
+
+### Glassmorphism
+All modals use a glassmorphism design with:
+- Frosted glass blur effect
+- Semi-transparent backgrounds
+- Subtle borders and shadows
+- Smooth animations
+
+### Accessibility
+- ARIA labels on all interactive elements
+- Keyboard navigation support
+- Focus management in modals
+- Screen reader announcements
+- High contrast mode support
+- Reduced motion support for users who prefer it
+
+### Responsive Design
+- Mobile-first approach
+- Touch-friendly on mobile devices
+- Adaptive layouts for different screen sizes
+- Graceful degradation on older browsers
+
+### Performance
+- CSS animations preferred over JavaScript
+- Minimal DOM manipulation
+- No external dependencies
+- Lazy initialization
+
+## Browser Support
+- Chrome 90+
+- Firefox 88+
+- Safari 14+
+- Edge 90+
+
+## Integration Examples
+
+### Show toast on successful form submission
+```javascript
+document.querySelector('form').addEventListener('submit', async (e) => {
+ e.preventDefault();
+
+ try {
+ await submitForm();
+ window.toastSystem.showToast({
+ type: 'success',
+ title: 'Form Submitted',
+ message: 'Your data has been saved successfully'
+ });
+ } catch (error) {
+ window.toastSystem.showToast({
+ type: 'error',
+ title: 'Submission Failed',
+ message: error.message
+ });
+ }
+});
+```
+
+### Show skeleton while loading data
+```html
+
+
+
+
+```
+
+### Custom command in command palette
+```javascript
+// Add a custom command to the palette
+window.commandPalette.commands.push({
+ id: 'custom-action',
+ name: 'My Custom Action',
+ icon: '⚡',
+ category: 'Custom',
+ action: () => {
+ console.log('Custom action executed');
+ window.toastSystem.showToast({
+ type: 'success',
+ title: 'Custom Action',
+ message: 'Action completed'
+ });
+ },
+ keywords: ['custom', 'action', 'my']
+});
+```
+
+## Theme Support
+All features support both dark and light themes:
+- Dark theme (default)
+- Light theme (toggle with `Alt+T` or theme button)
+
+Themes are persisted in `localStorage` and apply automatically on page load.
+
+## Future Enhancements
+Potential future improvements:
+- Command palette command history
+- Toast notification queue management
+- More skeleton component variants
+- Customizable keyboard shortcuts
+- Command palette plugins/extensions
+- Toast notification templates
+
+## License
+Part of HeadySystems Inc. © 2026 | Invented by Eric Haywood
diff --git a/HeadySystems_v13/apps/heady_admin_ui/css/modals.css b/HeadySystems_v13/apps/heady_admin_ui/css/modals.css
new file mode 100644
index 00000000..25fd6e70
--- /dev/null
+++ b/HeadySystems_v13/apps/heady_admin_ui/css/modals.css
@@ -0,0 +1,705 @@
+/* ========================================
+ Heady Admin UI - Modal Styles
+ Glassmorphism modals with blur effects
+ ======================================== */
+
+/* Modal Overlay */
+.modal-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.7);
+ backdrop-filter: blur(10px);
+ -webkit-backdrop-filter: blur(10px);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 9999;
+ padding: 1rem;
+ animation: modal-fade-in 0.3s ease;
+}
+
+@keyframes modal-fade-in {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+/* Modal Content */
+.modal-content {
+ background: rgba(255, 255, 255, 0.1);
+ backdrop-filter: blur(20px);
+ -webkit-backdrop-filter: blur(20px);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: var(--radius-xl);
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
+ 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
+ max-width: 600px;
+ width: 100%;
+ max-height: 80vh;
+ overflow: hidden;
+ animation: modal-slide-up 0.3s ease;
+}
+
+@keyframes modal-slide-up {
+ from {
+ opacity: 0;
+ transform: translateY(30px) scale(0.95);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0) scale(1);
+ }
+}
+
+/* Light theme adjustments */
+body.light-theme .modal-content {
+ background: rgba(255, 255, 255, 0.9);
+ border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+/* ========================================
+ Command Palette Styles
+ ======================================== */
+
+.command-palette {
+ max-width: 640px;
+}
+
+.command-palette-header {
+ padding: 1.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.command-palette-input {
+ width: 100%;
+ background: rgba(255, 255, 255, 0.1);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: var(--radius-md);
+ padding: 0.75rem 1rem;
+ font-size: 1rem;
+ color: var(--text-primary);
+ outline: none;
+ transition: all 0.2s ease;
+}
+
+.command-palette-input::placeholder {
+ color: var(--text-secondary);
+}
+
+.command-palette-input:focus {
+ background: rgba(255, 255, 255, 0.15);
+ border-color: var(--color-primary);
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
+}
+
+body.light-theme .command-palette-input {
+ background: rgba(0, 0, 0, 0.05);
+ border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+body.light-theme .command-palette-input:focus {
+ background: rgba(0, 0, 0, 0.08);
+}
+
+.command-palette-body {
+ max-height: 400px;
+ overflow-y: auto;
+ overflow-x: hidden;
+}
+
+/* Custom scrollbar */
+.command-palette-body::-webkit-scrollbar {
+ width: 8px;
+}
+
+.command-palette-body::-webkit-scrollbar-track {
+ background: rgba(255, 255, 255, 0.05);
+}
+
+.command-palette-body::-webkit-scrollbar-thumb {
+ background: rgba(255, 255, 255, 0.2);
+ border-radius: 4px;
+}
+
+.command-palette-body::-webkit-scrollbar-thumb:hover {
+ background: rgba(255, 255, 255, 0.3);
+}
+
+.command-results {
+ padding: 0.5rem;
+}
+
+.command-section {
+ margin-bottom: 1rem;
+}
+
+.command-section:last-child {
+ margin-bottom: 0;
+}
+
+.command-section-title {
+ font-size: 0.75rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ color: var(--text-secondary);
+ padding: 0.5rem 0.75rem;
+ letter-spacing: 0.05em;
+}
+
+.command-item {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ padding: 0.75rem 1rem;
+ border-radius: var(--radius-md);
+ cursor: pointer;
+ transition: all 0.15s ease;
+ margin: 0.25rem 0;
+}
+
+.command-item:hover,
+.command-item.selected {
+ background: rgba(99, 102, 241, 0.2);
+ transform: translateX(4px);
+}
+
+body.light-theme .command-item:hover,
+body.light-theme .command-item.selected {
+ background: rgba(99, 102, 241, 0.15);
+}
+
+.command-icon {
+ font-size: 1.25rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2rem;
+ height: 2rem;
+ flex-shrink: 0;
+}
+
+.command-name {
+ flex: 1;
+ font-size: 0.9rem;
+ color: var(--text-primary);
+}
+
+.no-results {
+ padding: 2rem;
+ text-align: center;
+ color: var(--text-secondary);
+ font-size: 0.9rem;
+}
+
+.command-palette-footer {
+ padding: 1rem 1.5rem;
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.command-palette-hints {
+ display: flex;
+ gap: 1.5rem;
+ justify-content: center;
+ flex-wrap: wrap;
+ font-size: 0.75rem;
+ color: var(--text-secondary);
+}
+
+.command-palette-hints kbd {
+ background: rgba(255, 255, 255, 0.1);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 4px;
+ padding: 0.25rem 0.5rem;
+ font-family: var(--font-mono);
+ font-size: 0.7rem;
+ margin: 0 0.25rem;
+}
+
+body.light-theme .command-palette-hints kbd {
+ background: rgba(0, 0, 0, 0.08);
+ border: 1px solid rgba(0, 0, 0, 0.15);
+}
+
+/* ========================================
+ Shortcuts Modal Styles
+ ======================================== */
+
+.shortcuts-modal {
+ max-width: 700px;
+}
+
+.shortcuts-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 1.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.shortcuts-header h2 {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-size: 1.5rem;
+ font-weight: 600;
+ color: var(--text-primary);
+ margin: 0;
+}
+
+.modal-close {
+ background: rgba(255, 255, 255, 0.1);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: var(--radius-md);
+ width: 2rem;
+ height: 2rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ color: var(--text-primary);
+ font-size: 1.25rem;
+}
+
+.modal-close:hover {
+ background: rgba(255, 255, 255, 0.2);
+ transform: scale(1.1);
+}
+
+body.light-theme .modal-close {
+ background: rgba(0, 0, 0, 0.05);
+ border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.shortcuts-body {
+ padding: 1.5rem;
+ max-height: 60vh;
+ overflow-y: auto;
+}
+
+.shortcuts-body::-webkit-scrollbar {
+ width: 8px;
+}
+
+.shortcuts-body::-webkit-scrollbar-track {
+ background: rgba(255, 255, 255, 0.05);
+}
+
+.shortcuts-body::-webkit-scrollbar-thumb {
+ background: rgba(255, 255, 255, 0.2);
+ border-radius: 4px;
+}
+
+.shortcuts-section {
+ margin-bottom: 2rem;
+}
+
+.shortcuts-section:last-child {
+ margin-bottom: 0;
+}
+
+.shortcuts-category {
+ font-size: 1rem;
+ font-weight: 600;
+ color: var(--color-primary);
+ margin-bottom: 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.shortcuts-list {
+ display: flex;
+ flex-direction: column;
+ gap: 0.75rem;
+}
+
+.shortcut-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 1rem;
+ padding: 0.75rem 1rem;
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: var(--radius-md);
+ transition: all 0.2s ease;
+}
+
+.shortcut-item:hover {
+ background: rgba(255, 255, 255, 0.08);
+ transform: translateX(4px);
+}
+
+body.light-theme .shortcut-item {
+ background: rgba(0, 0, 0, 0.03);
+ border: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+body.light-theme .shortcut-item:hover {
+ background: rgba(0, 0, 0, 0.05);
+}
+
+.shortcut-keys {
+ display: flex;
+ gap: 0.5rem;
+ align-items: center;
+ flex-shrink: 0;
+}
+
+.shortcut-keys kbd {
+ background: rgba(255, 255, 255, 0.15);
+ border: 1px solid rgba(255, 255, 255, 0.25);
+ border-bottom-width: 3px;
+ border-radius: 6px;
+ padding: 0.4rem 0.75rem;
+ font-family: var(--font-mono);
+ font-size: 0.8rem;
+ font-weight: 600;
+ color: var(--text-primary);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+ min-width: 2rem;
+ text-align: center;
+}
+
+body.light-theme .shortcut-keys kbd {
+ background: rgba(0, 0, 0, 0.08);
+ border: 1px solid rgba(0, 0, 0, 0.15);
+ border-bottom-width: 3px;
+}
+
+.shortcut-description {
+ flex: 1;
+ font-size: 0.9rem;
+ color: var(--text-secondary);
+}
+
+.shortcuts-footer {
+ padding: 1rem 1.5rem;
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ background: rgba(0, 0, 0, 0.2);
+}
+
+.shortcuts-hint {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+ font-size: 0.85rem;
+ color: var(--text-secondary);
+ margin: 0;
+}
+
+.shortcuts-hint kbd {
+ background: rgba(255, 255, 255, 0.1);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 4px;
+ padding: 0.25rem 0.5rem;
+ font-family: var(--font-mono);
+ font-size: 0.75rem;
+}
+
+/* ========================================
+ Responsive Design
+ ======================================== */
+
+@media (max-width: 768px) {
+ .modal-content {
+ max-width: 100%;
+ max-height: 90vh;
+ margin: 0;
+ border-radius: var(--radius-lg);
+ }
+
+ .command-palette,
+ .shortcuts-modal {
+ max-width: 100%;
+ }
+
+ .command-palette-hints,
+ .shortcuts-hint {
+ font-size: 0.7rem;
+ }
+
+ .shortcut-item {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 0.5rem;
+ }
+
+ .shortcut-keys {
+ order: 2;
+ }
+
+ .shortcut-description {
+ order: 1;
+ }
+}
+
+@media (max-width: 480px) {
+ .modal-overlay {
+ padding: 0;
+ }
+
+ .modal-content {
+ border-radius: 0;
+ max-height: 100vh;
+ }
+
+ .command-palette-header,
+ .shortcuts-header {
+ padding: 1rem;
+ }
+
+ .shortcuts-body {
+ padding: 1rem;
+ }
+}
+
+/* ========================================
+ Toast Notification Styles
+ ======================================== */
+
+.toast-container {
+ position: fixed;
+ top: 1rem;
+ right: 1rem;
+ z-index: 10000;
+ display: flex;
+ flex-direction: column;
+ gap: 0.75rem;
+ pointer-events: none;
+ max-width: 400px;
+}
+
+.toast {
+ background: rgba(255, 255, 255, 0.1);
+ backdrop-filter: blur(20px);
+ -webkit-backdrop-filter: blur(20px);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: var(--radius-lg);
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4),
+ 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
+ padding: 1rem;
+ display: flex;
+ align-items: flex-start;
+ gap: 0.75rem;
+ min-width: 320px;
+ pointer-events: all;
+ position: relative;
+ overflow: hidden;
+}
+
+body.light-theme .toast {
+ background: rgba(255, 255, 255, 0.95);
+ border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+/* Toast entrance animation */
+.toast-enter {
+ opacity: 0;
+ transform: translateX(100%) scale(0.9);
+ animation: toast-slide-in 0.3s ease forwards;
+}
+
+@keyframes toast-slide-in {
+ to {
+ opacity: 1;
+ transform: translateX(0) scale(1);
+ }
+}
+
+/* Toast exit animation */
+.toast-exit {
+ animation: toast-slide-out 0.3s ease forwards;
+}
+
+@keyframes toast-slide-out {
+ to {
+ opacity: 0;
+ transform: translateX(100%) scale(0.9);
+ }
+}
+
+/* Toast icon */
+.toast-icon {
+ width: 2rem;
+ height: 2rem;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 1rem;
+ font-weight: bold;
+ flex-shrink: 0;
+}
+
+.toast-icon-success {
+ background: var(--color-success);
+ color: white;
+}
+
+.toast-icon-error {
+ background: var(--color-error);
+ color: white;
+}
+
+.toast-icon-warning {
+ background: var(--color-warning);
+ color: white;
+}
+
+.toast-icon-info {
+ background: var(--color-info);
+ color: white;
+}
+
+/* Toast content */
+.toast-content {
+ flex: 1;
+ min-width: 0;
+}
+
+.toast-title {
+ font-weight: 600;
+ font-size: 0.9rem;
+ color: var(--text-primary);
+ margin-bottom: 0.25rem;
+}
+
+.toast-message {
+ font-size: 0.85rem;
+ color: var(--text-secondary);
+ line-height: 1.4;
+}
+
+/* Toast close button */
+.toast-close {
+ background: transparent;
+ border: none;
+ color: var(--text-secondary);
+ font-size: 1.25rem;
+ cursor: pointer;
+ padding: 0;
+ width: 1.5rem;
+ height: 1.5rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 4px;
+ transition: all 0.2s ease;
+ flex-shrink: 0;
+}
+
+.toast-close:hover {
+ background: rgba(255, 255, 255, 0.1);
+ color: var(--text-primary);
+}
+
+body.light-theme .toast-close:hover {
+ background: rgba(0, 0, 0, 0.05);
+}
+
+/* Toast progress bar */
+.toast-progress {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 3px;
+ background: rgba(255, 255, 255, 0.1);
+ overflow: hidden;
+}
+
+.toast-progress-bar {
+ height: 100%;
+ width: 100%;
+ background: currentColor;
+}
+
+.toast-success .toast-progress-bar {
+ color: var(--color-success);
+}
+
+.toast-error .toast-progress-bar {
+ color: var(--color-error);
+}
+
+.toast-warning .toast-progress-bar {
+ color: var(--color-warning);
+}
+
+.toast-info .toast-progress-bar {
+ color: var(--color-info);
+}
+
+/* Toast type variants with left border accent */
+.toast-success {
+ border-left: 4px solid var(--color-success);
+}
+
+.toast-error {
+ border-left: 4px solid var(--color-error);
+}
+
+.toast-warning {
+ border-left: 4px solid var(--color-warning);
+}
+
+.toast-info {
+ border-left: 4px solid var(--color-info);
+}
+
+/* ========================================
+ Accessibility
+ ======================================== */
+
+/* Reduce motion for users who prefer it */
+@media (prefers-reduced-motion: reduce) {
+ .modal-overlay,
+ .modal-content,
+ .command-item,
+ .shortcut-item,
+ .toast {
+ animation: none;
+ transition: none;
+ }
+}
+
+/* High contrast mode */
+@media (prefers-contrast: high) {
+ .modal-content {
+ border: 2px solid var(--text-primary);
+ }
+
+ .command-item.selected,
+ .shortcut-item:hover {
+ outline: 2px solid var(--color-primary);
+ }
+
+ .toast {
+ border: 2px solid currentColor;
+ }
+}
+
+/* Mobile responsiveness for toasts */
+@media (max-width: 768px) {
+ .toast-container {
+ top: 0;
+ right: 0;
+ left: 0;
+ max-width: 100%;
+ padding: 1rem;
+ }
+
+ .toast {
+ min-width: 0;
+ width: 100%;
+ }
+}
diff --git a/HeadySystems_v13/apps/heady_admin_ui/css/skeletons.css b/HeadySystems_v13/apps/heady_admin_ui/css/skeletons.css
new file mode 100644
index 00000000..8d20f150
--- /dev/null
+++ b/HeadySystems_v13/apps/heady_admin_ui/css/skeletons.css
@@ -0,0 +1,395 @@
+/* ========================================
+ Heady Admin UI - Skeleton Loading States
+ Shimmer effect loading placeholders
+ ======================================== */
+
+/* Base Skeleton Styles */
+.skeleton {
+ background: linear-gradient(
+ 90deg,
+ rgba(255, 255, 255, 0.05) 0%,
+ rgba(255, 255, 255, 0.1) 40%,
+ rgba(255, 255, 255, 0.05) 80%,
+ rgba(255, 255, 255, 0.05) 100%
+ );
+ background-size: 200% 100%;
+ animation: skeleton-shimmer 2s ease-in-out infinite;
+ border-radius: var(--radius-md);
+}
+
+/* Light theme skeleton */
+body.light-theme .skeleton {
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 0, 0, 0.05) 0%,
+ rgba(0, 0, 0, 0.1) 40%,
+ rgba(0, 0, 0, 0.05) 80%,
+ rgba(0, 0, 0, 0.05) 100%
+ );
+ background-size: 200% 100%;
+}
+
+@keyframes skeleton-shimmer {
+ 0% {
+ background-position: 200% 0;
+ }
+ 100% {
+ background-position: -200% 0;
+ }
+}
+
+/* Skeleton Text Lines */
+.skeleton-text {
+ height: 1rem;
+ margin-bottom: 0.75rem;
+ border-radius: 4px;
+}
+
+.skeleton-text:last-child {
+ margin-bottom: 0;
+}
+
+/* Different text widths for natural look */
+.skeleton-text.w-full {
+ width: 100%;
+}
+
+.skeleton-text.w-75 {
+ width: 75%;
+}
+
+.skeleton-text.w-50 {
+ width: 50%;
+}
+
+.skeleton-text.w-25 {
+ width: 25%;
+}
+
+/* Skeleton heading - larger */
+.skeleton-text.heading {
+ height: 1.75rem;
+ width: 60%;
+ margin-bottom: 1.5rem;
+}
+
+/* Skeleton subheading */
+.skeleton-text.subheading {
+ height: 1.25rem;
+ width: 40%;
+ margin-bottom: 1rem;
+}
+
+/* Skeleton Card */
+.skeleton-card {
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: var(--radius-lg);
+ padding: 1.5rem;
+ position: relative;
+ overflow: hidden;
+}
+
+body.light-theme .skeleton-card {
+ background: rgba(0, 0, 0, 0.03);
+ border: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+/* Shimmer overlay for cards */
+.skeleton-card::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: -100%;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(
+ 90deg,
+ transparent 0%,
+ rgba(255, 255, 255, 0.1) 50%,
+ transparent 100%
+ );
+ animation: skeleton-card-shimmer 2s ease-in-out infinite;
+}
+
+@keyframes skeleton-card-shimmer {
+ 0% {
+ left: -100%;
+ }
+ 100% {
+ left: 100%;
+ }
+}
+
+/* Skeleton card content */
+.skeleton-card-header {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ margin-bottom: 1.5rem;
+}
+
+.skeleton-card-icon {
+ width: 3rem;
+ height: 3rem;
+ border-radius: var(--radius-md);
+}
+
+.skeleton-card-title {
+ flex: 1;
+}
+
+.skeleton-card-body {
+ display: flex;
+ flex-direction: column;
+ gap: 0.75rem;
+}
+
+.skeleton-card-footer {
+ margin-top: 1.5rem;
+ padding-top: 1rem;
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+body.light-theme .skeleton-card-footer {
+ border-top: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+/* Skeleton Chart */
+.skeleton-chart {
+ width: 100%;
+ height: 250px;
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: var(--radius-lg);
+ position: relative;
+ overflow: hidden;
+}
+
+body.light-theme .skeleton-chart {
+ background: rgba(0, 0, 0, 0.03);
+ border: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+/* Chart bars animation */
+.skeleton-chart-bars {
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-around;
+ height: 100%;
+ padding: 2rem 1rem;
+ gap: 0.5rem;
+}
+
+.skeleton-chart-bar {
+ flex: 1;
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 4px 4px 0 0;
+ animation: skeleton-chart-pulse 1.5s ease-in-out infinite;
+}
+
+body.light-theme .skeleton-chart-bar {
+ background: rgba(0, 0, 0, 0.08);
+}
+
+@keyframes skeleton-chart-pulse {
+ 0%, 100% {
+ opacity: 0.5;
+ }
+ 50% {
+ opacity: 1;
+ }
+}
+
+/* Different heights for natural chart look */
+.skeleton-chart-bar:nth-child(1) {
+ height: 60%;
+ animation-delay: 0s;
+}
+
+.skeleton-chart-bar:nth-child(2) {
+ height: 85%;
+ animation-delay: 0.2s;
+}
+
+.skeleton-chart-bar:nth-child(3) {
+ height: 45%;
+ animation-delay: 0.4s;
+}
+
+.skeleton-chart-bar:nth-child(4) {
+ height: 70%;
+ animation-delay: 0.6s;
+}
+
+.skeleton-chart-bar:nth-child(5) {
+ height: 95%;
+ animation-delay: 0.8s;
+}
+
+.skeleton-chart-bar:nth-child(6) {
+ height: 55%;
+ animation-delay: 1s;
+}
+
+/* Skeleton Avatar/Circle */
+.skeleton-avatar {
+ width: 3rem;
+ height: 3rem;
+ border-radius: 50%;
+}
+
+.skeleton-avatar.small {
+ width: 2rem;
+ height: 2rem;
+}
+
+.skeleton-avatar.large {
+ width: 5rem;
+ height: 5rem;
+}
+
+/* Skeleton Button */
+.skeleton-button {
+ height: 2.5rem;
+ width: 120px;
+ border-radius: var(--radius-md);
+}
+
+.skeleton-button.full {
+ width: 100%;
+}
+
+/* Skeleton Grid Layout */
+.skeleton-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+ gap: 1.5rem;
+}
+
+/* Skeleton List */
+.skeleton-list {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+.skeleton-list-item {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ padding: 1rem;
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: var(--radius-md);
+}
+
+body.light-theme .skeleton-list-item {
+ background: rgba(0, 0, 0, 0.03);
+ border: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+.skeleton-list-item-content {
+ flex: 1;
+}
+
+/* Skeleton Badge */
+.skeleton-badge {
+ height: 1.5rem;
+ width: 60px;
+ border-radius: var(--radius-full);
+}
+
+/* Skeleton Table */
+.skeleton-table {
+ width: 100%;
+ border-collapse: separate;
+ border-spacing: 0 0.5rem;
+}
+
+.skeleton-table-row {
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: var(--radius-md);
+}
+
+body.light-theme .skeleton-table-row {
+ background: rgba(0, 0, 0, 0.03);
+}
+
+.skeleton-table-cell {
+ padding: 1rem;
+}
+
+.skeleton-table-cell:first-child {
+ border-radius: var(--radius-md) 0 0 var(--radius-md);
+}
+
+.skeleton-table-cell:last-child {
+ border-radius: 0 var(--radius-md) var(--radius-md) 0;
+}
+
+/* Skeleton State Container */
+.skeleton-container {
+ padding: 2rem;
+}
+
+.skeleton-container.centered {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 400px;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+ .skeleton-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .skeleton-chart {
+ height: 200px;
+ }
+
+ .skeleton-card {
+ padding: 1rem;
+ }
+}
+
+/* Accessibility - Reduce motion */
+@media (prefers-reduced-motion: reduce) {
+ .skeleton,
+ .skeleton-card::before,
+ .skeleton-chart-bar {
+ animation: none;
+ }
+}
+
+/* Dark mode specific adjustments */
+@media (prefers-color-scheme: dark) {
+ .skeleton {
+ background: linear-gradient(
+ 90deg,
+ rgba(255, 255, 255, 0.03) 0%,
+ rgba(255, 255, 255, 0.08) 40%,
+ rgba(255, 255, 255, 0.03) 80%,
+ rgba(255, 255, 255, 0.03) 100%
+ );
+ }
+}
+
+/* Example usage classes for convenience */
+.loading {
+ pointer-events: none;
+ user-select: none;
+}
+
+.loading * {
+ visibility: hidden;
+}
+
+.loading .skeleton,
+.loading .skeleton-card,
+.loading .skeleton-chart,
+.loading .skeleton-text {
+ visibility: visible;
+}
diff --git a/HeadySystems_v13/apps/heady_admin_ui/index.html b/HeadySystems_v13/apps/heady_admin_ui/index.html
index 0087274d..a61b4a4b 100644
--- a/HeadySystems_v13/apps/heady_admin_ui/index.html
+++ b/HeadySystems_v13/apps/heady_admin_ui/index.html
@@ -7,6 +7,8 @@
Heady Admin Dashboard
+
+
@@ -467,6 +469,9 @@
+
+
+