@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body {
  font-family: 'Inter', sans-serif;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f8fafc;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Dark mode scrollbar */
.dark ::-webkit-scrollbar-track {
  background: #1e293b;
}
.dark ::-webkit-scrollbar-thumb {
  background: #475569;
}
.dark ::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* Drop zone input should not block drag events */
.drop-zone input[type="file"] {
  pointer-events: none;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in {
  animation: fadeInUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Table utilities */
th, td {
  white-space: nowrap;
}
tbody tr:last-child td {
  border-bottom: none;
}

/* Focus ring consistency */
select:focus,
input[type="text"]:focus {
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
.dark select:focus,
.dark input[type="text"]:focus {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

/* Dark mode tab styles for dynamic active state */
.dark .tab-btn.active {
  color: #818cf8;
  border-color: #818cf8;
}
.dark .tab-btn:not(.active) {
  color: #94a3b8;
}
.dark .tab-btn:not(.active):hover {
  color: #e2e8f0;
}

/* Dark mode table row hover */
.dark #resultsBody tr:hover,
.dark #previewBodyA tr:hover,
.dark #previewBodyB tr:hover {
  background: rgba(51, 65, 85, 0.5);
}

/* Dark mode status badges */
.dark .status-match {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.25);
}
.dark .status-only-a {
  background: rgba(99, 102, 241, 0.15);
  color: #818cf8;
  border-color: rgba(99, 102, 241, 0.25);
}
.dark .status-only-b {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.25);
}