/* Empty States Styling */

.empty-state {
    animation: fadeInUp 0.6s ease-out;
}

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

.empty-state-icon {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.overdue-warning {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%,
    100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    75% {
        transform: translateX(5px);
    }
}

.pending-reminder {
    animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
    from {
        box-shadow: 0 0 5px rgba(245, 158, 11, 0.3);
    }
    to {
        box-shadow: 0 0 20px rgba(245, 158, 11, 0.6);
    }
}

.all-paid-success {
    animation: bounce 1s ease-in-out;
}

@keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .empty-state {
        padding: 2rem 1rem;
    }

    .empty-state-icon {
        width: 4rem;
        height: 4rem;
    }

    .empty-state h3 {
        font-size: 1.125rem;
    }

    .empty-state p {
        font-size: 0.875rem;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .empty-state {
        background-color: #1f2937;
        border-color: #374151;
    }

    .empty-state h3 {
        color: #f9fafb;
    }

    .empty-state p {
        color: #d1d5db;
    }
}