/* ---------------------------------------------------------------------------
   Palette — mirrors django-unfold's DEFAULT primary scale (Tailwind "purple",
   defined in oklch) so the wizard matches the admin exactly. Keep these in
   sync with UNFOLD["COLORS"]["primary"] if that is ever customised.
--------------------------------------------------------------------------- */
:root {
  --p-50:  oklch(97.7% .014 308.299);
  --p-100: oklch(94.6% .033 307.174);
  --p-200: oklch(90.2% .063 306.703);
  --p-300: oklch(82.7% .119 306.383);
  --p-400: oklch(71.4% .203 305.504);
  --p-500: oklch(62.7% .265 303.9);
  --p-600: oklch(55.8% .288 302.321);
  --p-700: oklch(49.6% .265 301.924);
  --p-800: oklch(43.8% .218 303.724);
  --p-900: oklch(38.1% .176 304.987);
  --p-950: oklch(29.1% .149 302.717);
}

/* ---- Step indicator ----------------------------------------------------- */
.wizard-steps .nav-link {
  cursor: default;
  color: var(--bs-secondary-color);
  background-image: linear-gradient(180deg, #f1f3f5 0%, #e2e6ea 100%);
  margin-right: .25rem;
}
.wizard-steps .nav-link.active {
  background-image: linear-gradient(180deg, var(--p-500) 0%, var(--p-600) 100%);
  color: #fff;
}
.wizard-steps .nav-link.done {
  background-image: linear-gradient(180deg, var(--p-100) 0%, var(--p-200) 100%);
  color: var(--p-800);
}

.line-row .select2-container { width: 100% !important; }

/* Tighten the gap between each field label and its control. Field spacing
   itself is handled by the mb-4 utility on the wrappers in the template. */
#wizardForm .form-label { margin-bottom: .15rem; }

/* Full-bleed divider: extends past the card-body padding to the card edges. */
.card-body > hr.full-bleed {
  margin-left: calc(-1 * var(--bs-card-spacer-x));
  margin-right: calc(-1 * var(--bs-card-spacer-x));
}

#reviewPane table { font-size: .92rem; }
#historyList .report-meta { font-size: .8rem; }

/* ---- Gradient buttons (recoloured to the primary palette) --------------- */
.btn-success {
  --bs-btn-bg: var(--p-600);
  --bs-btn-border-color: var(--p-700);
  --bs-btn-hover-bg: var(--p-700);
  --bs-btn-hover-border-color: var(--p-800);
  --bs-btn-active-bg: var(--p-800);
  --bs-btn-active-border-color: var(--p-800);
  --bs-btn-disabled-bg: var(--p-600);
  --bs-btn-disabled-border-color: var(--p-700);
  background-image: linear-gradient(180deg, var(--p-500) 0%, var(--p-600) 100%);
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background-image: linear-gradient(180deg, var(--p-600) 0%, var(--p-700) 100%);
}
.btn-success:focus-visible {
  box-shadow: 0 0 0 .25rem color-mix(in oklch, var(--p-500) 40%, transparent);
}

/* Outline buttons fill with a gradient on hover. */
.btn-outline-success {
  --bs-btn-color: var(--p-700);
  --bs-btn-border-color: var(--p-600);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--p-600);
  --bs-btn-hover-border-color: var(--p-600);
  --bs-btn-active-bg: var(--p-700);
  --bs-btn-active-border-color: var(--p-700);
}
.btn-outline-success:hover {
  background-image: linear-gradient(180deg, var(--p-500) 0%, var(--p-600) 100%);
}
.btn-outline-secondary:hover {
  background-image: linear-gradient(180deg, #8b929a 0%, #6c757d 100%);
  border-color: #6c757d;
}
.btn-outline-danger:hover {
  background-image: linear-gradient(180deg, #e4606d 0%, #dc3545 100%);
  border-color: #b02a37;
}

/* Link buttons (e.g. "Download again") use the primary colour. */
.btn-link { --bs-btn-color: var(--p-700); --bs-btn-hover-color: var(--p-900); }
[data-bs-theme="dark"] .btn-link { --bs-btn-color: var(--p-300); --bs-btn-hover-color: var(--p-200); }

/* The navbar brand bar: primary gradient + defining bottom border. */
.navbar.bg-success {
  background-image: linear-gradient(135deg, var(--p-800) 0%, var(--p-600) 55%, var(--p-400) 100%);
  border-bottom: 4px solid var(--p-900);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

/* ---- Dark-mode fixes for third-party widgets ---------------------------- */
/* Step pills — lighter than the dark body bg + an inset ring so inactive
   steps stand out instead of blending into the background. */
[data-bs-theme="dark"] .wizard-steps .nav-link {
  background-image: linear-gradient(180deg, #424950 0%, #343a40 100%);
  box-shadow: inset 0 0 0 1px #565e64;
}
[data-bs-theme="dark"] .wizard-steps .nav-link.done {
  background-image: linear-gradient(180deg, var(--p-900) 0%, var(--p-950) 100%);
  color: var(--p-200);
}

/* Select2: the bootstrap-5 theme hardcodes light colours using deeply-nested,
   high-specificity selectors, so the dark overrides must replicate those exact
   chains (a shorter selector loses even with !important-free higher intent). */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection,
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown,
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection__rendered,
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option {
  color: var(--bs-body-color);
}
/* Lighten the single-select dropdown caret so it shows on the dark field. */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
/* Hovered / keyboard-highlighted option. */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
  background-color: var(--p-600);
  color: #fff;
}
/* Currently-selected option. */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected {
  background-color: var(--p-700);
  color: #fff;
}

/* flatpickr calendar */
[data-bs-theme="dark"] .flatpickr-calendar {
  background: #2b3035;
  color: #e9ecef;
  box-shadow: 0 3px 13px rgba(0, 0, 0, .5);
}
[data-bs-theme="dark"] .flatpickr-calendar.arrowTop:after { border-bottom-color: #2b3035; }
[data-bs-theme="dark"] .flatpickr-calendar.arrowBottom:after { border-top-color: #2b3035; }
[data-bs-theme="dark"] .flatpickr-months .flatpickr-month,
[data-bs-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months,
[data-bs-theme="dark"] .flatpickr-weekday,
[data-bs-theme="dark"] .flatpickr-day {
  color: #e9ecef;
  fill: #e9ecef;
}
[data-bs-theme="dark"] .flatpickr-day.flatpickr-disabled,
[data-bs-theme="dark"] .flatpickr-day.prevMonthDay,
[data-bs-theme="dark"] .flatpickr-day.nextMonthDay { color: #6c757d; }
[data-bs-theme="dark"] .flatpickr-day:hover { background: #3a4046; border-color: #3a4046; }
[data-bs-theme="dark"] .flatpickr-day.selected,
[data-bs-theme="dark"] .flatpickr-day.startRange,
[data-bs-theme="dark"] .flatpickr-day.endRange,
[data-bs-theme="dark"] .flatpickr-day.inRange {
  background: var(--p-600);
  border-color: var(--p-600);
  color: #fff;
}
/* flatpickr bridges the gaps between range days with side box-shadows
   (light-grey for in-range, blue for adjacent ends). Recolour them to the
   primary so the range reads as one even block in dark mode. */
[data-bs-theme="dark"] .flatpickr-day.inRange {
  box-shadow: -5px 0 0 var(--p-600), 5px 0 0 var(--p-600);
}
[data-bs-theme="dark"] .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
[data-bs-theme="dark"] .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
[data-bs-theme="dark"] .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
  box-shadow: -10px 0 0 var(--p-600);
}