/* Zenly - Custom Styles */

/* Skeleton loading animation */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.skeleton {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    background-color: #e2e8f0;
    border-radius: 0.25rem;
}

/* Chart container */
.chart-container {
    width: 100%;
    min-height: 400px;
}

@media (max-width: 640px) {
    .chart-container {
        min-height: 280px;
    }
}

/* Toast animation */
@keyframes slide-in {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

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

/* Drop zone */
.drop-zone {
    transition: all 0.2s ease;
}

.drop-zone.drag-over {
    border-color: #60a5fa;
    background-color: #eff6ff;
}

/* Number formatting */
.num-positive { color: #10B981; }
.num-negative { color: #EF4444; }
.num-zero { color: #94A3B8; }

/* Page transition */
.page-enter {
    animation: fade-in 0.2s ease-out;
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}