:root {
  --ds-btn-radius: 10px;
  --ds-btn-font-weight: 600;

  --ds-primary: var(--main-bg-color, #2880ce);
  --ds-primary-hover: #1f6fb7;

  /* More consistent orange (still clearly orange) */
  --ds-orange: #ff6b35;
  --ds-orange-hover: #e85d2c;

  --ds-danger: #dc3545;
  --ds-danger-hover: #c82333;
}

/* Bootstrap button consistency (matches /select-agent feel) */
.btn {
  --bs-btn-padding-y: 0.625rem; /* 10px */
  --bs-btn-padding-x: 1.25rem;  /* 20px */
  --bs-btn-border-radius: var(--ds-btn-radius);
  --bs-btn-font-weight: var(--ds-btn-font-weight);
}

.btn-sm {
  --bs-btn-padding-y: 0.45rem;
  --bs-btn-padding-x: 0.875rem;
  --bs-btn-border-radius: 9px;
}

.btn-lg,
.btn.btn-lg-md {
  --bs-btn-padding-y: 0.625rem;
  --bs-btn-padding-x: 1.875rem; /* 30px */
  --bs-btn-border-radius: var(--ds-btn-radius);
}

.btn:focus,
.btn:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(40, 128, 206, 0.25) !important;
}

.btn-primary {
  --bs-btn-bg: var(--ds-primary);
  --bs-btn-border-color: var(--ds-primary);
  --bs-btn-hover-bg: var(--ds-primary-hover);
  --bs-btn-hover-border-color: var(--ds-primary-hover);
  --bs-btn-active-bg: var(--ds-primary-hover);
  --bs-btn-active-border-color: var(--ds-primary-hover);
}

.btn-outline-secondary {
  --bs-btn-border-radius: var(--ds-btn-radius);
}

/* Orange variant you can use as: class="btn btn-orange" */
.btn-orange {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--ds-orange);
  --bs-btn-border-color: var(--ds-orange);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--ds-orange-hover);
  --bs-btn-hover-border-color: var(--ds-orange-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--ds-orange-hover);
  --bs-btn-active-border-color: var(--ds-orange-hover);
}

/* Map Bootstrap "warning" to the app's orange palette for consistency */
.btn-warning {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--ds-orange);
  --bs-btn-border-color: var(--ds-orange);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--ds-orange-hover);
  --bs-btn-hover-border-color: var(--ds-orange-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--ds-orange-hover);
  --bs-btn-active-border-color: var(--ds-orange-hover);
}

.btn-outline-warning {
  --bs-btn-color: var(--ds-orange);
  --bs-btn-border-color: var(--ds-orange);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--ds-orange);
  --bs-btn-hover-border-color: var(--ds-orange);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--ds-orange-hover);
  --bs-btn-active-border-color: var(--ds-orange-hover);
}

.btn-danger {
  --bs-btn-bg: var(--ds-danger);
  --bs-btn-border-color: var(--ds-danger);
  --bs-btn-hover-bg: var(--ds-danger-hover);
  --bs-btn-hover-border-color: var(--ds-danger-hover);
  --bs-btn-active-bg: var(--ds-danger-hover);
  --bs-btn-active-border-color: var(--ds-danger-hover);
}

/* Non-bootstrap legacy buttons used across the app */
.apply_filter,
.req_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.875rem; /* 10px 30px (match /select-agent) */
  border-radius: var(--ds-btn-radius);
  font-weight: var(--ds-btn-font-weight);
  line-height: 1.2;
  font-family: "DM Sans", sans-serif;
}

.apply_filter {
  background: var(--ds-primary);
  border: 1px solid var(--ds-primary);
  color: #fff;
  padding: 0.625rem 1.875rem !important; /* override Bootstrap spacing utilities (py-*/
  border-radius: var(--ds-btn-radius) !important;
  font-weight: var(--ds-btn-font-weight) !important;
  font-size: 16px;
}

.apply_filter:hover {
  background: var(--ds-primary-hover);
  border-color: var(--ds-primary-hover);
}

.req_btn {
  background: var(--ds-orange);
  border: 1px solid var(--ds-orange);
  color: #fff;
  font-size: 16px;
}

.req_btn:hover {
  background: var(--ds-orange-hover);
  border-color: var(--ds-orange-hover);
}

/* Legacy full-width button class used in some older views */
.btn-block {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.625rem 1.25rem;
  border-radius: var(--ds-btn-radius);
  font-weight: var(--ds-btn-font-weight);
  background: var(--ds-orange);
  border: 1px solid var(--ds-orange);
  color: #fff;
  text-decoration: none;
}

.btn-block:hover {
  background: var(--ds-orange-hover);
  border-color: var(--ds-orange-hover);
  color: #fff;
}