/*
  Bootstrap Brand Overrides (Bootstrap 5.3.x)
  ------------------------------------------
  Goal: Replace Bootstrap's default "primary" (blue) + focus styles with brand colors
  without requiring a Sass rebuild.

  IMPORTANT:
  - Load AFTER Bootstrap CSS
  - Load BEFORE your main custom stylesheet (so your existing custom CSS keeps winning)
*/

:root {
  /* Brand tokens */
  --brand-navy: #1d283a;
  --brand-amber: #f59e0b;
  --brand-amber-hover: #d97706;
  --brand-amber-active: #b45309;
  --brand-gray-100: #e6ebf0;
  --brand-white: #ffffff;

  --brand-navy-rgb: 29, 40, 58;
  --brand-amber-rgb: 245, 158, 11;
  --brand-gray-100-rgb: 230, 235, 240;

  /* Brand roles */
  --brand-primary: var(--brand-navy);
  --brand-primary-rgb: var(--brand-navy-rgb);
  /* Slightly lighter/darker shades for UI states (derived, kept minimal) */
  --brand-primary-hover: #1e293b;
  --brand-primary-active: #0f172a;

  /* Bootstrap core variables (utilities use these) */
  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: var(--brand-primary-rgb);

  /* Subtle/Emphasis variants used by components (e.g., accordion active state) */
  --bs-primary-text-emphasis: var(--brand-primary);
  --bs-primary-bg-subtle: rgba(var(--brand-primary-rgb), 0.08);
  --bs-primary-border-subtle: rgba(var(--brand-primary-rgb), 0.22);

  /* Keep links on-brand */
  --bs-link-color: var(--brand-amber);
  --bs-link-hover-color: var(--brand-amber-hover);

  /* Global focus ring (used by many components) */
  --bs-focus-ring-color: rgba(var(--brand-primary-rgb), 0.25);

  /* Subtle borders (close to Bootstrap default, just more "brand neutral") */
  --bs-border-color: var(--brand-gray-100);

  /* Common component tokens that otherwise stay Bootstrap-blue */
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);
  --bs-pagination-active-color: #ffffff;

  --bs-nav-pills-link-active-bg: var(--bs-primary);

  --bs-dropdown-link-active-bg: var(--bs-primary);
  --bs-dropdown-link-active-color: #ffffff;

  --bs-list-group-active-bg: var(--bs-primary);
  --bs-list-group-active-border-color: var(--bs-primary);
  --bs-list-group-active-color: #ffffff;
}

/* Buttons: Bootstrap ships hard-coded colors for btn-primary/outline-primary.
   Override only the CSS variables these buttons consume. */
.btn-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--brand-primary-hover);
  --bs-btn-hover-border-color: var(--brand-primary-hover);
  --bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--brand-primary-active);
  --bs-btn-active-border-color: var(--brand-primary-active);
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: var(--brand-primary);
  --bs-btn-disabled-border-color: var(--brand-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
  --bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--brand-primary-active);
  --bs-btn-active-border-color: var(--brand-primary-active);
  --bs-btn-disabled-color: var(--brand-primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--brand-primary);
}

.btn-link {
  --bs-btn-color: var(--brand-amber);
  --bs-btn-hover-color: var(--brand-amber-hover);
}

/* Forms: Bootstrap ships a blue focus border/shadow and blue checked controls. */
.form-control:focus,
.form-select:focus {
  border-color: rgba(var(--brand-primary-rgb), 0.45);
  box-shadow: 0 0 0 0.25rem rgba(var(--brand-primary-rgb), 0.18);
}

.form-check-input:focus {
  border-color: rgba(var(--brand-primary-rgb), 0.45);
  box-shadow: 0 0 0 0.25rem rgba(var(--brand-primary-rgb), 0.18);
}

.form-check-input:checked {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.form-range::-webkit-slider-thumb {
  background-color: var(--brand-primary);
}
.form-range::-moz-range-thumb {
  background-color: var(--brand-primary);
}

/* Progress bars (Bootstrap default is blue) */
.progress {
  --bs-progress-bar-bg: var(--bs-primary);
}