/* ===========================================
   Global Brand Variables & Base Styles
   =========================================== */
:root {
  --bs-primary: #2B87A4;   /* Brand teal/blue for main actions */
  --bs-primary-rgb: 43, 135, 164;

  --bs-danger: #930a2c;       /* Brand red accent for alerts/warnings */
  --bs-danger-rgb: 147, 10, 44;

  --bs-body-bg: #f0f2f5;   /* Light gray background */
  --bs-body-color: #000;
}

/* ===========================================
   Force brand teal across all "primary"
   =========================================== */

/* Buttons */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #2B87A4;
  --bs-btn-border-color: #2B87A4;

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #226a82;        /* ~20% darker teal */
  --bs-btn-hover-border-color: #226a82;

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1b5668;       /* ~40% darker teal */
  --bs-btn-active-border-color: #1b5668;

  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #2B87A4;
  --bs-btn-disabled-border-color: #2B87A4;
}

/* Backgrounds */
.bg-primary {
  background-color: #2B87A4 !important;
}

/* Text */
.text-primary {
  color: #2B87A4 !important;
}

/* Borders */
.border-primary {
  border-color: #2B87A4 !important;
}

/* Badges */
.badge.bg-primary {
  background-color: #2B87A4 !important;
}

/* Override Bootstrap pagination colors globally */
.pagination {
  --bs-pagination-color: var(--bs-primary);
  --bs-pagination-hover-color: #fff;
  --bs-pagination-hover-bg: var(--bs-primary);
  --bs-pagination-hover-border-color: var(--bs-primary);

  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);

  --bs-pagination-focus-color: #fff;
  --bs-pagination-focus-bg: var(--bs-primary);
  --bs-pagination-focus-border-color: var(--bs-primary);
}