.tab-btn.active {
  border-color: #2563eb;
  color: #2563eb;
}

.bar-chart-bar {
  transition: width 0.6s ease-out;
}

.card-enter {
  animation: cardEnter 0.3s ease-out;
}

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

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* Table row hover */
.tx-row:hover { background-color: #f9fafb; }

/* Modal transition */
#import-modal.show { display: block; }
#import-modal.show .fixed:first-child { animation: fadeIn 0.2s ease; }

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

/* Badge colors for categories */
.badge-Housing { background: #dbeafe; color: #1e40af; }
.badge-Food { background: #fef3c7; color: #92400e; }
.badge-Transport { background: #e0e7ff; color: #3730a3; }
.badge-Utilities { background: #fce7f3; color: #9d174d; }
.badge-Entertainment { background: #ede9fe; color: #5b21b6; }
.badge-Healthcare { background: #d1fae5; color: #065f46; }
.badge-Shopping { background: #ffedd5; color: #9a3412; }
.badge-Education { background: #cffafe; color: #155e75; }
.badge-Fitness { background: #ecfccb; color: #3f6212; }
.badge-Subscriptions { background: #f3e8ff; color: #6b21a8; }
.badge-Income { background: #d1fae5; color: #065f46; }
.badge-Uncategorized { background: #f3f4f6; color: #374151; }

/* Drop zone active state */
#drop-zone.drag-over {
  border-color: #3b82f6;
  background-color: #eff6ff;
}

/* ─── Mobile / PWA optimizations ─── */

/* Safe area insets for notched phones */
@supports (padding: env(safe-area-inset-top)) {
  header { padding-top: env(safe-area-inset-top); }
  main { padding-bottom: env(safe-area-inset-bottom); }
}

/* Mobile tab navigation — horizontal scroll with momentum */
@media (max-width: 640px) {
  #tabs {
    gap: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  #tabs::-webkit-scrollbar { display: none; }
  #tabs .tab-btn {
    padding: 0.75rem 0.75rem;
    font-size: 0.75rem;
    flex-shrink: 0;
  }

  /* Larger touch targets for mobile */
  button, a, select, input, .btn-category, .btn-tax-category {
    min-height: 40px;
  }

  /* Stack header items vertically on small screens */
  header .flex.items-center.justify-between {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Full width tables scroll horizontally */
  .overflow-x-auto { -webkit-overflow-scrolling: touch; }

  /* Compact card spacing */
  main { padding: 1rem; }
  .space-y-6 > * + * { margin-top: 1rem; }

  /* Import modal full screen on mobile */
  #import-modal .max-w-lg { max-width: 100%; margin: 0; border-radius: 0; min-height: 100vh; }

  /* Search bar full width */
  #global-search { width: 100%; }
}

/* Standalone PWA — hide browser UI remnants */
@media (display-mode: standalone) {
  header { padding-top: env(safe-area-inset-top, 0px); }
}

/* Touch feedback for interactive elements */
@media (hover: none) {
  .btn-category:active, .tab-btn:active, button:active {
    opacity: 0.7;
    transition: opacity 0.1s;
  }
  .tx-row:active { background-color: #f3f4f6; }
}

/* Prevent text selection on UI elements (mobile) */
.tab-btn, button, .btn-category, .btn-tax-category {
  -webkit-user-select: none;
  user-select: none;
}

/* PWA install prompt banner (hidden by default) */
#pwa-install-banner {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: env(safe-area-inset-bottom, 0.5rem) 1rem 0.5rem;
}