/* Custom CSS for AVA Dashboard */

/* Navigation styles */
.nav-link {
    @apply text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200;
}

.nav-link.active {
    @apply text-blue-600 bg-blue-50;
}

/* Dropdown styles */
.dropdown-item {
    @apply block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors duration-200;
}

/* Card styles */
.stat-card {
    @apply bg-white overflow-hidden shadow rounded-lg hover:shadow-md transition-shadow duration-200;
}

/* Chat styles */
.chat-message-user {
    @apply bg-blue-100 ml-auto max-w-xs lg:max-w-md px-4 py-2 rounded-lg;
}

.chat-message-ava {
    @apply bg-gray-100 mr-auto max-w-xs lg:max-w-md px-4 py-2 rounded-lg;
}

/* Button styles */
.btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all duration-200;
}

.btn-secondary {
    @apply bg-gray-300 hover:bg-gray-400 text-gray-800 font-medium py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-all duration-200;
}

.btn-success {
    @apply bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-all duration-200;
}

.btn-danger {
    @apply bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-all duration-200;
}

/* Form styles */
.form-input {
    @apply appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
}

/* Loading spinner */
.spinner {
    @apply animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600;
}

/* Notification styles */
.notification-success {
    @apply bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative;
}

.notification-error {
    @apply bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative;
}

.notification-warning {
    @apply bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-3 rounded relative;
}

.notification-info {
    @apply bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded relative;
}

/* Task styles */
.task-card {
    @apply bg-white p-4 rounded-lg shadow-sm border border-gray-200 hover:shadow-md transition-shadow duration-200;
}

.task-priority-low {
    @apply border-l-4 border-l-green-400;
}

.task-priority-medium {
    @apply border-l-4 border-l-yellow-400;
}

.task-priority-high {
    @apply border-l-4 border-l-orange-400;
}

.task-priority-urgent {
    @apply border-l-4 border-l-red-400;
}

/* Task action buttons */
.task-action-btn {
    @apply p-2 rounded-full transition-all duration-200 hover:scale-110;
}

.task-action-btn:hover {
    @apply shadow-sm;
}

/* Ensure buttons are always visible on mobile */
@media (max-width: 640px) {
    .task-card .flex {
        @apply flex-col space-y-3;
    }
    
    .task-card .flex-shrink-0 {
        @apply flex-shrink flex justify-end;
    }
}

/* Memory card styles */
.memory-card {
    @apply bg-white p-4 rounded-lg shadow-sm border border-gray-200 hover:shadow-md transition-all duration-200;
}

.memory-card:hover {
    @apply transform translate-y-1 shadow-lg;
}

/* Responsive utilities */
@media (max-width: 640px) {
    .nav-link {
        @apply block px-3 py-2 text-base;
    }
}

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Animation classes */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.3s ease-out;
}

@keyframes slideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

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

/* Status indicators */
.status-online {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800;
}

.status-offline {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800;
}

.status-pending {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800;
}

/* Dark mode support (future enhancement) */
@media (prefers-color-scheme: dark) {
    /* Dark mode styles can be added here */
}