/* ===========================================
   Bootstrap theme overrides

   Replaces Bootstrap's blue primary/highlight (#0d6efd) with light greys.
   The primary and secondary button families are re-themed; every other
   palette entry (success/danger/warning/...) keeps the Bootstrap default.

   Loaded immediately after /bootstrap.min.css (see nuxt.config.ts), so
   these rules win by source order. Re-theme the whole UI by editing the
   --app-primary* values below.

   Grey ramp: the primary base is a mid grey, a step darker than secondary.
   Button hover mixes the base 50% with white and button press 65% with
   white; --app-primary-active (darker still) is kept for link hover.
   =========================================== */

:root {
  --app-primary: #868e96;
  --app-primary-rgb: 134, 142, 150;
  --app-primary-hover: color-mix(in srgb, var(--app-primary) 50%, #fff);
  --app-primary-press: color-mix(in srgb, var(--app-primary) 65%, #fff);
  --app-primary-active: #6c757d;
  --app-primary-text-emphasis: #343a40;
  --app-primary-bg-subtle: #e2e3e5;
  --app-primary-border-subtle: #c8cbcd;
  --app-primary-focus-border: #6c757d;
  --app-primary-focus-ring: rgba(134, 142, 150, 0.3);

  /* The spot/highlight accent. The grey ramp deliberately has nothing that
     reads against the grey spot markers, so this one out-of-ramp accent
     drives selected spots, the change pulse, the annotation flash, the spot
     tooltip and the loading bar. Re-theme the whole highlight layer here. */
  --app-accent: #2563eb;
  --app-accent-rgb: 37, 99, 235;

  /* Secondary reuses the same light ramp so secondary controls stop filling
     dark on hover/press. */
  --app-secondary: #adb5bd;
  --app-secondary-hover: color-mix(in srgb, var(--app-secondary) 50%, #fff);
  --app-secondary-press: color-mix(in srgb, var(--app-secondary) 65%, #fff);
  --app-secondary-text: #6c757d;

  /* The wordmark: the navbar brand and the landing title are the same mark, so
     they share a colour and a weight and differ only in size. */
  --app-wordmark-color: var(--bs-body-color);
  --app-wordmark-weight: 600;

  /* --- Bootstrap globals --- */
  --bs-primary: var(--app-primary);
  --bs-primary-rgb: var(--app-primary-rgb);
  --bs-link-color: var(--app-primary);
  --bs-link-color-rgb: var(--app-primary-rgb);
  --bs-link-hover-color: var(--app-primary-active);
  --bs-link-hover-color-rgb: 108, 117, 125;
  --bs-primary-text-emphasis: var(--app-primary-text-emphasis);
  --bs-primary-bg-subtle: var(--app-primary-bg-subtle);
  --bs-primary-border-subtle: var(--app-primary-border-subtle);
  --bs-focus-ring-color: var(--app-primary-focus-ring);
}

/* ===========================================
   Buttons
   =========================================== */

.btn-primary {
  --bs-btn-bg: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: var(--app-primary-hover);
  --bs-btn-hover-border-color: var(--app-primary-hover);
  --bs-btn-focus-shadow-rgb: var(--app-primary-rgb);
  --bs-btn-active-bg: var(--app-primary-press);
  --bs-btn-active-border-color: var(--app-primary-press);
  --bs-btn-disabled-bg: var(--app-primary);
  --bs-btn-disabled-border-color: var(--app-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: var(--app-primary-hover);
  --bs-btn-hover-border-color: var(--app-primary-hover);
  --bs-btn-focus-shadow-rgb: var(--app-primary-rgb);
  --bs-btn-active-bg: var(--app-primary-press);
  --bs-btn-active-border-color: var(--app-primary-press);
  --bs-btn-disabled-color: var(--app-primary);
  --bs-btn-disabled-border-color: var(--app-primary);
}

.btn-secondary {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: var(--app-secondary);
  --bs-btn-border-color: var(--app-secondary);
  --bs-btn-hover-bg: var(--app-secondary-hover);
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-hover-border-color: var(--app-secondary-hover);
  --bs-btn-active-bg: var(--app-secondary-press);
  --bs-btn-active-color: var(--bs-body-color);
  --bs-btn-active-border-color: var(--app-secondary-press);
  --bs-btn-disabled-bg: var(--app-secondary);
  --bs-btn-disabled-color: var(--bs-body-color);
  --bs-btn-disabled-border-color: var(--app-secondary);
}

.btn-outline-secondary {
  --bs-btn-color: var(--app-secondary-text);
  --bs-btn-border-color: var(--app-secondary-text);
  --bs-btn-hover-bg: var(--app-secondary-hover);
  --bs-btn-hover-color: var(--app-secondary-text);
  --bs-btn-hover-border-color: var(--app-secondary-hover);
  --bs-btn-active-bg: var(--app-secondary-press);
  --bs-btn-active-color: var(--app-secondary-text);
  --bs-btn-active-border-color: var(--app-secondary-press);
  --bs-btn-disabled-color: var(--app-secondary-text);
  --bs-btn-disabled-border-color: var(--app-secondary-text);
}

/* ===========================================
   Form controls
   =========================================== */

/* Selects take the outline buttons' border colour so a dropdown sitting next
   to a button reads as the same control family. */
.form-select {
  border-color: var(--app-secondary-text);
}

/* ===========================================
   Components that hardcode the primary colour
   =========================================== */

.dropdown-menu,
.dropdown-menu-dark {
  --bs-dropdown-link-active-bg: var(--app-primary);
}

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--app-primary);
}

.pagination {
  --bs-pagination-active-bg: var(--app-primary);
  --bs-pagination-active-border-color: var(--app-primary);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem var(--app-primary-focus-ring);
}

.progress,
.progress-stacked {
  --bs-progress-bar-bg: var(--app-primary);
}

.list-group {
  --bs-list-group-active-bg: var(--app-primary);
  --bs-list-group-active-border-color: var(--app-primary);
}

.accordion {
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem
    var(--app-primary-focus-ring);
}

.btn-close {
  --bs-btn-close-focus-shadow: 0 0 0 0.25rem var(--app-primary-focus-ring);
}

/* ===========================================
   Focus states
   =========================================== */

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--app-primary-focus-border);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.nav-link:focus-visible {
  box-shadow: 0 0 0 0.25rem var(--app-primary-focus-ring);
}

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

.form-range:focus::-webkit-slider-thumb {
  box-shadow:
    0 0 0 1px #fff,
    0 0 0 0.25rem var(--app-primary-focus-ring);
}

.form-range:focus::-moz-range-thumb {
  box-shadow:
    0 0 0 1px #fff,
    0 0 0 0.25rem var(--app-primary-focus-ring);
}