/* FinTrack - Custom Styles */

/* Page transitions */
#app {
  animation: fadeIn 0.2s ease-out;
}

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

/* Toast animations */
.toast-enter {
  animation: toastSlideIn 0.3s ease-out forwards;
}

.toast-exit {
  animation: toastSlideOut 0.25s ease-in forwards;
}

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes toastSlideOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(100%); }
}

/* Modal backdrop */
.modal-backdrop {
  animation: backdropFadeIn 0.15s ease-out;
}

.modal-content {
  animation: modalSlideUp 0.2s ease-out;
}

@keyframes backdropFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Loading skeleton */
.skeleton {
  background: linear-gradient(90deg, #f4f4f5 25%, #e4e4e7 50%, #f4f4f5 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.dark .skeleton {
  background: linear-gradient(90deg, #18181b 25%, #27272a 50%, #18181b 75%);
  background-size: 200% 100%;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Focus ring */
input:focus,
select:focus,
textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px #2563eb40;
  border-color: #2563eb;
}

.dark input:focus,
.dark select:focus,
.dark textarea:focus {
  box-shadow: 0 0 0 2px #3b82f640;
  border-color: #3b82f6;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #d4d4d8;
  border-radius: 3px;
}

.dark ::-webkit-scrollbar-thumb {
  background: #3f3f46;
}

::-webkit-scrollbar-thumb:hover {
  background: #a1a1aa;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #52525b;
}

/* Smooth transitions for interactive elements */
button, a, input, select, textarea {
  transition: all 0.15s ease;
}

/* Status badge styles */
.badge-income {
  background-color: #ecfdf5;
  color: #059669;
}

.dark .badge-income {
  background-color: #064e3b;
  color: #6ee7b7;
}

.badge-expense {
  background-color: #fff1f2;
  color: #e11d48;
}

.dark .badge-expense {
  background-color: #4c0519;
  color: #fda4af;
}

/* Chart container */
.chart-container {
  position: relative;
  height: 220px;
}

/* Wisdom card gradient */
.wisdom-card {
  background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
}

.dark .wisdom-card {
  background: linear-gradient(135deg, #172554 0%, #052e16 100%);
}

/* Number input - hide spinners */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}