/* Tailwind CSS via CDN */
@import 'https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css';

/* Custom Components */
.btn-primary {
    @apply inline-flex items-center px-4 py-2 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition-colors duration-300;
}

.btn-secondary {
    @apply inline-flex items-center px-4 py-2 border border-gray-300 rounded-lg shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-300;
}

.card {
    @apply bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow duration-300;
}

/* Overlay Components */
.overlay-card {
    @apply bg-white dark:bg-gray-800 rounded-xl shadow-sm overflow-hidden border border-gray-200 dark:border-gray-700;
}

.overlay-card-body {
    @apply p-6;
}

.btn {
    @apply flex items-center space-x-2 px-3 py-2 rounded-md text-sm font-medium;
}

.btn-icon {
    @apply w-5 h-5 mr-2;
}

/* Custom Styles */
.gradient-primary {
    background: linear-gradient(135deg, #7C3AED 0%, #4F46E5 100%);
}

/* Transitions */
.transition-all {
    transition: all 0.3s ease-in-out;
}

/* Responsive Utilities */
@media (min-width: 768px) {
    .md\:pl-64 {
        padding-left: 16rem;
    }
}