/* Chart Styles for Wallet 360 */

/* Canvas max-height styling */
#portfolioChart,
#incomeExpensesChart,
#budgetChart,
#categoryChart {
  max-height: 400px;
}

/* Chart type selector styling */
.chart-type-selector {
  transition: all 0.2s ease;
  border: 1px solid rgba(156, 163, 175, 0.3);
}

.chart-type-selector:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.chart-type-selector:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Chart container animations */
.chart-container {
  transition: opacity 0.3s ease;
}

.chart-container.loading {
  opacity: 0.5;
}

/* Preset buttons styling */
.preset-btn {
  transition: all 0.2s ease;
}

.preset-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.preset-btn:active {
  transform: scale(0.98);
}

/* Responsive chart styling */
@media (max-width: 768px) {
  #portfolioChart,
  #incomeExpensesChart,
  #categoryChart {
    max-height: 300px;
  }
  
  .chart-type-selector {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }
}

/* Dark mode chart styling */
.dark .chart-type-selector {
  background-color: #374151;
  border-color: rgba(75, 85, 99, 0.5);
  color: #f9fafb;
}

.dark .chart-type-selector:hover {
  background-color: #4b5563;
}

/* Chart loading animation */
@keyframes chartPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.chart-loading {
  animation: chartPulse 1.5s ease-in-out infinite;
}