/* Custom styles for FluxoCash Pro */

.kpi-card {
    @apply rounded-xl shadow-lg p-6 text-white transition-transform duration-300 hover:scale-105;
}

.projection-card {
    @apply p-4 border-2 border-gray-200 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-gray-700;
}

.alert-card {
    @apply p-4 rounded-lg border-l-4;
}

.alert-success {
    @apply bg-green-50 dark:bg-green-900/20 border-green-500;
}

.alert-warning {
    @apply bg-yellow-50 dark:bg-yellow-900/20 border-yellow-500;
}

.alert-danger {
    @apply bg-red-50 dark:bg-red-900/20 border-red-500;
}

.chart-container {
    position: relative;
    height: 300px;
    width: 100%;
}

.table-hover:hover {
    @apply bg-gray-50 dark:bg-gray-700;
}

/* Dark mode transitions */
* {
    @apply transition-colors duration-200;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 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;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Loading states */
.loading {
    @apply animate-pulse bg-gray-200 dark:bg-gray-700;
}

/* Responsive tables */
@media (max-width: 640px) {
    .responsive-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}