<!-- Modern Admin Styles -->
<link href="https://cdn.tailwindcss.com" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<style>
    :root {
        --primary: #4f46e5;
        --primary-hover: #4338ca;
        --secondary: #6b7280;
        --success: #10b981;
        --danger: #ef4444;
        --warning: #f59e0b;
        --dark: #111827;
        --light: #f9fafb;
        --sidebar-width: 280px;
    }

    body { 
        font-family: 'Inter', sans-serif;
        @apply bg-gray-50 text-gray-800 antialiased;
        min-height: 100vh;
        overflow-x: hidden;
    }
    
    /* Theme Colors */
    .bg-primary { background-color: var(--primary); }
    .bg-secondary { background-color: var(--secondary); }
    .bg-success { background-color: var(--success); }
    .bg-danger { background-color: var(--danger); }
    .bg-warning { background-color: var(--warning); }
    .bg-dark { background-color: var(--dark); }
    .bg-light { background-color: var(--light); }

    /* Gradient backgrounds */
    .gradient-bg-1 { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); }
    .gradient-bg-2 { background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%); }
    .gradient-bg-3 { background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%); }
    .gradient-bg-4 { background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%); }
    .gradient-bg-5 { background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%); }
    .gradient-bg-6 { background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%); }
    
    /* Animations */
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    @keyframes slideInLeft {
        from { transform: translateX(-20px); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
    }
    
    @keyframes slideInRight {
        from { transform: translateX(20px); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
    }
    
    @keyframes pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
    }
    
    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-5px); }
    }
    
    .animate-fadeIn { animation: fadeIn 0.5s ease-out; }
    .animate-fadeInUp { animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
    .animate-slideInLeft { animation: slideInLeft 0.5s ease-out; }
    .animate-slideInRight { animation: slideInRight 0.5s ease-out; }
    .animate-pulse-custom { animation: pulse 2s infinite; }
    .animate-float { animation: float 3s ease-in-out infinite; }
    
    /* Hover & Transition Effects */
    .transition-all { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
    
    .hover-lift { 
        @apply transition-all duration-300 ease-in-out;
    }
    .hover-lift:hover { 
        transform: translateY(-5px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }
    
    .hover-scale { @apply transition-transform duration-200 ease-in-out; }
    .hover-scale:hover { transform: scale(1.02); }
    
    .hover-bg-primary:hover { background-color: var(--primary-hover); }
    .hover-text-primary:hover { color: var(--primary); }
    
    /* Glass morphism effect */
    .glass { 
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
    }
    
    /* Custom scrollbar */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    
    ::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }
    
    ::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 10px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: #a1a1a1;
    }
    
    /* Progress bar animation */
    .progress-bar { transition: width 1.5s ease-in-out; }
    
    /* Form Elements */
    .form-input {
        @apply w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-transparent transition-all duration-200 text-gray-700 placeholder-gray-400;
    }
    
    .form-select {
        @apply w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-transparent transition-all duration-200 text-gray-700 bg-white;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 1.5em 1.5em;
    }
    
    .form-textarea {
        @apply w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-transparent transition-all duration-200 text-gray-700 placeholder-gray-400 resize-y min-h-[100px];
    }
    
    .form-checkbox {
        @apply h-5 w-5 rounded border-gray-300 text-primary focus:ring-primary/50 transition-all duration-200;
    }
    
    .form-radio {
        @apply h-5 w-5 border-gray-300 text-primary focus:ring-primary/50 transition-all duration-200;
    }
    
    /* Buttons */
    .btn {
        @apply inline-flex items-center justify-center px-5 py-2.5 rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary/50;
    }
    
    .btn-primary {
        @apply bg-primary text-white hover:bg-primary/90 hover:shadow-md shadow-sm shadow-primary/20;
    }
    
    .btn-secondary {
        @apply bg-gray-100 text-gray-700 hover:bg-gray-200;
    }
    
    .btn-success {
        @apply bg-success text-white hover:bg-success/90 hover:shadow-md shadow-sm shadow-success/20;
    }
    
    .btn-danger {
        @apply bg-danger text-white hover:bg-danger/90 hover:shadow-md shadow-sm shadow-danger/20;
    }
    
    .btn-warning {
        @apply bg-warning text-white hover:bg-warning/90 hover:shadow-md shadow-sm shadow-warning/20;
    }
    
    .btn-outline {
        @apply bg-transparent border border-gray-300 text-gray-700 hover:bg-gray-50;
    }
    
    .btn-sm {
        @apply px-3.5 py-1.5 text-sm;
    }
    
    .btn-lg {
        @apply px-6 py-3 text-lg;
    }
    
    /* Cards */
    .card {
        @apply bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden transition-all duration-200 hover:shadow-md;
    }
    
    .card-header {
        @apply px-6 py-4 border-b border-gray-100 flex items-center justify-between;
    }
    
    .card-title {
        @apply text-lg font-semibold text-gray-900 flex items-center;
    }
    
    .card-body {
        @apply p-6;
    }
    
    .card-footer {
        @apply px-6 py-4 bg-gray-50 border-t border-gray-100;
    }
    
    /* Tables */
    .table-container {
        @apply overflow-x-auto rounded-lg border border-gray-200 shadow-sm;
    }
    
    .table {
        @apply min-w-full divide-y divide-gray-200;
    }
    
    .table thead {
        @apply bg-gray-50;
    }
    
    .table th {
        @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
    }
    
    .table tbody {
        @apply bg-white divide-y divide-gray-200;
    }
    
    .table td {
        @apply px-6 py-4 whitespace-nowrap text-sm text-gray-700;
    }
    
    .table tr {
        @apply transition-colors duration-150 hover:bg-gray-50;
    }
    
    /* Alerts */
    .alert {
        @apply p-4 rounded-lg mb-4 flex items-start border-l-4;
    }
    
    .alert-success {
        @apply bg-green-50 border-green-500 text-green-700;
    }
    
    .alert-error {
        @apply bg-red-50 border-red-500 text-red-700;
    }
    
    .alert-warning {
        @apply bg-yellow-50 border-yellow-500 text-yellow-700;
    }
    
    .alert-info {
        @apply bg-blue-50 border-blue-500 text-blue-700;
    }
    
    .alert-icon {
        @apply flex-shrink-0 mr-3 text-xl;
    }
    
    .alert-content {
        @apply flex-1;
    }
    
    .alert-title {
        @apply font-semibold;
    }
    
    .alert-description {
        @apply text-sm mt-1;
    }
    
    /* Loading & Animations */
    .loading-spinner {
        @apply inline-block w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin;
    }
    
    .loading-dots {
        @apply flex space-x-1;
    }
    
    .loading-dots span {
        @apply w-2 h-2 bg-current rounded-full opacity-0;
        animation: loadingDots 1.4s infinite ease-in-out both;
    }
    
    .loading-dots span:nth-child(1) { animation-delay: -0.32s; }
    .loading-dots span:nth-child(2) { animation-delay: -0.16s; }
    
    @keyframes loadingDots {
        0%, 80%, 100% { opacity: 0; }
        40% { opacity: 1; }
    }
    
    /* Layout & Grid */
    .container {
        @apply px-4 mx-auto w-full;
    }
    
    @screen sm {
        .container {
            max-width: 640px;
        }
    }
    
    @screen md {
        .container {
            max-width: 768px;
        }
    }
    
    @screen lg {
        .container {
            max-width: 1024px;
        }
    }
    
    @screen xl {
        .container {
            max-width: 1280px;
        }
    }
    
    .grid-responsive {
        @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6;
    }
    
    /* Status Indicators */
    .status-indicator {
        @apply inline-block w-2.5 h-2.5 rounded-full mr-1.5;
    }
    
    .status-online {
        @apply bg-green-500;
        box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
    }
    
    .status-offline {
        @apply bg-gray-400;
    }
    
    .status-busy {
        @apply bg-red-500 animate-pulse;
    }
    
    .status-away {
        @apply bg-yellow-500;
    }
    
    .status-dnd {
        @apply bg-red-500;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
    }
    
    /* Tooltips */
    [data-tooltip] {
        @apply relative inline-block;
    }
    
    [data-tooltip]:hover::before {
        content: attr(data-tooltip);
        @apply absolute z-50 px-3 py-1.5 text-xs font-medium text-white bg-gray-900 rounded-md shadow-sm whitespace-nowrap;
        bottom: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
    
    [data-tooltip]:hover::after {
        content: '';
        @apply absolute border-4 border-transparent border-t-gray-900;
        top: -4px;
        left: 50%;
        transform: translateX(-50%);
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
    
    [data-tooltip]:hover::before,
    [data-tooltip]:hover::after {
        opacity: 1;
        transform: translate(-50%, -4px);
    }
    
    /* Custom Scrollbar for specific elements */
    .custom-scrollbar {
        scrollbar-width: thin;
        scrollbar-color: #c1c1c1 #f1f1f1;
    }
    
    .custom-scrollbar::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    
    .custom-scrollbar::-webkit-scrollbar-track {
        @apply bg-gray-100 rounded-full;
    }
    
    .custom-scrollbar::-webkit-scrollbar-thumb {
        @apply bg-gray-400 rounded-full;
    }
    
    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        @apply bg-gray-500;
    }
</style>

<!-- AOS Animation -->
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>

<script>
    // Initialize AOS (Animate On Scroll)
    document.addEventListener('DOMContentLoaded', function() {
        AOS.init({
            duration: 600,
            once: true,
            offset: 100,
            easing: 'ease-out-cubic'
        });
        
        // Add loading states to buttons (fixed version)
        const buttons = document.querySelectorAll('button[type="submit"], .btn');
        buttons.forEach(button => {
            if (button.form) {
                button.form.addEventListener('submit', function(e) {
                    // Only add loading state after form validation passes
                    if (this.checkValidity() && !button.classList.contains('no-loading')) {
                        const originalHTML = button.innerHTML;
                        const isIconOnly = button.querySelector('i') && button.childNodes.length === 1;
                        
                        if (!isIconOnly) {
                            button.innerHTML = `
                                <span class="loading-spinner mr-2"></span>
                                <span>${button.getAttribute('data-loading-text') || 'Processing...'}</span>
                            `;
                        } else {
                            button.innerHTML = '<span class="loading-spinner"></span>';
                        }
                        
                        button.disabled = true;
                        
                        // Re-enable after 10 seconds (fallback)
                        setTimeout(() => {
                            button.innerHTML = originalHTML;
                            button.disabled = false;
                        }, 10000);
                    }
                });
            }
        });
        
        // Initialize tooltips with Popper.js
        const tooltipTriggers = document.querySelectorAll('[data-tippy-content]');
        if (tooltipTriggers.length > 0) {
            import('https://unpkg.com/@popperjs/core@2')
                .then(() => import('https://unpkg.com/tippy.js@6'))
                .then(({ default: tippy }) => {
                    tippy('[data-tippy-content]', {
                        arrow: true,
                        animation: 'shift-away',
                        theme: 'light',
                        delay: [100, 0],
                        duration: [200, 150],
                    });
                });
        }
    });
    
    // Debounce function for window resize/scroll events
    function debounce(func, wait = 100) {
        let timeout;
        return function(...args) {
            clearTimeout(timeout);
            timeout = setTimeout(() => func.apply(this, args), wait);
        };
    }
    
    // Throttle function for scroll/resize events
    function throttle(func, limit = 100) {
        let inThrottle;
        return function() {
            const args = arguments;
            const context = this;
            if (!inThrottle) {
                func.apply(context, args);
                inThrottle = true;
                setTimeout(() => inThrottle = false, limit);
            }
        };
    }
    
    // Copy to clipboard
    window.copyToClipboard = function(text, button) {
        navigator.clipboard.writeText(text).then(() => {
            const originalText = button.innerHTML;
            button.innerHTML = '<i class="fas fa-check mr-1"></i> Copied!';
            button.classList.add('bg-green-500', 'hover:bg-green-600');
            button.classList.remove('bg-blue-500', 'hover:bg-blue-600');
            
            setTimeout(() => {
                button.innerHTML = originalText;
                button.classList.remove('bg-green-500', 'hover:bg-green-600');
                button.classList.add('bg-blue-500', 'hover:bg-blue-600');
            }, 2000);
        }).catch(err => {
            console.error('Failed to copy text: ', err);
        });
    };
</script>