/* Styles for test sliders */
.test-slider .rc-slider-rail { background: #eee; }
.test-slider .rc-slider-track { background: #7c3aed; }
.test-slider .rc-slider-handle { border-color: #7c3aed; }

/* But Dash's built-in Slider uses its own classes; we'll add global accent for tooltips */
.rc-tooltip-inner { background: #7c3aed !important; color: white !important; }

/* Ensure BAU label orange stands out */
div[style*="color: orange"] { color: orange !important; font-weight: 600; }

/* Smaller tooltip text and tighter tooltip padding */
.rc-tooltip-inner { font-size: 0.75rem !important; padding: 4px 6px !important; }

/* Smaller handle size (visual) - careful: browser native styles vary */
.test-slider .rc-slider-handle { width: 12px !important; height: 12px !important; margin-top: -5px !important; }

/* Style only the accordion header/button (Bootstrap 5 .accordion-button) for a light purple accent */

/* Target the accordion-button when inside our marked AccordionItem */
.transition-green-steel-item .accordion-button {
  background-color: #f3e8ff !important;
  color: #2b0b5a !important;
  border-radius: 6px !important;
}

/* Make sure the collapse area (accordion-body) keeps default background */
.accordion-body.transition-green-steel-body {
	background-color: transparent !important;
}