/* ========================================================================
   THEMED BOOTSTRAP COMPONENTS (Light/Dark Aware)
   Uses: --cs-surface-bg, --cs-surface-border, --bs-primary, etc.
   To be included in custom.css after root tokens.
   ======================================================================== */

/* ========================================================================
   SUMMARY
   ------------------------------------------------------------------------
   1) Breadcrumbs
   2) List Group
   3) Accordion
   4) Progress
   5) Range (form-range)
   6) Global Link Colors
   7) Patches / Fixes (Dark mode adjustments, consistency tweaks)
   ======================================================================== */

/* ========================================================================
   1) BREADCRUMBS
   ======================================================================== */
.breadcrumb {
  --bs-breadcrumb-divider-color: var(--bs-gray-600);
  --bs-breadcrumb-item-active-color: var(--bs-heading-color);
  color: var(--bs-body-color);
}
.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: var(--bs-gray-600);
}
.breadcrumb a {
  color: var(--bs-link-color);
  text-decoration-color: currentColor;
}
.breadcrumb a:hover {
  color: var(--bs-link-hover-color);
}

/* Dark mode tweak: divider slightly lighter */
:root[data-bs-theme="dark"]
  .breadcrumb
  .breadcrumb-item
  + .breadcrumb-item::before {
  color: color-mix(in srgb, var(--bs-gray-600), white 18%);
}

/* ========================================================================
   2) LIST GROUP
   ======================================================================== */
.list-group {
  --bs-list-group-bg: var(--cs-surface-bg);
  --bs-list-group-color: var(--bs-body-color);
  --bs-list-group-border-color: var(--cs-surface-border);
  --bs-list-group-border-radius: 12px;
}
.list-group-item {
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
  background-color: var(--bs-list-group-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-list-group-border-color);
}
.list-group-item:hover {
  background-color: color-mix(
    in srgb,
    var(--cs-surface-bg),
    var(--bs-primary) 6%
  );
}
.list-group-item.active {
  --bs-list-group-active-color: var(--bs-primary);
  --bs-list-group-active-bg: rgba(var(--bs-primary-rgb), 0.14);
  --bs-list-group-active-border-color: color-mix(
    in srgb,
    var(--cs-surface-border),
    var(--bs-primary) 35%
  );
  font-weight: 700;
}

/* ========================================================================
   3) ACCORDION (Base)
   ------------------------------------------------------------------------
   Note: You may already have a .faq variation; this handles plain .accordion.
   ======================================================================== */
.accordion {
  --bs-accordion-border-radius: 12px;
  --bs-accordion-inner-border-radius: 10px;
  --bs-accordion-border-color: var(--cs-surface-border);

  --bs-accordion-color: var(--bs-body-color);
  --bs-accordion-bg: var(--cs-surface-bg);

  --bs-accordion-btn-color: var(--bs-heading-color);
  --bs-accordion-btn-bg: color-mix(
    in srgb,
    var(--cs-surface-bg),
    var(--bs-body-bg) 8%
  );
  --bs-accordion-btn-focus-border-color: color-mix(
    in srgb,
    var(--cs-surface-border),
    var(--bs-secondary) 45%
  );
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.18rem
    color-mix(in srgb, var(--bs-secondary), transparent 80%);

  --bs-accordion-active-color: var(--bs-primary);
  --bs-accordion-active-bg: rgba(var(--bs-primary-rgb), 0.12);
}
.accordion-item {
  background-color: var(--cs-surface-bg);
  border: 1px solid var(--cs-surface-border);
  border-radius: var(--bs-accordion-border-radius);
  overflow: hidden;
}
.accordion-item + .accordion-item {
  margin-top: 0.75rem;
}
.accordion-button {
  color: var(--bs-accordion-btn-color);
  background-color: var(--bs-accordion-btn-bg);
}
.accordion-button:not(.collapsed) {
  color: var(--bs-accordion-active-color);
  background-color: var(--bs-accordion-active-bg);
  box-shadow: none;
}
.accordion-button:focus {
  border-color: var(--bs-accordion-btn-focus-border-color);
  box-shadow: var(--bs-accordion-btn-focus-box-shadow);
}
.accordion-body {
  background: color-mix(in srgb, var(--cs-surface-bg), var(--bs-body-bg) 4%);
}

/* ========================================================================
   4) PROGRESS
   ======================================================================== */
.progress {
  --bs-progress-height: 8px;
  --bs-progress-bg: color-mix(
    in srgb,
    var(--cs-surface-bg),
    var(--bs-body-bg) 10%
  );
  --bs-progress-border-radius: 999px;
  background-color: var(--bs-progress-bg);
  border: 1px solid var(--cs-surface-border);
  border-radius: var(--bs-progress-border-radius);
  overflow: hidden;
}
.progress-bar {
  background-color: var(--bs-primary); /* Main color; override with .bg-* */
  transition:
    width 0.3s ease,
    background-color 0.2s ease;
}

/* Useful variants (optional) */
.progress .bg-secondary {
  background-color: var(--bs-secondary) !important;
}
.progress .bg-success {
  background-color: #198754 !important;
}
.progress .bg-info {
  background-color: #0dcaf0 !important;
}
.progress .bg-warning {
  background-color: #ffc107 !important;
  color: #0b1111;
}
.progress .bg-danger {
  background-color: #dc3545 !important;
}

/* ========================================================================
   5) RANGE (form-range)
   ======================================================================== */
/* Track */
.form-range {
  height: 1.5rem;
  padding: 0.4rem 0;
}
.form-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--bs-primary) 0 var(--_val, 50%),
    color-mix(in srgb, var(--cs-surface-bg), var(--bs-body-bg) 10%)
      var(--_val, 50%) 100%
  );
  border: 1px solid var(--cs-surface-border);
}
.form-range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cs-surface-bg), var(--bs-body-bg) 10%);
  border: 1px solid var(--cs-surface-border);
}

/* Thumb */
.form-range::-webkit-slider-thumb {
  appearance: none;
  margin-top: -6px; /* Aligns thumb to track center */
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--bs-primary);
  border: 2px solid color-mix(in srgb, var(--bs-primary), black 12%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  transition:
    transform 0.1s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}
.form-range::-webkit-slider-thumb:hover {
  transform: scale(1.06);
}
.form-range::-webkit-slider-thumb:active {
  box-shadow: 0 0 0 0.18rem
    color-mix(in srgb, var(--bs-secondary), transparent 80%);
}
.form-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--bs-primary);
  border: 2px solid color-mix(in srgb, var(--bs-primary), black 12%);
}

/* Consistent focus ring */
.form-range:focus {
  outline: 0;
}
.form-range:focus-visible {
  box-shadow: 0 0 0 0.14rem
    color-mix(in srgb, var(--bs-secondary), transparent 80%);
  border-radius: 6px;
}

/* Dark mode: increase contrast for inactive track */
:root[data-bs-theme="dark"] .form-range::-webkit-slider-runnable-track {
  background: linear-gradient(
    90deg,
    var(--bs-primary) 0 var(--_val, 50%),
    color-mix(in srgb, var(--cs-surface-bg), black 14%) var(--_val, 50%) 100%
  );
}
:root[data-bs-theme="dark"] .form-range::-moz-range-track {
  background: color-mix(in srgb, var(--cs-surface-bg), black 14%);
}

/* Tip: Use JS to set --_val for filled portion
   Example: <input type="range" style="--_val: 72%;"> */

/* ========================================================================
   6) GLOBAL LINK COLORS
   ======================================================================== */
:root,
:root[data-bs-theme="dark"] {
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: color-mix(in srgb, var(--bs-primary) 86%, black 14%);
  --bs-link-decoration: underline;
  --bs-link-hover-decoration: none;
}

/* ========================================================================
   7) PATCHES / FIXES
   ======================================================================== */

/* ------------------------------------------------------------------------
   ACCORDION: Dark Mode (Teal-only variant, including chevron)
   ------------------------------------------------------------------------ */
:root[data-bs-theme="dark"] .accordion {
  --acc-teal: var(--bs-teal, #20c997);
  --bs-accordion-color: var(--bs-body-color);
  --bs-accordion-bg: var(--cs-surface-bg);

  --bs-accordion-btn-color: var(--bs-heading-color);
  --bs-accordion-btn-bg: color-mix(in srgb, var(--cs-surface-bg), black 8%);

  /* Active and focus states: teal */
  --bs-accordion-active-color: var(--acc-teal);
  --bs-accordion-active-bg: color-mix(
    in srgb,
    var(--acc-teal) 18%,
    transparent
  );
  --bs-accordion-btn-focus-border-color: color-mix(
    in srgb,
    var(--cs-surface-border),
    var(--acc-teal) 45%
  );
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.18rem
    color-mix(in srgb, var(--acc-teal), transparent 80%);

  /* Chevron icon using currentColor */
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3e%3cpath fill-rule='evenodd' d='M1.646 5.646a.5.5 0 0 1 .708 0L8 11.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
}
:root[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
  color: var(--acc-teal); /* Chevron becomes teal via currentColor */
}

/* ------------------------------------------------------------------------
   PROGRESS: Height, contrast, and border consistency
   ------------------------------------------------------------------------ */
.progress {
  --bs-progress-height: 10px;
  --bs-progress-bg: color-mix(
    in srgb,
    var(--cs-surface-bg),
    var(--bs-body-bg) 12%
  );
  --bs-progress-border-radius: 999px;
  height: var(--bs-progress-height);
  background-color: var(--bs-progress-bg);
  border: 1px solid var(--cs-surface-border);
  border-radius: var(--bs-progress-border-radius);
  overflow: hidden;
}
.progress-bar {
  background-color: var(--bs-primary);
  color: #fff; /* Ensures text remains visible */
  line-height: var(--bs-progress-height);
  transition:
    width 0.3s ease,
    background-color 0.2s ease;
}
/* Variants */
.progress .bg-secondary {
  background-color: var(--bs-secondary) !important;
  color: #0b1111;
}
.progress .bg-success {
  background-color: #198754 !important;
}
.progress .bg-info {
  background-color: #0dcaf0 !important;
  color: #0b1111;
}
.progress .bg-warning {
  background-color: #ffc107 !important;
  color: #0b1111;
}
.progress .bg-danger {
  background-color: #dc3545 !important;
}

/* ------------------------------------------------------------------------
   RANGE (form-range): Consistent filled track in WebKit + Firefox
   ------------------------------------------------------------------------ */
.form-range {
  height: 1.75rem;
  padding: 0.4rem 0;
}
.form-range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--bs-primary) 0 var(--_val, 0%),
    color-mix(in srgb, var(--cs-surface-bg), var(--bs-body-bg) 12%)
      var(--_val, 0%) 100%
  );
  border: 1px solid var(--cs-surface-border);
}
.form-range::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cs-surface-bg), var(--bs-body-bg) 12%);
  border: 1px solid var(--cs-surface-border);
}
/* Firefox-only filled portion */
.form-range::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--bs-primary);
}

/* Thumb adjustments */
.form-range::-webkit-slider-thumb {
  appearance: none;
  margin-top: -7px; /* Centered on 8px track */
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--bs-primary);
  border: 2px solid color-mix(in srgb, var(--bs-primary), black 12%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  transition:
    transform 0.1s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}
.form-range::-webkit-slider-thumb:hover {
  transform: scale(1.06);
}
.form-range::-webkit-slider-thumb:active {
  box-shadow: 0 0 0 0.18rem
    color-mix(in srgb, var(--bs-secondary), transparent 80%);
}
.form-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--bs-primary);
  border: 2px solid color-mix(in srgb, var(--bs-primary), black 12%);
}

/* Consistent focus ring */
.form-range:focus {
  outline: 0;
}
.form-range:focus-visible {
  box-shadow: 0 0 0 0.14rem
    color-mix(in srgb, var(--bs-secondary), transparent 80%);
  border-radius: 6px;
}

/* Dark mode: slightly darker inactive track */
:root[data-bs-theme="dark"] .form-range::-webkit-slider-runnable-track {
  background: linear-gradient(
    90deg,
    var(--bs-primary) 0 var(--_val, 0%),
    color-mix(in srgb, var(--cs-surface-bg), black 16%) var(--_val, 0%) 100%
  );
}
:root[data-bs-theme="dark"] .form-range::-moz-range-track {
  background: color-mix(in srgb, var(--cs-surface-bg), black 16%);
}

/* Accordion — Dark Theme with Teal Chevron */
:root[data-bs-theme="dark"] .accordion {
  --acc-teal: var(--bs-teal, #20c997); /* fallback teal */

  /* Colors */
  --bs-accordion-btn-color: var(--bs-heading-color);
  --bs-accordion-active-color: var(--acc-teal); /* teal active */
  --bs-accordion-btn-icon-color: var(--acc-teal); /* chevron teal */
  --bs-accordion-btn-active-icon-color: var(--acc-teal);

  /* Backgrounds */
  --bs-accordion-bg: var(--cs-surface-bg);
  --bs-accordion-btn-bg: color-mix(in srgb, var(--cs-surface-bg), black 8%);
  --bs-accordion-active-bg: color-mix(
    in srgb,
    var(--acc-teal) 18%,
    transparent
  );

  /* Focus ring teal */
  --bs-accordion-btn-focus-border-color: color-mix(
    in srgb,
    var(--cs-surface-border),
    var(--acc-teal) 45%
  );
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.18rem
    color-mix(in srgb, var(--acc-teal), transparent 80%);

  /* Chevron as SVG uses currentColor (inherits teal now) */
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 5.646a.5.5 0 0 1 .708 0L8 11.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
}

/* Force the expanded button text and chevron to teal */
:root[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
  color: var(--acc-teal);
}