/* Base button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  border: 1px solid transparent;
  border-radius: var(--border-radius-md);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-colors);
  min-height: var(--button-height-base);
  font-size: var(--font-size-base);
  line-height: 1;
}

/* Primary button - Orange theme */
.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.btn--primary:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  transform: translateY(-1px);
}

.btn--primary:active {
  background-color: var(--color-primary-active);
  border-color: var(--color-primary-active);
  transform: translateY(0);
}

/* Secondary button */
.btn--secondary {
  background-color: var(--color-gray-100);
  color: var(--color-gray-700);
  border-color: var(--color-gray-300);
}

.btn--secondary:hover {
  background-color: var(--color-gray-200);
  border-color: var(--color-gray-400);
}

/* Danger button */
.btn--danger {
  background-color: var(--color-danger);
  color: var(--color-white);
  border-color: var(--color-danger);
}

.btn--danger:hover:not(:disabled) {
  background-color: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.btn--danger:active:not(:disabled) {
  background-color: var(--color-error-700);
  border-color: var(--color-error-700);
  transform: translateY(0);
}

.btn--danger:focus:not(:disabled) {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.3);
}

/* Outline button variants */
.btn--outline {
  background-color: transparent;
  border-width: 2px;
}

.btn--primary.btn--outline {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn--primary.btn--outline:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.btn--secondary.btn--outline {
  color: var(--color-gray-600);
  border-color: var(--color-gray-300);
}

.btn--secondary.btn--outline:hover {
  background-color: var(--color-gray-100);
  color: var(--color-gray-700);
  border-color: var(--color-gray-400);
}

/* Button sizes */
.btn--lg {
  padding: var(--spacing-3) var(--spacing-6);
  font-size: 1.125rem;
}

/* Legacy compatibility */
.btn-primary {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
  border-color: var(--color-primary) !important;
}

.search-btn {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--border-radius-md);
}

.search-btn:hover {
  background-color: var(--color-primary-hover);
}

/* ===== PDF DOWNLOAD BUTTON ===== */
/* Global styling for all PDF download buttons across the application */

.btn--pdf-download {
  background: var(--color-white);
  color: var(--color-gray-700);
  border: 1px solid var(--color-gray-300);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--border-radius-sm);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  transition: var(--transition-colors);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  cursor: pointer;
}

.btn--pdf-download:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-400);
  color: var(--color-gray-800);
  text-decoration: none;
}

/* PDF icon styling - red color for PDF icon */
.btn--pdf-download i.fa-file-pdf,
.btn--pdf-download .fa-file-pdf {
  color: var(--color-error-500);
}

.btn--pdf-download:hover i.fa-file-pdf,
.btn--pdf-download:hover .fa-file-pdf {
  color: var(--color-error-600);
}

/* Loading state for PDF download buttons */
.btn--pdf-download.loading .btn-text {
  display: none;
}

.btn--pdf-download.loading .btn-spinner {
  display: inline-block !important;
}

/* ===== APPLY CHANGES BUTTON (Sanctions Tab) ===== */
#sanctions-apply-changes {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

#sanctions-apply-changes.loading .btn-text {
  display: none;
}

#sanctions-apply-changes.loading .btn-spinner {
  display: inline-block !important;
}

/* ===== BACK BUTTON ===== */
/* Global styling for all back/navigation buttons across the application */

.btn--back {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  color: var(--color-gray-700);
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--border-radius-lg);
  font-weight: 500;
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.btn--back:hover {
  background: var(--color-gray-50);
  border-color: var(--color-primary-500);
  color: var(--color-primary-600);
  box-shadow: var(--shadow-md);
  transform: translateX(-2px);
  text-decoration: none;
}

.btn--back:active {
  transform: translateX(0);
  box-shadow: var(--shadow-sm);
}

.btn--back i {
  font-size: var(--font-size-xs);
  transition: transform 0.2s ease;
}

.btn--back:hover i {
  transform: translateX(-2px);
}

/* ===== ICON BUTTONS ===== */
/* Small icon-only buttons for inline actions */

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  background: var(--color-white);
  color: var(--color-gray-600);
  transition: all 0.15s;
}

.btn-icon:hover {
  background: var(--color-gray-100);
  border-color: var(--color-gray-400);
  color: var(--color-gray-700);
}

.btn-icon--primary {
  background: var(--color-white);
  border-color: var(--color-gray-300);
  color: var(--color-gray-600);
}

.btn-icon--primary:hover {
  background: var(--color-primary-50);
  border-color: var(--color-primary-300);
  color: var(--color-primary-600);
}

.btn-icon--danger {
  background: var(--color-error-50);
  border-color: var(--color-error-200);
  color: var(--color-error-600);
}

.btn-icon--danger:hover {
  background: var(--color-error-100);
  border-color: var(--color-error-400);
  color: var(--color-error-700);
}

.btn-icon:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== TABLE ACTION BUTTONS ===== */
/* Action buttons used in tables and entity lists - rounded rectangles */

.table__action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-sm);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.table__action-btn--view {
  background: var(--color-white);
  border-color: var(--color-gray-300);
  color: var(--color-gray-600);
}

.table__action-btn--view:hover {
  background: var(--color-gray-100);
  border-color: var(--color-gray-400);
  color: var(--color-gray-700);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.table__action-btn--delete {
  background: var(--color-error-50);
  border-color: var(--color-error-200);
  color: var(--color-error-600);
}

.table__action-btn--delete:hover {
  background: var(--color-error-100);
  border-color: var(--color-error-400);
  color: var(--color-error-700);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.table__action-btn--download {
  background: var(--color-white);
  border-color: var(--color-gray-300);
  color: var(--color-gray-600);
}

.table__action-btn--download:hover {
  background: var(--color-gray-100);
  border-color: var(--color-gray-400);
  color: var(--color-gray-700);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.table__action-btn--success {
  background: var(--color-white);
  border-color: var(--color-success-300);
  color: var(--color-success-600);
}

.table__action-btn--success:hover {
  background: var(--color-success-100);
  border-color: var(--color-success-400);
  color: var(--color-success-700);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

/* Actions container for grouping buttons */
.table__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
}