/* Select Component Styles */
/* Styled to match combobox UI with glass morphism */
/* Note: .data-entry-select class is used for scoping, but generic styles are also provided */

.data-entry-select {
  width: 100%;
}

/* Generic MultiSelect styles - work without .data-entry-select class */
.mantine-MultiSelect-wrapper {
  width: 100% !important;
}

/* Generic MultiSelect input override for global.css focus-visible styles */
.mantine-MultiSelect-input:focus-visible,
.mantine-MultiSelect-inputField:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Generic MultiSelect wrapper focus-within matching global.css focus styles */
.mantine-MultiSelect-wrapper:focus-within {
  outline: 2px solid hsl(var(--foreground)) !important;
  outline-offset: 2px !important;
  border-radius: 6px !important;
}

/* Generic clear button hiding */
.mantine-MultiSelect-clearButton {
  display: none !important;
}

/* MultiSelect root container - fill parent and remove double borders */
.data-entry-select.mantine-MultiSelect-root {
  width: 100% !important;
}

/* Input field styling - wider */
.data-entry-select .mantine-Select-input,
.data-entry-select input[type="text"] {
  width: 100% !important;
  height: 36px !important; /* Match Input height (h-9) */
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 4px 12px !important; /* Match Input padding (py-1 px-3) */
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid hsl(var(--border)) !important;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  transition: all 0.2s ease;
  box-sizing: border-box;
}

/* Override Mantine default focus styles - prevent orange borders */
.data-entry-select .mantine-Select-input:focus,
.data-entry-select .mantine-Select-input:focus-within,
.data-entry-select .mantine-Select-input[data-focused="true"],
.mantine-Select-input:focus,
.mantine-Select-input:focus-within,
.mantine-Select-input[data-focused="true"] {
  border-color: hsl(var(--border)) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* MultiSelect input - remove border and height restrictions, let wrapper handle it */
/* Override global.css focus-visible styles for MultiSelect inputs */
.data-entry-select .mantine-MultiSelect-input,
.data-entry-select .mantine-MultiSelect-input:focus-visible,
.data-entry-select .mantine-MultiSelect-inputField,
.data-entry-select .mantine-MultiSelect-inputField:focus-visible {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 8px !important;
  height: 32px !important;
  min-height: 32px !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  line-height: 32px !important;
  flex-shrink: 0 !important;
}

/* MultiSelect wrapper - 36px when empty, expands with wrapped content */
.data-entry-select .mantine-MultiSelect-wrapper {
  width: 100% !important;
  min-height: 36px !important;
  max-height: 120px !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 6px !important;
  background-color: hsl(var(--background)) !important;
  padding: 2px 4px !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  gap: 4px !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

/* Force wrapper to expand based on content height */
.data-entry-select .mantine-MultiSelect-wrapper > * {
  flex-shrink: 0;
}

/* Webkit scrollbar for MultiSelect wrapper */
.data-entry-select .mantine-MultiSelect-wrapper::-webkit-scrollbar {
  width: 6px;
}

.data-entry-select .mantine-MultiSelect-wrapper::-webkit-scrollbar-track {
  background: transparent;
  margin: 2px;
}

.data-entry-select .mantine-MultiSelect-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}

.data-entry-select .mantine-MultiSelect-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

/* Apply focus-within styles matching global.css focus-visible styles */
.data-entry-select .mantine-MultiSelect-wrapper:focus-within {
  outline: 2px solid hsl(var(--foreground)) !important;
  outline-offset: 2px !important;
  border-radius: 6px !important;
  border-color: hsl(var(--border)) !important;
  box-shadow: none !important;
}

/* Override Mantine default focus styles - prevent orange borders on all Mantine Select/MultiSelect components */
/* Note: We keep the outline from focus-within/focus-visible, only override border colors */
.data-entry-select .mantine-MultiSelect-wrapper:focus,
.data-entry-select .mantine-MultiSelect-wrapper[data-focused="true"],
.data-entry-select .mantine-Select-input:focus,
.data-entry-select .mantine-Select-input[data-focused="true"],
.data-entry-select .mantine-Select-root:focus,
.data-entry-select .mantine-Select-root[data-focused="true"],
.mantine-MultiSelect-wrapper:focus,
.mantine-MultiSelect-wrapper[data-focused="true"],
.mantine-Select-input:focus,
.mantine-Select-input[data-focused="true"],
.mantine-Select-root:focus,
.mantine-Select-root[data-focused="true"] {
  border-color: hsl(var(--border)) !important;
  box-shadow: none !important;
}

.data-entry-select .mantine-MultiSelect-wrapper:hover:not(:disabled) {
  border-color: hsl(var(--accent)) !important;
}

.data-entry-select .mantine-MultiSelect-pill {
  border-radius: 6px !important;
}

/* Placeholder styling - match Input component */
.data-entry-select .mantine-Select-input::placeholder,
.data-entry-select .mantine-MultiSelect-input::placeholder,
.data-entry-select input[type="text"]::placeholder {
  color: hsl(var(--muted)) !important;
}

.data-entry-select .mantine-Select-input:focus,
.data-entry-select input[type="text"]:focus {
  border-color: hsl(var(--border));
  box-shadow: none;
}

/* Allow focus-visible outline from global.css to show */
.data-entry-select .mantine-Select-input:focus-visible,
.data-entry-select input[type="text"]:focus-visible {
  outline: 2px solid hsl(var(--foreground)) !important;
  outline-offset: 2px !important;
  border-color: hsl(var(--border));
  box-shadow: none;
}

/* MultiSelect input focus is handled by wrapper - override global.css */
.data-entry-select .mantine-MultiSelect-input:focus,
.data-entry-select .mantine-MultiSelect-input:focus-visible {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.data-entry-select .mantine-Select-input:hover:not(:disabled),
.data-entry-select input[type="text"]:hover:not(:disabled) {
  border-color: hsl(var(--accent));
}

/* MultiSelect input hover is handled by wrapper */
.data-entry-select .mantine-MultiSelect-input:hover:not(:disabled) {
  border: none !important;
}

/* Dropdown menu - glass morphism styling (matching navbar exactly) */
/* Target dropdown portal directly - Mantine renders dropdowns in portals outside component tree */
/* Use multiple selectors to ensure we catch the dropdown regardless of how it's rendered */
/* Global selectors for portal-rendered dropdowns */
div[class*="mantine-Select-dropdown"],
div[class*="mantine-Popover-dropdown"],
div[class*="mantine-Select-root"] ~ div[class*="mantine-Popover"],
.mantine-Select-dropdown,
.mantine-Popover-dropdown,
.mantine-Popover-dropdown[data-mantine-stop-propagation],
[data-mantine-select-dropdown],
[data-mantine-popover-dropdown],
body > div[class*="mantine-Select-dropdown"],
body > div[class*="mantine-Popover-dropdown"] {
  /* Glass morphism effect - matching navbar exactly */
  will-change: backdrop-filter !important;
  transform: translateZ(0) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  background: rgba(255, 255, 255, 0.85) !important;
  background-color: rgba(255, 255, 255, 0.85) !important;
  
  /* Border styling - matching navbar exactly */
  border-top: 1px solid rgba(0, 0, 0, 0.3) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.2) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-left: 1px solid rgba(0, 0, 0, 0.2) !important;
  border-style: solid !important;
  border-radius: 6px;
  
  /* Shadow - matching navbar exactly */
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1), inset 0 1px 1px 0 rgba(255, 255, 255, 0.1) !important;
  
  /* Padding - internal padding for dropdown content */
  padding: 4px !important;
  
  /* Width - wider to match trigger */
  max-width: 100%;
  margin: 0 !important;
  
  /* Fixed height so dropdown doesn't inherit 100% from body/parent */
  height: auto !important;
  max-height: min(320px, 60vh) !important;
  
  /* Overflow handling */
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Target the inner scrollable div within dropdown */
div[class*="mantine-Select-dropdown"] > div,
div[class*="mantine-Popover-dropdown"] > div,
.mantine-Select-dropdown > div,
.mantine-Popover-dropdown > div {
  height: auto !important;
  max-height: 260px !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  
  /* Custom scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

/* Webkit scrollbar styling */
div[class*="mantine-Select-dropdown"] > div::-webkit-scrollbar,
div[class*="mantine-Popover-dropdown"] > div::-webkit-scrollbar,
.mantine-Select-dropdown > div::-webkit-scrollbar,
.mantine-Popover-dropdown > div::-webkit-scrollbar {
  width: 8px;
}

div[class*="mantine-Select-dropdown"] > div::-webkit-scrollbar-track,
div[class*="mantine-Popover-dropdown"] > div::-webkit-scrollbar-track,
.mantine-Select-dropdown > div::-webkit-scrollbar-track,
.mantine-Popover-dropdown > div::-webkit-scrollbar-track {
  background: transparent;
  margin: 4px;
}

div[class*="mantine-Select-dropdown"] > div::-webkit-scrollbar-thumb,
div[class*="mantine-Popover-dropdown"] > div::-webkit-scrollbar-thumb,
.mantine-Select-dropdown > div::-webkit-scrollbar-thumb,
.mantine-Popover-dropdown > div::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

div[class*="mantine-Select-dropdown"] > div::-webkit-scrollbar-thumb:hover,
div[class*="mantine-Popover-dropdown"] > div::-webkit-scrollbar-thumb:hover,
.mantine-Select-dropdown > div::-webkit-scrollbar-thumb:hover,
.mantine-Popover-dropdown > div::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

/* Dropdown items - global selectors for portal-rendered items */
div[class*="mantine-Select-dropdown"] .mantine-Select-item,
div[class*="mantine-Popover-dropdown"] .mantine-Select-item,
.mantine-Select-dropdown .mantine-Select-item,
.mantine-Popover-dropdown .mantine-Select-item,
.data-entry-select .mantine-Select-item,
[data-mantine-select-dropdown] .mantine-Select-item {
  padding: 8px 12px !important;
  margin: 0 4px 4px 4px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease !important;
  color: hsl(var(--foreground)) !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
  width: calc(100% - 8px) !important;
  max-width: calc(100% - 8px) !important;
}

/* First item in dropdown */
div[class*="mantine-Select-dropdown"] .mantine-Select-item:first-child,
div[class*="mantine-Popover-dropdown"] .mantine-Select-item:first-child,
.mantine-Select-dropdown .mantine-Select-item:first-child,
.mantine-Popover-dropdown .mantine-Select-item:first-child {
  margin-top: 4px !important;
}

/* Last item in dropdown */
div[class*="mantine-Select-dropdown"] .mantine-Select-item:last-child,
div[class*="mantine-Popover-dropdown"] .mantine-Select-item:last-child,
.mantine-Select-dropdown .mantine-Select-item:last-child,
.mantine-Popover-dropdown .mantine-Select-item:last-child {
  margin-bottom: 4px !important;
}

div[class*="mantine-Select-dropdown"] .mantine-Select-item:hover,
div[class*="mantine-Popover-dropdown"] .mantine-Select-item:hover,
.mantine-Select-dropdown .mantine-Select-item:hover,
.mantine-Popover-dropdown .mantine-Select-item:hover,
.data-entry-select .mantine-Select-item:hover {
  background-color: hsl(var(--accent) / 0.5);
  color: hsl(var(--accent-foreground));
}

div[class*="mantine-Select-dropdown"] .mantine-Select-item[data-selected],
div[class*="mantine-Popover-dropdown"] .mantine-Select-item[data-selected],
.mantine-Select-dropdown .mantine-Select-item[data-selected],
.mantine-Popover-dropdown .mantine-Select-item[data-selected],
.data-entry-select .mantine-Select-item[data-selected] {
  background-color: hsl(var(--accent-brand) / 0.1);
  color: hsl(var(--accent-brand));
  font-weight: 500;
}

/* Keyboard navigation focus - override when data-selected is also present */
div[class*="mantine-Select-dropdown"] .mantine-Select-item[data-selected][data-hovered],
div[class*="mantine-Popover-dropdown"] .mantine-Select-item[data-selected][data-hovered],
.mantine-Select-dropdown .mantine-Select-item[data-selected][data-hovered],
.mantine-Popover-dropdown .mantine-Select-item[data-selected][data-hovered],
.data-entry-select .mantine-Select-item[data-selected][data-hovered],
/* Also target with :where() pseudo-class if Mantine uses it */
div[class*="mantine-Select-dropdown"] .mantine-Select-item:where([data-selected]),
div[class*="mantine-Popover-dropdown"] .mantine-Select-item:where([data-selected]),
.mantine-Select-dropdown .mantine-Select-item:where([data-selected]),
.mantine-Popover-dropdown .mantine-Select-item:where([data-selected]) {
  background-color: hsl(var(--accent-brand) / 0.1) !important;
  background: hsl(var(--accent-brand) / 0.1) !important;
  color: hsl(var(--accent-brand)) !important;
}

/* Keyboard navigation focus - override Mantine's default blue with accent-brand (orange) */
/* Target all possible hovered states for keyboard navigation */
div[class*="mantine-Select-dropdown"] .mantine-Select-item[data-hovered],
div[class*="mantine-Popover-dropdown"] .mantine-Select-item[data-hovered],
.mantine-Select-dropdown .mantine-Select-item[data-hovered],
.mantine-Popover-dropdown .mantine-Select-item[data-hovered],
.data-entry-select .mantine-Select-item[data-hovered],
div[class*="mantine-Select-dropdown"] .mantine-Select-item[data-hovered="true"],
div[class*="mantine-Popover-dropdown"] .mantine-Select-item[data-hovered="true"],
.mantine-Select-dropdown .mantine-Select-item[data-hovered="true"],
.mantine-Popover-dropdown .mantine-Select-item[data-hovered="true"],
.data-entry-select .mantine-Select-item[data-hovered="true"],
/* Also target any Mantine default classes that might apply blue */
div[class*="mantine-Select-dropdown"] .mantine-Select-item[data-hovered].mantine-Select-item,
div[class*="mantine-Popover-dropdown"] .mantine-Select-item[data-hovered].mantine-Select-item,
.mantine-Select-dropdown .mantine-Select-item[data-hovered].mantine-Select-item,
.mantine-Popover-dropdown .mantine-Select-item[data-hovered].mantine-Select-item {
  background-color: hsl(var(--accent-brand) / 0.1) !important;
  background: hsl(var(--accent-brand) / 0.1) !important;
  color: hsl(var(--accent-brand)) !important;
  border-color: transparent !important;
}

/* Search input inside dropdown - global selectors */
div[class*="mantine-Select-dropdown"] .mantine-Select-searchInput,
div[class*="mantine-Popover-dropdown"] .mantine-Select-searchInput,
.mantine-Select-dropdown .mantine-Select-searchInput,
.mantine-Popover-dropdown .mantine-Select-searchInput,
.data-entry-select .mantine-Select-searchInput,
[data-mantine-select-dropdown] input[type="search"],
[data-mantine-select-dropdown] input[type="text"] {
  padding: 8px 12px !important;
  font-size: 14px !important;
  border: none !important;
  background-color: transparent !important;
  color: hsl(var(--foreground)) !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
  margin-bottom: 4px !important;
}

div[class*="mantine-Select-dropdown"] .mantine-Select-searchInput:focus,
div[class*="mantine-Popover-dropdown"] .mantine-Select-searchInput:focus,
.mantine-Select-dropdown .mantine-Select-searchInput:focus,
.mantine-Popover-dropdown .mantine-Select-searchInput:focus,
.data-entry-select .mantine-Select-searchInput:focus {
  outline: none !important;
  border-bottom-color: hsl(var(--border)) !important;
}

div[class*="mantine-Select-dropdown"] .mantine-Select-searchInput::placeholder,
div[class*="mantine-Popover-dropdown"] .mantine-Select-searchInput::placeholder,
.mantine-Select-dropdown .mantine-Select-searchInput::placeholder,
.mantine-Popover-dropdown .mantine-Select-searchInput::placeholder,
.data-entry-select .mantine-Select-searchInput::placeholder {
  color: hsl(var(--muted-foreground)) !important;
}

/* Right section (chevron icon) */
.data-entry-select .mantine-Select-rightSection,
.data-entry-select .mantine-MultiSelect-rightSection {
  pointer-events: none;
  color: hsl(var(--muted-foreground));
}

/* Hide clear button for MultiSelect */
.data-entry-select .mantine-MultiSelect-clearButton {
  display: none !important;
}

/* Empty state */
.data-entry-select .mantine-Select-nothingFound,
.data-entry-select .mantine-MultiSelect-nothingFound {
  padding: 12px;
  text-align: center;
  color: hsl(var(--muted-foreground));
  font-size: 14px;
}

/* MultiSelect specific styling - ensure consistent appearance */
.data-entry-select .mantine-MultiSelect-values {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  width: 100% !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  min-height: 32px !important;
}

/* MultiSelect input container - ensure it doesn't create extra borders */
.data-entry-select .mantine-MultiSelect-inputWrapper {
  border: none !important;
  background: transparent !important;
  flex: 1 !important;
  min-width: 60px !important;
}

/* Ensure no other MultiSelect elements create borders */
.data-entry-select .mantine-MultiSelect-root {
  border: none !important;
}

.data-entry-select .mantine-MultiSelect-input:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.data-entry-select .mantine-MultiSelect-value {
  background-color: hsl(var(--accent-brand) / 0.1);
  color: hsl(var(--accent-brand));
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
}

.data-entry-select .mantine-MultiSelect-valueRemove {
  color: hsl(var(--accent-brand));
}