/**
 * RootReal Form Components - Selection Styles
 * 
 * Styles for selection components including Checkbox, Radio, Dropdown,
 * MultiSelect, and ListBox.
 */

/* ============================================================================
 * Checkbox Styles
 * ========================================================================== */

.rr-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--rr-spacing-2);
  cursor: pointer;
  user-select: none;
}

.rr-checkbox-input {
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border: var(--rr-border-width-2) solid var(--rr-gray-400);
  border-radius: var(--rr-radius-base);
  background-color: white;
  cursor: pointer;
  transition: all var(--rr-transition-base);
  position: relative;
}

.rr-checkbox-input:checked {
  background-color: var(--rr-primary-500);
  border-color: var(--rr-primary-500);
}

.rr-checkbox-input:checked::after {
  content: '';
  position: absolute;
  left: 0.375rem;
  top: 0.125rem;
  width: 0.375rem;
  height: 0.625rem;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.rr-checkbox-input:indeterminate {
  background-color: var(--rr-primary-500);
  border-color: var(--rr-primary-500);
}

.rr-checkbox-input:indeterminate::after {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 0.5rem;
  width: 0.625rem;
  height: 2px;
  background-color: white;
}

.rr-checkbox-input:focus {
  outline: none;
  box-shadow: var(--rr-shadow-focus);
}

.rr-checkbox-input:disabled {
  opacity: var(--rr-disabled-opacity);
  cursor: var(--rr-disabled-cursor);
}

.rr-checkbox-label {
  font-size: var(--rr-font-size-base);
  color: var(--rr-gray-900);
}

/* `label_placement` (round-4 parity, plan `viz-checkbox-round4-runtime-parity-knobs`):
 * the component emits `rr-label-{start,top,bottom}` (End is the default row),
 * but the classes had NO rules — the knob was inert on the Rust runtime while
 * functional on React (operator round-4 report B). DOM order is
 * [input-wrapper][label]; the visual order flips via flex-direction. */
.rr-checkbox.rr-label-start {
  flex-direction: row-reverse;
}

.rr-checkbox.rr-label-top {
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 0.125rem;
}

.rr-checkbox.rr-label-bottom {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
}

/* RTL mirror for the horizontal placements (the component emits `rr-rtl`). */
.rr-checkbox.rr-rtl.rr-label-start {
  flex-direction: row;
}
.rr-checkbox.rr-rtl.rr-label-end {
  flex-direction: row-reverse;
}

/* `variant` (round-4 report B): Filled/Text parity with the React runtime's
 * `stateIcons` semantics. Filled: the unchecked box reads muted (React's
 * action.disabled outline), checked fills as usual.
 * Round-5 B (plan `viz-slider-checkbox-round5-config-uniformity`): the Text
 * variant renders a VISIBLE text-glyph box — the React `GlyphBox` semantics
 * 1:1: a 2px current-colour border, a TRANSPARENT background in BOTH states
 * (checked overrides the accent fill), and the glyph in the current text
 * colour (never the on-accent white — white-on-white was invisible). The
 * unchecked state is the EMPTY bordered box (React renders exactly that for
 * the empty unchecked_icon). */
.rr-checkbox-filled .rr-checkbox-input:not(:checked) {
  border-color: var(--rr-gray-300, rgb(203, 213, 225));
  background-color: var(--rr-gray-50, #f8fafc);
}

.rr-checkbox-text .rr-checkbox-input {
  border-color: currentColor;
  background-color: transparent;
}

.rr-checkbox-text .rr-checkbox-input:checked,
.rr-checkbox-text .rr-checkbox-input:indeterminate {
  background-color: transparent;
  border-color: currentColor;
}

.rr-checkbox-text.rr-checkbox-glyph-overlay .rr-checkbox-box {
  color: currentColor;
}

.rr-checkbox-text.rr-checkbox-glyph-overlay
  .rr-checkbox-input:checked
  ~ .rr-checkbox-box {
  color: currentColor;
}

/* `ripple` (round-4 report B): the press-surface feedback analogue of MUI's
 * ink ripple — the component emits `rr-ripple`, but the class had no rule, so
 * the knob was inert on Rust. A bounded press pulse on the box (scale + halo)
 * reads as the same interaction affordance as `disableRipple` on React. */
.rr-ripple .rr-checkbox-input:active:not(:disabled) {
  transform: scale(0.88);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--rr-primary-500, #3b82f6) 14%, transparent);
}

.rr-ripple .rr-checkbox-input {
  transition: transform 120ms ease, box-shadow 120ms ease,
    background-color 120ms ease, border-color 120ms ease;
}

/* Checkbox icon overlay (custom glyphs / Text+Filled variants). The overlay
 * box sits ON TOP of the visually-rendered input; when the overlay is active
 * (`rr-checkbox-glyph-overlay`), the input's own CSS ::after mark is
 * suppressed so the two never double-render (plan
 * `list-checkbox-react-rust-parity`, rrp:pl:xxhj0qtb3 — the overlay glyph used
 * to render as a stray text node BELOW the box). */
.rr-checkbox-input-wrapper {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

/* Checkbox group layout (the classes `checkbox_group.rs` emits were unstyled,
 * so grouped checkboxes flowed inline instead of stacking like the React
 * runtime's FormGroup column — parity fix, same plan). */
.rr-checkbox-group {
  /* `checkbox.alignment` (plan `viz-checkbox-list-controls-parity-remediation`):
     the viz preview scopes `--rr-checkbox-group-align` on
     `.rr-checkbox-viz-preview`; `stretch` (the fallback) is the pre-knob
     layout, so unscoped consumers render exactly as before. */
  display: flex;
  flex-direction: column;
  align-items: var(--rr-checkbox-group-align, stretch);
}

.rr-checkbox-group-label {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--rr-gray-900);
  margin-bottom: 0.375rem;
}

.rr-checkbox-group-select-all {
  margin-bottom: 0.125rem;
}

.rr-checkbox-group-items {
  display: flex;
  flex-direction: column;
  /* `checkbox.gap` (round-4 report D, plan `viz-checkbox-round4-runtime-parity-knobs`):
     the item gap is CONFIG-DRIVEN and identical on both runtimes — the viz
     preview scopes `--rr-checkbox-group-gap` (px); the fallback is the
     pre-knob visual (0.125rem column) so unscoped consumers are unchanged. */
  gap: var(--rr-checkbox-group-gap, 0.125rem);
}

.rr-checkbox-group.rr-direction-row .rr-checkbox-group-items {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--rr-checkbox-group-gap, 0.75rem);
}

.rr-checkbox-group-helper {
  font-size: 0.75rem;
  color: var(--rr-gray-500);
  margin-top: 0.375rem;
}

.rr-checkbox-group-helper.rr-helper-error {
  color: var(--rr-error-500, #d32f2f);
}

.rr-checkbox-box {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: #ffffff;
  line-height: 1;
}

.rr-checkbox-icon {
  font-size: 0.85em;
  line-height: 1;
}

.rr-checkbox-glyph-overlay .rr-checkbox-input:checked::after,
.rr-checkbox-glyph-overlay .rr-checkbox-input:indeterminate::after {
  content: none;
}

/* Unchecked overlay glyphs (custom unchecked_icon / Text variant) draw over
 * the empty box in the current (dark) colour, not the on-accent white. */
.rr-checkbox-glyph-overlay .rr-checkbox-input:not(:checked):not(:indeterminate) ~ .rr-checkbox-box {
  color: currentColor;
}

/* `checkbox.size_px` (round-5 A-plus, plan
 * `viz-slider-checkbox-round5-config-uniformity`): the CONTINUOUS size key —
 * the discrete Small/Medium/Large tier rules are REPLACED by one scoped var
 * (`--rr-checkbox-size-px`, seeded by the viz preview from the SAME clamp as
 * the React icon fontSize). The glyph overlay scales with the box. */
.rr-checkbox-viz-preview .rr-checkbox-input {
  width: var(--rr-checkbox-size-px, 24px);
  height: var(--rr-checkbox-size-px, 24px);
  flex: 0 0 auto;
}

.rr-checkbox-viz-preview .rr-checkbox-box {
  font-size: var(--rr-checkbox-size-px, 24px);
}

.rr-checkbox-viz-preview .rr-checkbox-icon {
  font-size: calc(var(--rr-checkbox-size-px, 24px) * 0.8);
}

/* ============================================================================
 * Radio Styles
 * ========================================================================== */

.rr-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--rr-spacing-2);
  cursor: pointer;
  user-select: none;
}

.rr-radio-input {
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border: var(--rr-border-width-2) solid var(--rr-gray-400);
  border-radius: var(--rr-radius-full);
  background-color: white;
  cursor: pointer;
  transition: all var(--rr-transition-base);
  position: relative;
}

.rr-radio-input:checked {
  border-color: var(--rr-primary-500);
}

.rr-radio-input:checked::after {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 0.25rem;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--rr-radius-full);
  background-color: var(--rr-primary-500);
}

.rr-radio-input:focus {
  outline: none;
  box-shadow: var(--rr-shadow-focus);
}

.rr-radio-input:disabled {
  opacity: var(--rr-disabled-opacity);
  cursor: var(--rr-disabled-cursor);
}

.rr-radio-label {
  font-size: var(--rr-font-size-base);
  color: var(--rr-gray-900);
}

/* ============================================================================
 * Dropdown Styles
 * ========================================================================== */

.rr-dropdown {
  position: relative;
  width: 100%;
}

.rr-dropdown-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--rr-input-padding-y-base) var(--rr-input-padding-x-base);
  height: var(--rr-input-height-base);
  background-color: white;
  border: var(--rr-border-width) solid var(--rr-gray-300);
  border-radius: var(--rr-radius-md);
  font-size: var(--rr-font-size-base);
  color: var(--rr-gray-900);
  cursor: pointer;
  transition: border-color var(--rr-transition-base),
              box-shadow var(--rr-transition-base);
}

.rr-dropdown-trigger:hover:not(:disabled) {
  border-color: var(--rr-gray-400);
}

.rr-dropdown-trigger:focus {
  outline: none;
  border-color: var(--rr-primary-500);
  box-shadow: var(--rr-shadow-focus);
}

.rr-dropdown-trigger-placeholder {
  color: var(--rr-gray-400);
}

.rr-dropdown-icon {
  color: var(--rr-gray-500);
  transition: transform var(--rr-transition-base);
}

.rr-dropdown-open .rr-dropdown-icon {
  transform: rotate(180deg);
}

.rr-dropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: var(--rr-spacing-1);
  background-color: white;
  border: var(--rr-border-width) solid var(--rr-gray-300);
  border-radius: var(--rr-radius-md);
  box-shadow: var(--rr-shadow-lg);
  max-height: 15rem;
  overflow-y: auto;
  z-index: var(--rr-z-index-dropdown);
}

.rr-dropdown-option {
  padding: var(--rr-spacing-2) var(--rr-spacing-3);
  cursor: pointer;
  transition: background-color var(--rr-transition-fast);
}

.rr-dropdown-option:hover,
.rr-dropdown-option-focused {
  background-color: var(--rr-gray-100);
}

.rr-dropdown-option-selected {
  background-color: var(--rr-primary-50);
  color: var(--rr-primary-700);
  font-weight: var(--rr-font-weight-medium);
}

.rr-dropdown-option-disabled {
  opacity: var(--rr-disabled-opacity);
  cursor: var(--rr-disabled-cursor);
}

/* ============================================================================
 * MultiSelect Styles
 * ========================================================================== */

.rr-multiselect {
  position: relative;
  width: 100%;
}

.rr-multiselect-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--rr-input-height-base);
  padding: var(--rr-spacing-2) var(--rr-input-padding-x-base);
  background-color: white;
  border: var(--rr-border-width) solid var(--rr-gray-300);
  border-radius: var(--rr-radius-md);
  cursor: pointer;
  transition: border-color var(--rr-transition-base),
              box-shadow var(--rr-transition-base);
}

.rr-multiselect-trigger:focus {
  outline: none;
  border-color: var(--rr-primary-500);
  box-shadow: var(--rr-shadow-focus);
}

.rr-multiselect-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rr-spacing-1);
  flex: 1;
}

.rr-multiselect-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: var(--rr-spacing-1);
  background-color: white;
  border: var(--rr-border-width) solid var(--rr-gray-300);
  border-radius: var(--rr-radius-md);
  box-shadow: var(--rr-shadow-lg);
  z-index: var(--rr-z-index-dropdown);
}

.rr-multiselect-header {
  padding: var(--rr-spacing-3);
  border-bottom: var(--rr-border-width) solid var(--rr-gray-200);
}

.rr-multiselect-filter {
  width: 100%;
  padding: var(--rr-spacing-2);
  border: var(--rr-border-width) solid var(--rr-gray-300);
  border-radius: var(--rr-radius-base);
  font-size: var(--rr-font-size-sm);
}

.rr-multiselect-options {
  max-height: 12rem;
  overflow-y: auto;
}

/* ============================================================================
 * ListBox Styles
 * ========================================================================== */

.rr-listbox {
  width: 100%;
  background-color: white;
  border: var(--rr-border-width) solid var(--rr-gray-300);
  border-radius: var(--rr-radius-md);
}

.rr-listbox-filter {
  padding: var(--rr-spacing-3);
  border-bottom: var(--rr-border-width) solid var(--rr-gray-200);
}

.rr-listbox-filter-input {
  width: 100%;
  padding: var(--rr-spacing-2);
  border: var(--rr-border-width) solid var(--rr-gray-300);
  border-radius: var(--rr-radius-base);
  font-size: var(--rr-font-size-sm);
}

.rr-listbox-filter-input:focus {
  outline: none;
  border-color: var(--rr-primary-500);
  box-shadow: var(--rr-shadow-focus);
}

.rr-listbox-list {
  max-height: 15rem;
  overflow-y: auto;
  padding: var(--rr-spacing-2);
}

.rr-listbox-list:focus {
  outline: none;
}

.rr-listbox-option {
  padding: var(--rr-spacing-2) var(--rr-spacing-3);
  border-radius: var(--rr-radius-base);
  cursor: pointer;
  transition: background-color var(--rr-transition-fast);
}

.rr-listbox-option:hover,
.rr-listbox-option-focused {
  background-color: var(--rr-gray-100);
}

.rr-listbox-option-selected {
  background-color: var(--rr-primary-50);
  color: var(--rr-primary-700);
  font-weight: var(--rr-font-weight-medium);
}

.rr-listbox-option-disabled {
  opacity: var(--rr-disabled-opacity);
  cursor: var(--rr-disabled-cursor);
}

.rr-listbox-empty {
  padding: var(--rr-spacing-4);
  text-align: center;
  color: var(--rr-gray-500);
  font-size: var(--rr-font-size-sm);
}

/* ============================================================================
 * OrderList Styles
 * ========================================================================== */

.rr-orderlist {
  display: flex;
  gap: var(--rr-spacing-3);
  width: 100%;
}

.rr-orderlist-controls {
  display: flex;
  flex-direction: column;
  gap: var(--rr-spacing-2);
}

.rr-orderlist-control-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background-color: white;
  border: var(--rr-border-width) solid var(--rr-gray-300);
  border-radius: var(--rr-radius-md);
  color: var(--rr-gray-700);
  cursor: pointer;
  transition: all var(--rr-transition-base);
}

.rr-orderlist-control-btn:hover:not(:disabled) {
  background-color: var(--rr-primary-50);
  border-color: var(--rr-primary-500);
  color: var(--rr-primary-700);
}

.rr-orderlist-control-btn:focus {
  outline: none;
  box-shadow: var(--rr-shadow-focus);
}

.rr-orderlist-control-btn:disabled {
  opacity: var(--rr-disabled-opacity);
  cursor: var(--rr-disabled-cursor);
}

.rr-orderlist-list-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: var(--rr-border-width) solid var(--rr-gray-300);
  border-radius: var(--rr-radius-md);
  background-color: white;
  overflow: hidden;
}

.rr-orderlist-filter {
  padding: var(--rr-spacing-2);
  border-bottom: var(--rr-border-width) solid var(--rr-gray-200);
}

.rr-orderlist-filter-input {
  width: 100%;
  padding: var(--rr-spacing-2);
  border: var(--rr-border-width) solid var(--rr-gray-300);
  border-radius: var(--rr-radius-base);
  font-size: var(--rr-font-size-sm);
}

.rr-orderlist-filter-input:focus {
  outline: none;
  border-color: var(--rr-primary-500);
  box-shadow: var(--rr-shadow-focus);
}

.rr-orderlist-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  max-height: 20rem;
}

.rr-orderlist-item {
  padding: var(--rr-spacing-3);
  border-bottom: var(--rr-border-width) solid var(--rr-gray-200);
  cursor: pointer;
  transition: background-color var(--rr-transition-base);
  user-select: none;
}

.rr-orderlist-item:last-child {
  border-bottom: none;
}

.rr-orderlist-item:hover {
  background-color: var(--rr-gray-50);
}

.rr-orderlist-item--selected {
  background-color: var(--rr-primary-50);
  color: var(--rr-primary-700);
  font-weight: var(--rr-font-weight-medium);
}

.rr-orderlist-item--focused {
  outline: 2px solid var(--rr-primary-500);
  outline-offset: -2px;
}

.rr-orderlist-item--disabled {
  opacity: var(--rr-disabled-opacity);
  cursor: var(--rr-disabled-cursor);
}

/* Size Variants */
.rr-orderlist--small .rr-orderlist-item {
  padding: var(--rr-spacing-2);
  font-size: var(--rr-font-size-sm);
}

.rr-orderlist--large .rr-orderlist-item {
  padding: var(--rr-spacing-4);
  font-size: var(--rr-font-size-lg);
}

/* State Variants */
.rr-orderlist--disabled {
  opacity: var(--rr-disabled-opacity);
  pointer-events: none;
}

.rr-orderlist--readonly {
  pointer-events: none;
}

.rr-orderlist--invalid {
  border-color: var(--rr-danger-500);
}

.rr-orderlist--valid {
  border-color: var(--rr-success-500);
}

/* ============================================================================
 * PickList Styles
 * ========================================================================== */

.rr-picklist {
  display: flex;
  gap: var(--rr-spacing-4);
  width: 100%;
  align-items: stretch;
}

.rr-picklist-source-container,
.rr-picklist-target-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: var(--rr-border-width) solid var(--rr-gray-300);
  border-radius: var(--rr-radius-md);
  background-color: white;
  overflow: hidden;
  min-width: 0;
}

.rr-picklist-header {
  padding: var(--rr-spacing-3);
  background-color: var(--rr-gray-50);
  border-bottom: var(--rr-border-width) solid var(--rr-gray-200);
}

.rr-picklist-title {
  font-weight: var(--rr-font-weight-semibold);
  color: var(--rr-gray-700);
  font-size: var(--rr-font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rr-picklist-filter {
  padding: var(--rr-spacing-2);
  border-bottom: var(--rr-border-width) solid var(--rr-gray-200);
}

.rr-picklist-filter-input {
  width: 100%;
  padding: var(--rr-spacing-2);
  border: var(--rr-border-width) solid var(--rr-gray-300);
  border-radius: var(--rr-radius-base);
  font-size: var(--rr-font-size-sm);
}

.rr-picklist-filter-input:focus {
  outline: none;
  border-color: var(--rr-primary-500);
  box-shadow: var(--rr-shadow-focus);
}

.rr-picklist-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  max-height: 20rem;
  flex: 1;
}

.rr-picklist-item {
  padding: var(--rr-spacing-3);
  border-bottom: var(--rr-border-width) solid var(--rr-gray-200);
  cursor: pointer;
  transition: background-color var(--rr-transition-base);
  user-select: none;
}

.rr-picklist-item:last-child {
  border-bottom: none;
}

.rr-picklist-item:hover {
  background-color: var(--rr-gray-50);
}

.rr-picklist-item--selected {
  background-color: var(--rr-primary-50);
  color: var(--rr-primary-700);
  font-weight: var(--rr-font-weight-medium);
}

.rr-picklist-item--disabled {
  opacity: var(--rr-disabled-opacity);
  cursor: var(--rr-disabled-cursor);
}

.rr-picklist-controls {
  display: flex;
  flex-direction: column;
  gap: var(--rr-spacing-2);
  justify-content: center;
  align-self: center;
}

.rr-picklist-control-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background-color: white;
  border: var(--rr-border-width) solid var(--rr-gray-300);
  border-radius: var(--rr-radius-md);
  color: var(--rr-gray-700);
  cursor: pointer;
  transition: all var(--rr-transition-base);
  font-size: var(--rr-font-size-lg);
}

.rr-picklist-control-btn:hover:not(:disabled) {
  background-color: var(--rr-primary-50);
  border-color: var(--rr-primary-500);
  color: var(--rr-primary-700);
}

.rr-picklist-control-btn:focus {
  outline: none;
  box-shadow: var(--rr-shadow-focus);
}

.rr-picklist-control-btn:disabled {
  opacity: var(--rr-disabled-opacity);
  cursor: var(--rr-disabled-cursor);
}

/* Size Variants */
.rr-picklist--small .rr-picklist-item {
  padding: var(--rr-spacing-2);
  font-size: var(--rr-font-size-sm);
}

.rr-picklist--large .rr-picklist-item {
  padding: var(--rr-spacing-4);
  font-size: var(--rr-font-size-lg);
}

/* State Variants */
.rr-picklist--disabled {
  opacity: var(--rr-disabled-opacity);
  pointer-events: none;
}

.rr-picklist--readonly {
  pointer-events: none;
}

.rr-picklist--invalid {
  border-color: var(--rr-danger-500);
}

.rr-picklist--valid {
  border-color: var(--rr-success-500);
}

/* Responsive */
@media (max-width: 768px) {
  .rr-picklist {
    flex-direction: column;
  }

  .rr-picklist-controls {
    flex-direction: row;
    justify-content: center;
  }

  .rr-picklist-control-btn {
    transform: rotate(90deg);
  }
}

/* ============================================================================
 * RadioButton - Radio button input (extends Checkbox styles)
 * ========================================================================== */

.rr-radiobutton {
  display: inline-flex;
  align-items: center;
  gap: var(--rr-spacing-2);
  cursor: pointer;
  user-select: none;
}

.rr-radiobutton-input {
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border: var(--rr-border-width) solid var(--rr-gray-400);
  border-radius: var(--rr-radius-full);
  background-color: white;
  cursor: pointer;
  position: relative;
  transition: border-color var(--rr-transition-fast),
              background-color var(--rr-transition-fast),
              box-shadow var(--rr-transition-fast);
}

.rr-radiobutton-input:hover:not(:disabled) {
  border-color: var(--rr-primary-500);
}

.rr-radiobutton-input:focus {
  outline: none;
  border-color: var(--rr-primary-500);
  box-shadow: var(--rr-shadow-focus);
}

.rr-radiobutton-input:checked {
  border-color: var(--rr-primary-500);
  background-color: var(--rr-primary-500);
}

.rr-radiobutton-input:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.5rem;
  height: 0.5rem;
  background-color: white;
  border-radius: var(--rr-radius-full);
}

.rr-radiobutton-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.rr-radiobutton-label {
  color: var(--rr-gray-900);
  font-size: var(--rr-font-size-base);
  cursor: pointer;
}

.rr-radiobutton-input:disabled + .rr-radiobutton-label {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================================
 * Switch - Toggle switch (iOS-style)
 * ========================================================================== */

.rr-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--rr-spacing-2);
  cursor: pointer;
  user-select: none;
}

.rr-switch-input {
  appearance: none;
  width: 2.75rem;
  height: 1.5rem;
  background-color: var(--rr-gray-300);
  border-radius: var(--rr-radius-full);
  position: relative;
  cursor: pointer;
  transition: background-color var(--rr-transition-base);
}

.rr-switch-input::after {
  content: '';
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1.25rem;
  height: 1.25rem;
  background-color: white;
  border-radius: var(--rr-radius-full);
  box-shadow: var(--rr-shadow-sm);
  transition: transform var(--rr-transition-base);
}

.rr-switch-input:hover:not(:disabled) {
  background-color: var(--rr-gray-400);
}

.rr-switch-input:focus {
  outline: none;
  box-shadow: var(--rr-shadow-focus);
}

.rr-switch-input:checked {
  background-color: var(--rr-primary-500);
}

.rr-switch-input:checked::after {
  transform: translateX(1.25rem);
}

.rr-switch-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.rr-switch-label {
  color: var(--rr-gray-900);
  font-size: var(--rr-font-size-base);
  cursor: pointer;
}

.rr-switch-input:disabled + .rr-switch-label {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================================
 * MultiSelectDropdown - Multi-select dropdown (extends Dropdown)
 * ========================================================================== */

.rr-multiselectdropdown {
  position: relative;
  display: inline-block;
  width: 100%;
}

.rr-multiselectdropdown-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--rr-input-padding-y-base) var(--rr-input-padding-x-base);
  background-color: white;
  border: var(--rr-border-width) solid var(--rr-gray-300);
  border-radius: var(--rr-radius-md);
  cursor: pointer;
  transition: border-color var(--rr-transition-fast),
              box-shadow var(--rr-transition-fast);
}

.rr-multiselectdropdown-trigger:hover:not(:disabled) {
  border-color: var(--rr-primary-500);
}

.rr-multiselectdropdown-trigger:focus {
  outline: none;
  border-color: var(--rr-primary-500);
  box-shadow: var(--rr-shadow-focus);
}

.rr-multiselectdropdown-values {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rr-spacing-1);
  flex: 1;
}

.rr-multiselectdropdown-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--rr-spacing-1);
  padding: var(--rr-spacing-1) var(--rr-spacing-2);
  background-color: var(--rr-primary-100);
  color: var(--rr-primary-700);
  border-radius: var(--rr-radius-base);
  font-size: var(--rr-font-size-sm);
}

.rr-multiselectdropdown-chip-remove {
  cursor: pointer;
  padding: var(--rr-spacing-0-5);
  border-radius: var(--rr-radius-base);
  transition: background-color var(--rr-transition-fast);
}

.rr-multiselectdropdown-chip-remove:hover {
  background-color: var(--rr-primary-200);
}

.rr-multiselectdropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: var(--rr-spacing-2);
  background-color: white;
  border: var(--rr-border-width) solid var(--rr-gray-300);
  border-radius: var(--rr-radius-md);
  box-shadow: var(--rr-shadow-lg);
  max-height: 20rem;
  overflow-y: auto;
  z-index: var(--rr-z-index-dropdown);
}

.rr-multiselectdropdown-option {
  display: flex;
  align-items: center;
  gap: var(--rr-spacing-2);
  padding: var(--rr-spacing-2) var(--rr-spacing-3);
  cursor: pointer;
  transition: background-color var(--rr-transition-fast);
}

.rr-multiselectdropdown-option:hover {
  background-color: var(--rr-gray-100);
}

.rr-multiselectdropdown-option-selected {
  background-color: var(--rr-primary-50);
  color: var(--rr-primary-700);
}

/* ============================================================================
 * MultiSelectListbox - Multi-select listbox (extends ListBox)
 * ========================================================================== */

.rr-multiselectlistbox {
  width: 100%;
  border: var(--rr-border-width) solid var(--rr-gray-300);
  border-radius: var(--rr-radius-md);
  background-color: white;
}

.rr-multiselectlistbox-header {
  padding: var(--rr-spacing-3);
  border-bottom: var(--rr-border-width) solid var(--rr-gray-200);
}

.rr-multiselectlistbox-filter {
  width: 100%;
  padding: var(--rr-spacing-2);
  border: var(--rr-border-width) solid var(--rr-gray-300);
  border-radius: var(--rr-radius-base);
}

.rr-multiselectlistbox-list {
  max-height: 20rem;
  overflow-y: auto;
  padding: var(--rr-spacing-2);
}

.rr-multiselectlistbox-option {
  display: flex;
  align-items: center;
  gap: var(--rr-spacing-2);
  padding: var(--rr-spacing-2) var(--rr-spacing-3);
  cursor: pointer;
  border-radius: var(--rr-radius-base);
  transition: background-color var(--rr-transition-fast);
}

.rr-multiselectlistbox-option:hover {
  background-color: var(--rr-gray-100);
}

.rr-multiselectlistbox-option-selected {
  background-color: var(--rr-primary-50);
  color: var(--rr-primary-700);
}

.rr-multiselectlistbox-option-checkbox {
  width: 1rem;
  height: 1rem;
}