/* ── Navy overrides (referenced in index.html before Tailwind initialises) ── */
.bg-navy-800  { background-color: #162d4a; }
.bg-navy-700  { background-color: #1e3a5f; }
.hover\:bg-navy-700:hover { background-color: #1e3a5f; }

/* ── Loading spinner ───────────────────────────────────────────────────────── */
.spinner {
  width: 44px;
  height: 44px;
  border: 4px solid #e5e7eb;
  border-top-color: #16a34a;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Tab bar ────────────────────────────────────────────────────────────────── */
.tab-btn {
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.active-tab {
  color: #16a34a;
  border-bottom-color: #16a34a;
}

/* ── Drag-over highlight ─────────────────────────────────────────────────────── */
#drop-zone.drag-over {
  border-color: #16a34a;
  background-color: #f0fdf4;
}

/* ── File status badges ──────────────────────────────────────────────────────── */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ── Table row hover ─────────────────────────────────────────────────────────── */
#results-tbody tr:hover { background-color: #f8fafc; }
#results-tbody tr.matched-row:hover { background-color: #dcfce7; }

/* ── Responsive table min-width ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .overflow-x-auto table { min-width: 560px; }
}

/* ── Subtle pulse on Parsing badge ───────────────────────────────────────────── */
@keyframes badge-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}
.badge-parsing { animation: badge-pulse 1.2s ease-in-out infinite; }

/* ── Amount filter pills ─────────────────────────────────────────────────────── */
.amount-pill {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  font-size: 0.8125rem;
  color: #4b5563;
  background: white;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  user-select: none;
}
.amount-pill:hover {
  border-color: #86efac;
  background: #f0fdf4;
}
.amount-pill.active {
  border-color: #16a34a;
  background: #dcfce7;
  color: #15803d;
  font-weight: 600;
}