/**
 * ENHANCED UI STYLES - Abbot.app
 * Advanced UI components and interactive elements
 */

/* ===== ENHANCED COMPONENTS ===== */

/* Advanced Cards */
.enhanced-card {
    @apply bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.enhanced-card:hover {
    @apply shadow-xl transform -translate-y-1;
    border-color: var(--primary-color);
}

.enhanced-card-header {
    @apply px-6 py-4 border-b border-gray-200 dark:border-gray-700;
}

.enhanced-card-body {
    @apply px-6 py-4;
}

.enhanced-card-footer {
    @apply px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-750 rounded-b-xl;
}

/* Advanced Buttons */
.btn-enhanced {
    @apply px-6 py-3 rounded-lg font-semibold transition-all duration-200;
    position: relative;
    overflow: hidden;
}

.btn-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.btn-enhanced:hover::before {
    left: 100%;
}

.btn-primary-enhanced {
    @apply btn-enhanced bg-gradient-to-r from-blue-500 to-blue-600 text-white;
}

.btn-primary-enhanced:hover {
    @apply from-blue-600 to-blue-700 shadow-lg transform -translate-y-0.5;
}

.btn-success-enhanced {
    @apply btn-enhanced bg-gradient-to-r from-green-500 to-green-600 text-white;
}

.btn-success-enhanced:hover {
    @apply from-green-600 to-green-700 shadow-lg transform -translate-y-0.5;
}

.btn-warning-enhanced {
    @apply btn-enhanced bg-gradient-to-r from-yellow-500 to-yellow-600 text-white;
}

.btn-warning-enhanced:hover {
    @apply from-yellow-600 to-yellow-700 shadow-lg transform -translate-y-0.5;
}

.btn-danger-enhanced {
    @apply btn-enhanced bg-gradient-to-r from-red-500 to-red-600 text-white;
}

.btn-danger-enhanced:hover {
    @apply from-red-600 to-red-700 shadow-lg transform -translate-y-0.5;
}

/* Advanced Form Elements */
.form-input-enhanced {
    @apply w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg;
    @apply bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100;
    @apply focus:ring-2 focus:ring-blue-500 focus:border-transparent;
    @apply transition-all duration-200;
}

.form-input-enhanced:focus {
    @apply shadow-lg transform scale-105;
}

.form-label-enhanced {
    @apply block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2;
}

.form-group-enhanced {
    @apply mb-6;
}

/* Advanced Status Indicators */
.status-indicator {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;
}

.status-online {
    @apply status-indicator bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200;
}

.status-offline {
    @apply status-indicator bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200;
}

.status-warning {
    @apply status-indicator bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200;
}

.status-loading {
    @apply status-indicator bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200;
    animation: pulse 2s infinite;
}

/* Advanced Progress Bars */
.progress-bar-enhanced {
    @apply w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3;
    overflow: hidden;
}

.progress-fill-enhanced {
    @apply h-full bg-gradient-to-r from-blue-500 to-blue-600 rounded-full;
    transition: width 0.5s ease-in-out;
    position: relative;
}

.progress-fill-enhanced::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Advanced Modals */
.modal-enhanced {
    @apply fixed inset-0 z-50 flex items-center justify-center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.modal-content-enhanced {
    @apply bg-white dark:bg-gray-800 rounded-xl shadow-2xl max-w-lg w-full mx-4;
    @apply border border-gray-200 dark:border-gray-700;
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Advanced Tooltips */
.tooltip-enhanced {
    @apply relative;
}

.tooltip-enhanced::before {
    content: attr(data-tooltip);
    @apply absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2;
    @apply bg-gray-900 dark:bg-gray-700 text-white text-sm px-3 py-2 rounded-lg;
    @apply opacity-0 pointer-events-none transition-opacity duration-200;
    white-space: nowrap;
    z-index: 1000;
}

.tooltip-enhanced:hover::before {
    @apply opacity-100;
}

/* Advanced Animations */
.fade-in-enhanced {
    animation: fadeInEnhanced 0.5s ease-out;
}

@keyframes fadeInEnhanced {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-in-left {
    animation: slideInLeft 0.6s ease-out;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.bounce-in {
    animation: bounceIn 0.8s ease-out;
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.float-animation {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Advanced Interactive Elements */
.interactive-card {
    @apply enhanced-card cursor-pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.interactive-card:hover {
    @apply shadow-2xl;
    transform: translateY(-8px) scale(1.02);
}

.interactive-card:active {
    transform: translateY(-4px) scale(1.01);
}

/* Glassmorphism Effects */
.glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    @apply rounded-xl shadow-xl;
}

.glass-card-dark {
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    @apply rounded-xl shadow-xl;
}

/* Advanced Loading States */
.skeleton-loader {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

.skeleton-loader-dark {
    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Advanced Notification System */
.notification-container {
    @apply fixed top-4 right-4 z-50 space-y-2;
    max-width: 400px;
}

.notification-item {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-lg border-l-4 p-4;
    @apply transform transition-all duration-300 ease-in-out;
    animation: slideInRight 0.3s ease-out;
}

.notification-success {
    @apply border-green-500;
}

.notification-warning {
    @apply border-yellow-500;
}

.notification-error {
    @apply border-red-500;
}

.notification-info {
    @apply border-blue-500;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Advanced Data Visualization */
.metric-card {
    @apply enhanced-card p-6 text-center;
    position: relative;
    overflow: hidden;
}

.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--metric-color, #3b82f6), transparent);
}

.metric-value {
    @apply text-3xl font-bold text-gray-900 dark:text-white;
    background: linear-gradient(135deg, var(--metric-color, #3b82f6), var(--metric-color-light, #60a5fa));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.metric-label {
    @apply text-sm font-medium text-gray-600 dark:text-gray-400 uppercase tracking-wide;
}

.metric-trend {
    @apply text-xs font-semibold flex items-center justify-center mt-2;
}

.metric-trend.up {
    @apply text-green-600 dark:text-green-400;
}

.metric-trend.down {
    @apply text-red-600 dark:text-red-400;
}

/* Advanced Agent Cards */
.agent-card {
    @apply interactive-card p-6;
    background: linear-gradient(135deg, rgba(var(--agent-color), 0.1), rgba(var(--agent-color), 0.05));
    border: 1px solid rgba(var(--agent-color), 0.2);
}

.agent-avatar {
    @apply w-16 h-16 rounded-full flex items-center justify-center text-white text-2xl;
    background: linear-gradient(135deg, rgb(var(--agent-color)), rgba(var(--agent-color), 0.8));
    box-shadow: 0 8px 32px rgba(var(--agent-color), 0.3);
}

.agent-status {
    @apply absolute top-2 right-2 w-3 h-3 rounded-full;
}

.agent-status.online {
    @apply bg-green-500;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
    animation: pulse 2s infinite;
}

.agent-status.busy {
    @apply bg-yellow-500;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
    animation: pulse 2s infinite;
}

.agent-status.offline {
    @apply bg-gray-500;
}

/* Responsive Enhancements */
@media (max-width: 768px) {
    .enhanced-card {
        @apply mx-2;
    }
    
    .notification-container {
        @apply left-4 right-4;
        max-width: none;
    }
    
    .metric-card {
        @apply p-4;
    }
    
    .agent-card {
        @apply p-4;
    }
    
    .agent-avatar {
        @apply w-12 h-12 text-lg;
    }
}

@keyframes fadeInEnhanced {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-in-enhanced {
    animation: slideInEnhanced 0.3s ease-out;
}

@keyframes slideInEnhanced {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.bounce-in-enhanced {
    animation: bounceInEnhanced 0.6s ease-out;
}

@keyframes bounceInEnhanced {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Advanced Loading States */
.loading-spinner-enhanced {
    @apply inline-block w-6 h-6 border-2 border-gray-300 border-t-blue-500 rounded-full;
    animation: spin 1s linear infinite;
}

.loading-dots-enhanced {
    @apply inline-flex space-x-1;
}

.loading-dots-enhanced span {
    @apply w-2 h-2 bg-blue-500 rounded-full;
    animation: loadingDots 1.4s infinite ease-in-out both;
}

.loading-dots-enhanced span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots-enhanced span:nth-child(2) { animation-delay: -0.16s; }

@keyframes loadingDots {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}

/* Advanced Responsive Utilities */
.container-enhanced {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

.grid-enhanced {
    @apply grid gap-6;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.flex-enhanced {
    @apply flex items-center justify-between;
}

/* Advanced Dark Mode Transitions */
* {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Advanced Scrollbars */
.scrollbar-enhanced::-webkit-scrollbar {
    width: 8px;
}

.scrollbar-enhanced::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-gray-800 rounded-lg;
}

.scrollbar-enhanced::-webkit-scrollbar-thumb {
    @apply bg-gray-400 dark:bg-gray-600 rounded-lg;
}

.scrollbar-enhanced::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500 dark:bg-gray-500;
}

/* Advanced Focus States */
.focus-enhanced:focus {
    @apply outline-none ring-2 ring-blue-500 ring-offset-2 ring-offset-white dark:ring-offset-gray-800;
}

/* Advanced Hover Effects */
.hover-lift:hover {
    @apply transform -translate-y-1 shadow-lg;
    transition: all 0.2s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
    transition: all 0.3s ease;
}