/**
 * Range Slider Component
 * ======================
 * ActivGate skin for noUiSlider.
 * Wrap your noUiSlider target in `.ag-range-slider` to apply.
 *
 * Tokens: uses --ag-* design tokens from design-tokens.css
 */

/* --- Wrapper — give handles room so they don't overflow the sidebar --- */
.ag-range-slider {
  padding: 0 10px;
}

/* --- Track --- */
.ag-range-slider .noUi-target {
  height: 6px;
  border: none;
  border-radius: var(--ag-radius-full);
  background: var(--ag-color-border);
  box-shadow: none;
}

/* --- Filled segment --- */
.ag-range-slider .noUi-connect {
  background: var(--ag-gradient-button);
  border-radius: var(--ag-radius-full);
}

/* --- Handle --- */
.ag-range-slider .noUi-handle {
  width: 16px !important;
  height: 16px !important;
  top: -5px !important;
  right: -8px !important;
  border-radius: 50% !important;
  background: var(--ag-color-bg-surface) !important;
  border: 2px solid var(--ag-color-brand-primary) !important;
  box-shadow: var(--ag-shadow-sm) !important;
  cursor: grab !important;
}

.ag-range-slider .noUi-handle:active {
  cursor: grabbing;
}

/* Hide default noUiSlider handle decorations */
.ag-range-slider .noUi-handle::before,
.ag-range-slider .noUi-handle::after {
  display: none;
}

/* Focus ring */
.ag-range-slider .noUi-handle:focus {
  outline: none;
  box-shadow: var(--ag-shadow-sm), var(--ag-shadow-focus);
}

/* --- Tooltip --- */
.ag-range-slider .noUi-tooltip {
  font-family: var(--ag-font-sans);
  font-size: var(--ag-font-size-xs);
  font-weight: var(--ag-font-weight-semibold);
  color: var(--ag-color-text-heading);
  background: var(--ag-color-bg-surface);
  border: 1px solid var(--ag-color-border);
  border-radius: var(--ag-radius-sm);
  box-shadow: var(--ag-shadow-xs);
  padding: 2px 6px;
}

/* --- Value labels row --- */
.ag-range-slider__values {
  display: flex;
  justify-content: space-between;
  font-family: var(--ag-font-sans);
  font-size: var(--ag-font-size-xs);
  color: var(--ag-color-text-muted);
  margin-top: 4px;
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .ag-range-slider .noUi-handle {
    transition: none;
  }
}