/* Kanta — Custom Styles */
/* Tailwind directives are loaded via CDN, this file adds custom overrides */

/* Smooth page transitions */
.page-enter {
  opacity: 0;
  transform: translateY(8px);
}
.page-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.2s ease-out;
}

/* Bottom sheet animation */
.sheet-enter {
  transform: translateY(100%);
}
.sheet-enter-active {
  transform: translateY(0);
  transition: transform 0.3s ease-out;
}
.sheet-leave-active {
  transform: translateY(100%);
  transition: transform 0.2s ease-in;
}

/* Fade overlay */
.overlay-enter {
  opacity: 0;
}
.overlay-enter-active {
  opacity: 1;
  transition: opacity 0.2s ease-out;
}
.overlay-leave-active {
  opacity: 0;
  transition: opacity 0.15s ease-in;
}

/* Custom scrollbar for sidebar */
.sidebar-scroll::-webkit-scrollbar {
  width: 4px;
}
.sidebar-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar-scroll::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 2px;
}

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

/* Floating action button glow */
.fab-glow {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Quick amount buttons grid */
.quick-amount-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 8px;
}
@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Swipe to delete hint */
.swipe-hint {
  position: relative;
  overflow-x: hidden;
}
.swipe-hint::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 60px;
  background: linear-gradient(to right, transparent, #ef4444);
  opacity: 0;
  transition: opacity 0.2s;
}

/* Pull to refresh indicator */
.ptr-indicator {
  height: 0;
  overflow: hidden;
  transition: height 0.3s;
}
.ptr-active .ptr-indicator {
  height: 60px;
}

/* Checkbox custom style */
.custom-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid #475569;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s;
}
.custom-checkbox:checked {
  background: #10b981;
  border-color: #10b981;
}
.custom-checkbox:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 14px;
  font-weight: bold;
}

/* Toast notification */
.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #1e293b;
  color: #f1f5f9;
  padding: 12px 24px;
  border-radius: 12px;
  border: 1px solid #334155;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 9999;
  opacity: 0;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  white-space: nowrap;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast.success {
  border-color: #10b981;
}
.toast.error {
  border-color: #ef4444;
}

/* Income/Expense toggle pill */
.pill-toggle {
  display: inline-flex;
  background: #1e293b;
  border-radius: 9999px;
  padding: 3px;
  border: 1px solid #334155;
}
.pill-toggle button {
  padding: 6px 20px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  cursor: pointer;
  border: none;
  background: transparent;
  color: #94a3b8;
}
.pill-toggle button.active-income {
  background: #10b981;
  color: white;
}
.pill-toggle button.active-expense {
  background: #ef4444;
  color: white;
}

/* Mobile bottom nav active indicator */
.nav-active-indicator {
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: #3b82f6;
  margin: 2px auto 0;
}

/* Category badge */
.category-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
}

/* Priority dots */
.priority-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.priority-1 { background: #ef4444; }
.priority-2 { background: #f59e0b; }
.priority-3 { background: #64748b; }