/* components/range/range.css */

/**
 * Range Component
 * Advanced slider system with single/multi-thumb support
 * Full WCAG 2.2 AAA compliance
 * Integrates with Icon System from Stage 1
 */

/* ========================================
   CSS Custom Properties
   ======================================== */

:root {
  /* Range sizes - track dimensions */
  --range-track-height-xs: 0.25rem;     /* 4px */
  --range-track-height-s: 0.375rem;     /* 6px */
  --range-track-height-m: 0.5rem;       /* 8px - default */
  --range-track-height-l: 0.625rem;     /* 10px */
  --range-track-height-xl: 0.75rem;     /* 12px */
  
  /* Range thumb sizes */
  --range-thumb-size-xs: 0.75rem;       /* 12px */
  --range-thumb-size-s: 1rem;           /* 16px */
  --range-thumb-size-m: 1.25rem;        /* 20px - default */
  --range-thumb-size-l: 1.5rem;         /* 24px */
  --range-thumb-size-xl: 1.875rem;      /* 30px */
  
  /* Range spacing */
  --range-padding-xs: 0.5rem;
  --range-padding-s: 0.75rem;
  --range-padding-m: 1rem;
  --range-padding-l: 1.25rem;
  --range-padding-xl: 1.5rem;
  
  /* Font sizes for labels */
  --range-font-size-xs: 0.625rem;       /* 10px */
  --range-font-size-s: 0.75rem;         /* 12px */
  --range-font-size-m: 0.875rem;        /* 14px */
  --range-font-size-l: 1rem;            /* 16px */
  --range-font-size-xl: 1.125rem;       /* 18px */
  
  /* Range colors */
  --range-track-bg: #e5e7eb;
  --range-track-bg-filled: #3b82f6;
  --range-track-bg-disabled: #f3f4f6;
  
  --range-thumb-bg: #ffffff;
  --range-thumb-border: #3b82f6;
  --range-thumb-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --range-thumb-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.15);
  --range-thumb-shadow-active: 0 1px 2px rgba(0, 0, 0, 0.2);
  
  --range-label-color: #374151;
  --range-label-color-disabled: #9ca3af;
  --range-tick-color: #9ca3af;
  
  /* Color variants */
  --range-color-primary: #3b82f6;
  --range-color-success: #10b981;
  --range-color-warning: #f59e0b;
  --range-color-danger: #ef4444;
  --range-color-info: #06b6d4;
  
  /* Transitions */
  --range-transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --range-thumb-transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Focus styles */
  --range-focus-ring-width: 2px;
  --range-focus-ring-color: #3b82f6;
  --range-focus-ring-offset: 2px;
  
  /* Z-index management */
  --range-z-track: 1;
  --range-z-filled: 2;
  --range-z-tick: 3;
  --range-z-thumb: 10;
  --range-z-tooltip: 100;
  --range-z-label: 5;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --range-track-bg: #4b5563;
    --range-track-bg-disabled: #374151;
    --range-thumb-bg: #1f2937;
    --range-thumb-border: #60a5fa;
    --range-label-color: #e5e7eb;
    --range-label-color-disabled: #6b7280;
    --range-tick-color: #6b7280;
  }
}

/* ========================================
   Base Range Component
   ======================================== */

.c-range {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--range-padding-m);
  width: 100%;
  min-height: 4rem;
}

/* Label */
.c-range__label {
  display: block;
  font-size: var(--range-font-size-m);
  font-weight: 500;
  color: var(--range-label-color);
  margin-bottom: 0.5rem;
}

/* Required indicator */
.c-range__label--required::after {
  content: " *";
  color: var(--range-color-danger);
}

/* Container for the slider */
.c-range__container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--range-thumb-size-m);
  margin: calc(var(--range-thumb-size-m) / 2) 0;
}

/* Track */
.c-range__track {
  position: absolute;
  width: 100%;
  height: var(--range-track-height-m);
  background: var(--range-track-bg);
  border-radius: var(--range-track-height-m);
  z-index: var(--range-z-track);
  transition: var(--range-transition);
}

/* Filled portion of track */
.c-range__track-filled {
  position: absolute;
  height: 100%;
  background: var(--range-track-bg-filled);
  border-radius: inherit;
  z-index: var(--range-z-filled);
  transition: var(--range-transition);
  left: 0;
  right: auto;
}

/* Native input (hidden but accessible) */
.c-range__input {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  z-index: var(--range-z-thumb);
}

/* Custom thumb */
.c-range__thumb {
  position: absolute;
  width: var(--range-thumb-size-m);
  height: var(--range-thumb-size-m);
  background: var(--range-thumb-bg);
  border: 2px solid var(--range-thumb-border);
  border-radius: 50%;
  box-shadow: var(--range-thumb-shadow);
  transform: translateX(-50%);
  transition: var(--range-thumb-transition);
  z-index: var(--range-z-thumb);
  cursor: grab;
  pointer-events: none;
}

.c-range__thumb:active {
  cursor: grabbing;
  transform: translateX(-50%) scale(1.1);
  box-shadow: var(--range-thumb-shadow-active);
}

/* Hover state */
.c-range__container:hover .c-range__thumb {
  box-shadow: var(--range-thumb-shadow-hover);
}

.c-range__container:hover .c-range__track-filled {
  filter: brightness(1.05);
}

/* Focus state */
.c-range__input:focus ~ .c-range__thumb {
  outline: var(--range-focus-ring-width) solid var(--range-focus-ring-color);
  outline-offset: var(--range-focus-ring-offset);
}

/* Disabled state */
.c-range--disabled .c-range__track {
  background: var(--range-track-bg-disabled);
}

.c-range--disabled .c-range__track-filled {
  background: var(--range-track-bg-disabled);
  opacity: 0.6;
}

.c-range--disabled .c-range__thumb {
  border-color: var(--range-tick-color);
  cursor: not-allowed;
  opacity: 0.6;
}

.c-range--disabled .c-range__input {
  cursor: not-allowed;
}

.c-range--disabled .c-range__label {
  color: var(--range-label-color-disabled);
}

/* ========================================
   Range with Values Display
   ======================================== */

.c-range__values {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
}

.c-range__value {
  font-size: var(--range-font-size-s);
  color: var(--range-tick-color);
  font-variant-numeric: tabular-nums;
}

.c-range__value--current {
  font-weight: 600;
  color: var(--range-label-color);
  padding: 0.125rem 0.375rem;
  background: var(--range-track-bg);
  border-radius: 0.25rem;
}

/* ========================================
   Range with Ticks
   ======================================== */

.c-range__ticks {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.c-range__tick {
  position: absolute;
  width: 2px;
  height: 8px;
  background: var(--range-tick-color);
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--range-z-tick);
}

.c-range__tick--major {
  height: 12px;
  width: 2px;
  background: var(--range-label-color);
}

.c-range__tick-labels {
  position: relative;
  width: 100%;
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
}

.c-range__tick-label {
  font-size: var(--range-font-size-xs);
  color: var(--range-tick-color);
  transform: translateX(-50%);
  position: absolute;
  white-space: nowrap;
}

/* ========================================
   Range with Tooltip
   ======================================== */

.c-range__tooltip {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: var(--tooltip-position, 50%);
  transform: translateX(-50%);
  padding: 0.25rem 0.5rem;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  font-size: var(--range-font-size-s);
  border-radius: 0.25rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease-in-out;
  z-index: var(--range-z-tooltip);
}

.c-range__tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.9);
}

/* Show tooltip on hover/focus */
.c-range__container:hover .c-range__tooltip,
.c-range__input:focus ~ .c-range__tooltip {
  opacity: 1;
}

/* ========================================
   Range Sizes
   ======================================== */

/* Extra Small */
.c-range--size-xs .c-range__track {
  height: var(--range-track-height-xs);
}

.c-range--size-xs .c-range__thumb {
  width: var(--range-thumb-size-xs);
  height: var(--range-thumb-size-xs);
}

.c-range--size-xs .c-range__container {
  height: var(--range-thumb-size-xs);
  margin: calc(var(--range-thumb-size-xs) / 2) 0;
}

.c-range--size-xs .c-range__label {
  font-size: var(--range-font-size-xs);
}

/* Small */
.c-range--size-s .c-range__track {
  height: var(--range-track-height-s);
}

.c-range--size-s .c-range__thumb {
  width: var(--range-thumb-size-s);
  height: var(--range-thumb-size-s);
}

.c-range--size-s .c-range__container {
  height: var(--range-thumb-size-s);
  margin: calc(var(--range-thumb-size-s) / 2) 0;
}

.c-range--size-s .c-range__label {
  font-size: var(--range-font-size-s);
}

/* Large */
.c-range--size-l .c-range__track {
  height: var(--range-track-height-l);
}

.c-range--size-l .c-range__thumb {
  width: var(--range-thumb-size-l);
  height: var(--range-thumb-size-l);
}

.c-range--size-l .c-range__container {
  height: var(--range-thumb-size-l);
  margin: calc(var(--range-thumb-size-l) / 2) 0;
}

.c-range--size-l .c-range__label {
  font-size: var(--range-font-size-l);
}

/* Extra Large */
.c-range--size-xl .c-range__track {
  height: var(--range-track-height-xl);
}

.c-range--size-xl .c-range__thumb {
  width: var(--range-thumb-size-xl);
  height: var(--range-thumb-size-xl);
}

.c-range--size-xl .c-range__container {
  height: var(--range-thumb-size-xl);
  margin: calc(var(--range-thumb-size-xl) / 2) 0;
}

.c-range--size-xl .c-range__label {
  font-size: var(--range-font-size-xl);
}

/* ========================================
   Color Variants
   ======================================== */

.c-range--primary .c-range__track-filled {
  background: var(--range-color-primary);
}

.c-range--primary .c-range__thumb {
  border-color: var(--range-color-primary);
}

.c-range--primary .c-range__input:focus ~ .c-range__thumb {
  outline-color: var(--range-color-primary);
}

.c-range--success .c-range__track-filled {
  background: var(--range-color-success);
}

.c-range--success .c-range__thumb {
  border-color: var(--range-color-success);
}

.c-range--success .c-range__input:focus ~ .c-range__thumb {
  outline-color: var(--range-color-success);
}

.c-range--warning .c-range__track-filled {
  background: var(--range-color-warning);
}

.c-range--warning .c-range__thumb {
  border-color: var(--range-color-warning);
}

.c-range--warning .c-range__input:focus ~ .c-range__thumb {
  outline-color: var(--range-color-warning);
}

.c-range--danger .c-range__track-filled {
  background: var(--range-color-danger);
}

.c-range--danger .c-range__thumb {
  border-color: var(--range-color-danger);
}

.c-range--danger .c-range__input:focus ~ .c-range__thumb {
  outline-color: var(--range-color-danger);
}

.c-range--info .c-range__track-filled {
  background: var(--range-color-info);
}

.c-range--info .c-range__thumb {
  border-color: var(--range-color-info);
}

.c-range--info .c-range__input:focus ~ .c-range__thumb {
  outline-color: var(--range-color-info);
}

/* ========================================
   Multi-thumb Range
   ======================================== */

.c-range--multi .c-range__container {
  position: relative;
}

.c-range--multi .c-range__input--min {
  z-index: calc(var(--range-z-thumb) + 1);
}

.c-range--multi .c-range__input--max {
  z-index: var(--range-z-thumb);
}

.c-range--multi .c-range__thumb--min {
  z-index: calc(var(--range-z-thumb) + 1);
}

.c-range--multi .c-range__thumb--max {
  z-index: var(--range-z-thumb);
}

.c-range--multi .c-range__track-filled {
  left: var(--range-min-position, 0%);
  right: calc(100% - var(--range-max-position, 100%));
}

/* Prevent thumbs overlap */
.c-range--multi .c-range__thumb--min:active {
  z-index: calc(var(--range-z-thumb) + 2);
}

/* ========================================
   Vertical Range
   ======================================== */

.c-range--vertical {
  flex-direction: row;
  align-items: center;
  height: 200px;
  width: auto;
  min-height: auto;
  padding: var(--range-padding-m) calc(var(--range-padding-m) * 2);
}

.c-range--vertical .c-range__container {
  flex-direction: column;
  width: var(--range-thumb-size-m);
  height: 100%;
  margin: 0 calc(var(--range-thumb-size-m) / 2);
}

.c-range--vertical .c-range__track {
  width: var(--range-track-height-m);
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.c-range--vertical .c-range__track-filled {
  width: 100%;
  bottom: 0;
  top: auto;
  left: 0;
  height: var(--range-filled-height, 50%);
}

.c-range--vertical .c-range__thumb {
  left: 50%;
  bottom: var(--thumb-position, 50%);
  transform: translate(-50%, 50%);
}

.c-range--vertical .c-range__input {
  writing-mode: bt-lr; /* IE/Edge */
  -webkit-appearance: slider-vertical; /* WebKit */
  width: var(--range-thumb-size-m);
  height: 100%;
}

.c-range--vertical .c-range__values {
  flex-direction: column-reverse;
  align-items: flex-start;
  margin-top: 0;
  margin-left: 1rem;
  gap: 0.5rem;
}

.c-range--vertical .c-range__tooltip {
  bottom: auto;
  left: calc(100% + 0.5rem);
  top: var(--tooltip-position, 50%);
  transform: translateY(-50%);
}

.c-range--vertical .c-range__tooltip::after {
  top: 50%;
  left: -4px;
  right: auto;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-right-color: rgba(0, 0, 0, 0.9);
}

/* ========================================
   Range with Steps (Discrete)
   ======================================== */

.c-range--discrete .c-range__track {
  position: relative;
}

.c-range--discrete .c-range__step-dots {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

.c-range--discrete .c-range__step-dot {
  width: 4px;
  height: 4px;
  background: var(--range-tick-color);
  border-radius: 50%;
  z-index: var(--range-z-tick);
}

.c-range--discrete .c-range__step-dot--active {
  background: var(--range-track-bg-filled);
  width: 6px;
  height: 6px;
}

/* ========================================
   Range with Icons
   ======================================== */

.c-range--with-icons {
  position: relative;
}

.c-range__icon-min,
.c-range__icon-max {
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--range-tick-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-range__icon-min {
  left: -2rem;
}

.c-range__icon-max {
  right: -2rem;
}

.c-range__icon-min svg,
.c-range__icon-max svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ========================================
   Range Groups
   ======================================== */

.c-range-group {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1rem;
  border: 1px solid var(--range-track-bg);
  border-radius: 0.5rem;
  background: rgba(0, 0, 0, 0.02);
}

.c-range-group__title {
  font-size: var(--range-font-size-l);
  font-weight: 600;
  color: var(--range-label-color);
  margin-bottom: 0.5rem;
}

.c-range-group--horizontal {
  flex-direction: row;
  align-items: center;
}

.c-range-group--horizontal .c-range {
  flex: 1;
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 640px) {
  .c-range--vertical {
    height: 150px;
  }
  
  .c-range__tick-label {
    font-size: 0.625rem;
  }
  
  .c-range-group--horizontal {
    flex-direction: column;
  }
}

/* ========================================
   High Contrast Mode
   ======================================== */

@media (prefers-contrast: high) {
  .c-range__track {
    border: 1px solid currentColor;
  }
  
  .c-range__thumb {
    border-width: 3px;
  }
  
  .c-range__input:focus ~ .c-range__thumb {
    outline-width: 3px;
  }
}

/* ========================================
   Reduced Motion
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .c-range__track,
  .c-range__track-filled,
  .c-range__thumb,
  .c-range__tooltip {
    transition: none;
  }
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
  .c-range__tooltip {
    display: none;
  }
  
  .c-range__value--current {
    font-weight: bold;
    background: none;
    text-decoration: underline;
  }
}