/* Custom Styles for GrowthPro */

/* Animations */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(59, 130, 246, 0.6);
    }
}

.animate-fade-in {
    animation: fade-in 1s ease-out;
}

.animate-scroll {
    animation: scroll 30s linear infinite;
}

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

.animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

/* Buttons */
.btn-primary {
    @apply inline-flex items-center px-8 py-4 bg-gradient-to-r from-primary to-secondary text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300;
}

.btn-secondary {
    @apply inline-flex items-center px-8 py-4 bg-transparent border-2 border-primary text-primary dark:text-white font-semibold rounded-lg hover:bg-primary hover:text-white transition-all duration-300;
}

.btn-outline {
    @apply inline-flex items-center px-6 py-3 border-2 border-current rounded-lg font-semibold hover:bg-current hover:text-white transition-all duration-300;
}

/* Cards */
.feature-card {
    @apply bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 border border-gray-100 dark:border-gray-700;
}

.job-card {
    @apply bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300 border border-gray-100 dark:border-gray-700 relative overflow-hidden;
}

.job-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #06b6d4, #8b5cf6);
}

.feedback-card {
    @apply bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg border border-gray-100 dark:border-gray-700 min-w-80 flex-shrink-0;
}

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

.form-textarea {
    @apply w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary focus:border-transparent resize-vertical min-h-32 transition-all duration-200;
}

.form-select {
    @apply w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary focus:border-transparent appearance-none cursor-pointer transition-all duration-200;
}

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

/* Navigation */
.nav-link {
    @apply text-gray-700 dark:text-gray-300 font-medium px-3 py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-200;
}

/* Gradients */
.gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.gradient-text {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Admin Panel Styles */
.admin-card {
    @apply bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 p-6;
}

.admin-stat {
    @apply bg-gradient-to-r p-6 rounded-xl text-white;
}

.admin-table {
    @apply w-full bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg border border-gray-200 dark:border-gray-700;
}

.admin-table th {
    @apply bg-gray-50 dark:bg-gray-700 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider;
}

.admin-table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100 border-t border-gray-200 dark:border-gray-700;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .btn-primary, .btn-secondary {
        @apply px-6 py-3 text-sm;
    }
    
    .feature-card, .job-card {
        @apply p-6;
    }
}

/* Loading states */
.loading {
    @apply animate-pulse;
}

.loading-skeleton {
    @apply bg-gray-300 dark:bg-gray-600 rounded animate-pulse;
}

/* Success/Error states */
.success-message {
    @apply bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 text-green-800 dark:text-green-200 px-4 py-3 rounded-lg;
}

.error-message {
    @apply bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-200 px-4 py-3 rounded-lg;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-gray-800;
}

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

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

/* File upload */
.file-upload {
    @apply border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-8 text-center hover:border-primary transition-colors cursor-pointer;
}

.file-upload.dragover {
    @apply border-primary bg-primary/10;
}

/* Modal */
.modal-backdrop {
    @apply fixed inset-0 bg-black/50 flex items-center justify-center z-50;
}

.modal-content {
    @apply bg-white dark:bg-gray-800 rounded-xl shadow-2xl max-w-lg w-full mx-4 p-6;
}

/* Badges */
.badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium;
}

.badge-success {
    @apply bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200;
}

.badge-warning {
    @apply bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-200;
}

.badge-error {
    @apply bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-200;
}

.badge-info {
    @apply bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-200;
}

/* Toggle Switch */
.toggle-switch {
    @apply relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2;
}

.toggle-switch.active {
    @apply bg-primary;
}

.toggle-switch-thumb {
    @apply inline-block h-4 w-4 transform rounded-full bg-white shadow-lg transition-transform;
}

.toggle-switch.active .toggle-switch-thumb {
    @apply translate-x-6;
}

/* Floating Action Button */
.fab {
    @apply fixed bottom-6 right-6 w-14 h-14 bg-gradient-to-r from-primary to-secondary text-white rounded-full shadow-lg hover:shadow-xl flex items-center justify-center transition-all duration-300 z-40;
}

.fab:hover {
    @apply scale-110;
}