.recall-card {
  border-left: 4px solid #6c757d;
  transition: all 0.3s ease;
  margin-bottom: 20px;
}

.recall-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.recall-card.class-i {
  border-left-color: #dc3545;
}

.recall-card.class-ii {
  border-left-color: #ffc107;
}

.recall-card.class-iii {
  border-left-color: #0dcaf0;
}

.badge-class-i {
  background: #dc3545;
}

.badge-class-ii {
  background: #ffc107;
  color: #000;
}

.badge-class-iii {
  background: #0dcaf0;
  color: #000;
}

.recall-status-ongoing {
  color: #dc3545;
}

.recall-status-completed {
  color: #198754;
}

.recall-status-terminated {
  color: #6c757d;
}

.recall-meta {
  font-size: 0.9rem;
  color: #6c757d;
}

.recall-meta i {
  margin-right: 4px;
}

.page-header {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  color: #fff;
  padding: 60px 0;
  margin-bottom: 40px;
}

.filter-badge {
  cursor: pointer;
  padding: 8px 20px;
  border-radius: 50px;
  transition: all 0.3s;
  background: #f8f9fa;
  color: #333;
  border: 2px solid transparent;
  text-decoration: none;
}

.filter-badge:hover,
.filter-badge.active {
  background: #c8a97e;
  color: #fff;
  border-color: #c8a97e;
}

.pagination .page-link {
  color: #c8a97e;
}

.pagination .page-item.active .page-link {
  background: #c8a97e;
  border-color: #c8a97e;
  color: #fff;
}

.pagination .page-link:hover {
  color: #b8925e;
}

.page-info {
  color: #6c757d;
  font-size: 0.9rem;
}

.update-btn {
  background: #c8a97e;
  color: #fff;
  border: none;
  padding: 8px 20px;
  border-radius: 50px;
  transition: all 0.3s;
  text-decoration: none;
}

.update-btn:hover {
  background: #b8925e;
  color: #fff;
}

.data-info {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}