/* ============================================================================
   FORMS - Sliders, Checkboxes, Toggles, Radio Groups, Chips
   ============================================================================

   All form control styles for Tesla-themed panel components.
   Base layout & typography live here; checked/selected state classes
   (.is-checked, .is-selected, .selected) are toggled by JS event handlers.
   Only theme-specific colors and computed values (slider fill width,
   thumb position) remain as inline styles in JS.

   MIGRATION STATUS: ACTIVE — classes applied by JS creation functions
   and state-toggle event handlers.

   Migrated from (Priority 5 — inline styles → CSS classes):
     - 07-panel_content/02-slider/01-slider_creation/01-panel_slider.js
     - 07-panel_content/04-checkbox/01-checkbox_creation/01-checkbox_creation.js
     - 07-panel_content/05-toggle/01-toggle_creation/01-toggle_creation.js
     - 07-panel_content/06-radio_group/01-radio_group_creation/01-radio_group_create.js
     - 07-panel_content/07-chip/01-chip_creation/01-chip_creation.js

   Migrated from (Priority 7B — state toggle inline styles → CSS classes):
     - 08-content_initialiser/01-content_initialiser.js
       (checkbox .is-checked, toggle .is-checked, radio .is-selected, chip .selected)

   Migrated from (Priority 7C — connector radio variant):
     - 01-filter_panel/03-filter_panel.js
       (.fp-radio-button--connector + .is-selected)

   Previously here (kept):
     - Range input thumb styles (from base.css / filter.css)
   ============================================================================ */


/* ============================================================================
   RANGE INPUT - Custom Slider Thumb Styles
   (Existing — carried forward from Phase 1 consolidation)
   ============================================================================ */

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: transparent;
  margin-top: -8px;
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: transparent;
  cursor: pointer;
}

/* Filter panel range accent color */
#floatingFilterPanel input[type="range"] {
  accent-color: var(--accent-black);
}


/* ============================================================================
   TESLA SLIDER (.fp-slider)
   Replaces: inline styles in createSlider() template literals
   ============================================================================ */

/* Outer wrapper — sits inside a .tesla-content-card */
.fp-slider {
  margin-bottom: 24px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

/* Header row: label on the left, current value on the right */
.fp-slider__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

/* Label text — uppercase muted style matching filter controls */
.fp-slider__label {
  color: #8e8e8e;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 400;
}

/* Live value readout on the right side of the header */
.fp-slider__value {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 400;
}

/* Track area — contains the hidden input, visual track, fill, and thumb */
.fp-slider__track-area {
  position: relative;
  height: 36px;
  cursor: pointer;
}

/* Hidden native range input — sits on top for hit-testing */
.fp-slider__input {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 36px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  outline: none;
  z-index: 10;
  margin: 0;
  padding: 0;
}

/* Visual track bar behind the fill */
.fp-slider__track {
  position: absolute;
  top: 18px;
  left: 0;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  /* Default track background — overridden by theme inline styles */
  background: rgba(255, 255, 255, 0.08);
}

/* Filled portion of the track — width set inline by JS */
.fp-slider__fill {
  position: absolute;
  top: 18px;
  left: 0;
  height: 4px;
  border-radius: 2px;
  /* Default fill — overridden by theme inline styles */
  background: #3e6ae1;
}

/* Draggable thumb — left set inline by JS */
.fp-slider__thumb {
  position: absolute;
  top: 10px;
  width: 20px;
  height: 20px;
  background: #3e6ae1;
  border-radius: 50%;
  transform: translateX(-50%);
  z-index: 5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Centered content inside the thumb (icon / symbol per theme) */
.fp-slider__thumb-content {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Theme variant for text-based thumb icons (€, %) */
.fp-slider__thumb-content--text {
  font-size: 8px;
  font-weight: bold;
  color: white;
}

/* Tick marks container — positioned below the track */
.fp-slider__ticks {
  position: absolute;
  top: 24px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 6px;
  box-sizing: border-box;
}

/* Individual tick mark */
.fp-slider__tick {
  width: 2px;
  height: 6px;
  background: rgba(255, 255, 255, 0.3);
}


/* ============================================================================
   TESLA CHECKBOX (.fp-checkbox)
   Replaces: inline styles in createCheckbox() template literal
   ============================================================================ */

/* Outer <label> — acts as the clickable hit area */
.fp-checkbox {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  /* Default unchecked state — overridden by .is-checked */
  border: 2px solid rgba(255, 255, 255, 0.1);
  background: transparent;
}

/* Checked state
   REMOVED (Priority 7B — inline style toggles → CSS class):
     visual.style.color / lbl.style.borderColor / lbl.style.backgroundColor
     in 01-content_initialiser.js checkbox change handler
     → now toggled via classList.add/remove('is-checked') */
.fp-checkbox.is-checked {
  border-color: #3e6ae1;
  background-color: rgba(62, 106, 225, 0.125);
}
.fp-checkbox.is-checked .fp-checkbox__visual {
  color: #3e6ae1;
}

/* Hidden native checkbox — visually hidden but remains in DOM for label association */
.fp-checkbox__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Visual label + checkmark container */
.fp-checkbox__visual {
  font-size: 0.9rem;
  position: relative;
  transition: color 0.2s ease;
  text-align: center;
  /* Default unchecked state — overridden by .is-checked on parent */
  color: #8e8e8e;
}

/* Checkmark indicator shown when checked */
.fp-checkbox__checkmark {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 12px;
  height: 12px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}


/* ============================================================================
   TESLA TOGGLE (.fp-toggle)
   Replaces: inline styles in createToggle() template literal
   ============================================================================ */

/* Outer <label> container — full-width flex row */
.fp-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  margin-bottom: 10px;
}

/* Toggle label text */
.fp-toggle__label {
  font-size: 0.9rem;
  color: #ffffff;
}

/* Toggle switch wrapper */
.fp-toggle__switch {
  position: relative;
  width: 40px;
  height: 24px;
}

/* Hidden native checkbox inside the toggle */
.fp-toggle__input {
  display: none;
}

/* Track (pill-shaped background) */
.fp-toggle__track {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  transition: background-color 0.2s ease;
  background-color: #333333;
}

/* On state — green track
   REMOVED (Priority 7B — inline style toggles → CSS class):
     track.style.backgroundColor in 01-content_initialiser.js toggle change handler
     → now toggled via classList.add/remove('is-checked') */
.fp-toggle__track.is-checked {
  background-color: #3dcc89;
}

/* Circular thumb that slides left/right */
.fp-toggle__thumb {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
  top: 2px;
  transition: left 0.2s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  left: 2px;
}

/* On state — thumb slides right
   REMOVED (Priority 7B — inline style toggles → CSS class):
     thumb.style.left in 01-content_initialiser.js toggle change handler
     → now toggled via classList.add/remove('is-checked') */
.fp-toggle__thumb.is-checked {
  left: 18px;
}


/* ============================================================================
   TESLA RADIO GROUP (.fp-radio-group)
   Replaces: inline styles in createRadioGroup() template literal
   ============================================================================ */

/* Container for all radio buttons */
.fp-radio-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Vertical layout variant */
.fp-radio-group--vertical {
  flex-direction: column;
  gap: 10px;
}

/* Individual radio button <label> */
.fp-radio-button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
  background: transparent;
}

/* Selected state (green — default for non-connector radios)
   REMOVED (Priority 7B — inline style toggles → CSS class):
     lbl.style.borderColor / lbl.style.background / labelSpan.style.color
     in 01-content_initialiser.js radio change handler
     → now toggled via classList.add/remove('is-selected')

   Also replaces initial-render inline styles in 01-radio_group_create.js
   lines 70-71 (border-color, background on checked labels) */
.fp-radio-button.is-selected {
  border-color: #3dcc89;
  background: rgba(61, 204, 137, 0.125);
}
.fp-radio-button.is-selected .fp-radio-button__label {
  color: #3dcc89;
}

/* ---------- Connector radio variant (blue) ----------
   REMOVED (Priority 7C — inline style toggles → CSS class):
     lbl.style.borderColor / lbl.style.background / textSpan.style.color
     + iconSvg.setAttribute('stroke', ...) in 03-filter_panel.js
     connector radio change handler (lines 163-181)
     → now toggled via classList.add/remove('is-selected') on
       .fp-radio-button--connector labels

   Defaults differ from generic radios:
     border: #252525 (not transparent), label color: #8e8e8e (not #fff),
     SVG stroke: #8e8e8e */
.fp-radio-button--connector {
  border-color: rgba(255, 255, 255, 0.1);
}
.fp-radio-button--connector .fp-radio-button__label {
  color: #8e8e8e;
}
.fp-radio-button--connector svg {
  stroke: #8e8e8e;
}
.fp-radio-button--connector.is-selected {
  border-color: #3e6ae1;
  background: rgba(62, 106, 225, 0.125);
}
.fp-radio-button--connector.is-selected .fp-radio-button__label {
  color: #3e6ae1;
}
.fp-radio-button--connector.is-selected svg {
  stroke: #3e6ae1;
}

/* Hidden native radio input */
.fp-radio-button__input {
  display: none;
}

/* Radio label text */
.fp-radio-button__label {
  font-size: 0.9rem;
  /* Default color — overridden by .is-selected on parent or --connector variant */
  color: #ffffff;
}


/* ============================================================================
   TESLA CHIP (.fp-chip)
   Replaces: inline styles in createChip() template literal
   ============================================================================ */

/* Chip container */
.fp-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 16px;
  padding: 5px 12px;
  margin-right: 8px;
  margin-bottom: 8px;
  font-size: 0.9rem;
  transition: background-color 0.2s ease;
  cursor: pointer;
  background-color: rgba(30, 30, 30, 0.7);
  color: #fff;
}

/* Selected state — green background, dark text
   REMOVED (Priority 7B — inline style toggles → CSS class):
     this.style.backgroundColor / this.style.color
     in 01-content_initialiser.js chip click handler
     → now handled by the existing classList.add/remove('selected')
       which previously had no CSS — now it does */
.fp-chip.selected {
  background-color: #3dcc89;
  color: #000;
}

/* Icon wrapper inside chip */
.fp-chip__icon {
  margin-right: 6px;
  display: flex;
  align-items: center;
}

/* Dismiss (close) button inside chip */
.fp-chip__dismiss {
  margin-left: 6px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
}