/* MultiSelect Component Styles */
/* Dedicated styles for components/ui/select/multiselect.py */

.custom-multiselect.mantine-InputWrapper-root.mantine-MultiSelect-root {
  width: 100% !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--app-radius, 8px) !important;
  background: hsl(var(--background)) !important;
  box-sizing: border-box !important;
  min-height: 36px !important;
  max-height: 140px !important;
  overflow: visible !important;
  padding: 0px !important;
}

.custom-multiselect.mantine-InputWrapper-root.mantine-MultiSelect-root:focus-within {
  outline: 2px solid var(--focus-ring-strong) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* Inner wrappers stay neutral so only outer root owns border/focus */
.custom-multiselect .mantine-MultiSelect-wrapper,
.custom-multiselect .mantine-PillsInput-root,
.custom-multiselect .mantine-PillsInput-field,
.custom-multiselect .mantine-PillsInput-input,
.custom-multiselect .mantine-MultiSelect-inputField,
.custom-multiselect .mantine-Input-wrapper,
.custom-multiselect .mantine-Input-input,
.custom-multiselect input[type="text"] {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Let content wrap so height grows naturally before max-height scroll */
.custom-multiselect .mantine-MultiSelect-wrapper,
.custom-multiselect .mantine-PillsInput-root {
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  padding: 0 !important;
}

.custom-multiselect .mantine-MultiSelect-input {
  padding: 4px 12px !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: 140px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.custom-multiselect .mantine-PillsInput-field,
.custom-multiselect .mantine-MultiSelect-values {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  gap: 4px !important;
  min-height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Pills list should not add extra vertical space beyond row content */
.custom-multiselect .mantine-MultiSelect-pillsList,
.custom-multiselect .mantine-PillGroup-group {
  margin: 0 !important;
  padding: 0 !important;
}

.custom-multiselect .mantine-PillsInput-input,
.custom-multiselect .mantine-MultiSelect-inputField {
  min-height: 28px !important;
  height: 28px !important;
  line-height: 28px !important;
  flex: 1 0 120px !important;
}

.custom-multiselect .mantine-PillsInput-root:focus-within,
.custom-multiselect .mantine-PillsInput-field:focus-within,
.custom-multiselect .mantine-PillsInput-input:focus,
.custom-multiselect .mantine-PillsInput-input:focus-visible,
.custom-multiselect .mantine-MultiSelect-inputField:focus,
.custom-multiselect .mantine-MultiSelect-inputField:focus-visible,
.custom-multiselect input[type="text"]:focus,
.custom-multiselect input[type="text"]:focus-visible {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.custom-multiselect .mantine-MultiSelect-clearButton {
  display: none !important;
}