/* Hotwire Combobox Component Styles */

/* Ensure the combobox wrapper allows overflow */
.hw-combobox {
  position: relative;
  width: 100%;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Main wrapper - relative positioned for the handle */
.hw-combobox__main__wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Listbox dropdown - must appear above all other content */
.hw-combobox__listbox {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99999 !important;
  max-height: 350px;
  overflow-y: auto;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  margin-top: 0.375rem;
  padding: 0.25rem 0;
}

/* Input styling - matches search field - use !important to override gem defaults */
.hw-combobox__input {
  display: block !important;
  width: 100% !important;
  padding: 0.625rem 2.5rem 0.625rem 0.75rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  color: #111827 !important;
  background-color: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 0.75rem !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}

.hw-combobox__input:focus {
  outline: none;
  border-color: #E86B4A;
  box-shadow: 0 0 0 2px rgba(232, 107, 74, 0.2);
}

.hw-combobox__input::placeholder {
  color: #9ca3af;
}

/* Slim/compact variant - reduced height for filter bars */
.hw-combobox--slim .hw-combobox__input,
.hw-combobox.hw-combobox--slim .hw-combobox__input {
  padding: 0.5rem 2.25rem 0.5rem 0.625rem !important;
  font-size: 0.8125rem !important;
}

.hw-combobox--slim .hw-combobox__handle {
  right: 0.5rem !important;
  width: 1rem;
  height: 1rem;
}

.hw-combobox--slim .hw-combobox__option {
  padding: 0.375rem 0.625rem;
  font-size: 0.8125rem;
}

/* Handle (dropdown arrow) - positioned inside the input box */
.hw-combobox__handle {
  position: absolute !important;
  right: 0.75rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: auto;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 10;
}

/* Ensure proper positioning context for handle */
.hw-combobox,
.hw-combobox fieldset,
.hw-combobox__main__wrapper {
  position: relative !important;
}

/* Ensure fieldset takes full width and has no visual styling */
.hw-combobox fieldset {
  width: 100% !important;
  min-width: 0;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Force combobox container to be full width in forms */
.w-full .hw-combobox,
.w-full > .hw-combobox,
form .hw-combobox {
  width: 100% !important;
  display: block !important;
}

/* Ensure all nested elements expand */
.w-full .hw-combobox > *,
form .hw-combobox fieldset,
form .hw-combobox .hw-combobox__main__wrapper {
  width: 100% !important;
}

/* Option styling */
.hw-combobox__option {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: #374151;
  cursor: pointer;
  transition: background-color 0.1s ease;
}

.hw-combobox__option:hover {
  background-color: #f3f4f6;
}

.hw-combobox__option--selected {
  background-color: #fef2f2;
  color: #E86B4A;
  font-weight: 500;
}

.hw-combobox__option--selected:hover {
  background-color: #fee2e2;
}

/* Highlighted option (keyboard navigation) */
.hw-combobox__option[aria-selected="true"] {
  background-color: #fef2f2;
  color: #E86B4A;
}

/* Dialog styles for mobile */
.hw-combobox__dialog {
  position: fixed;
  z-index: 999999 !important;
  background: white;
  border: none;
  border-radius: 0.75rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  padding: 0;
  max-width: 90vw;
  max-height: 80vh;
}

.hw-combobox__dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

.hw-combobox__dialog__input {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: none;
  border-bottom: 1px solid #e5e7eb;
  outline: none;
}

.hw-combobox__dialog__listbox {
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.5rem 0;
}

/* Dialog wrapper should be invisible when not open */
.hw-combobox__dialog__wrapper {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Remove any default browser styling on combobox elements */
.hw-combobox,
.hw-combobox fieldset,
.hw-combobox__main__wrapper,
.hw-combobox__dialog__wrapper {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

/* =================================================
   CRITICAL: Override parent overflow to show dropdown
   ================================================= */

/* When combobox is expanded, allow overflow on all parent containers */
.hw-combobox[data-hw-combobox-expanded-value="true"] {
  z-index: 9999;
}

/* Override overflow:hidden on common parent containers when combobox is open */
.card-dashboard:has(.hw-combobox[data-hw-combobox-expanded-value="true"]),
.stat-card-premium:has(.hw-combobox[data-hw-combobox-expanded-value="true"]),
.list-container-premium:has(.hw-combobox[data-hw-combobox-expanded-value="true"]),
.filter-bar-premium:has(.hw-combobox[data-hw-combobox-expanded-value="true"]),
.revenue-widget:has(.hw-combobox[data-hw-combobox-expanded-value="true"]),
.quick-action-card:has(.hw-combobox[data-hw-combobox-expanded-value="true"]),
div:has(> .hw-combobox[data-hw-combobox-expanded-value="true"]),
form:has(.hw-combobox[data-hw-combobox-expanded-value="true"]) {
  overflow: visible !important;
}

/* Also handle the parent divs of the combobox */
.hw-combobox[data-hw-combobox-expanded-value="true"],
.hw-combobox[data-hw-combobox-expanded-value="true"] * {
  overflow: visible !important;
}

/* Ensure the wrapper divs also allow overflow */
div:has(> fieldset.hw-combobox[data-hw-combobox-expanded-value="true"]) {
  overflow: visible !important;
  position: relative;
  z-index: 9999;
}

/* For nested containers up to 3 levels */
*:has(> *:has(> .hw-combobox[data-hw-combobox-expanded-value="true"])) {
  overflow: visible !important;
}

/* Force the listbox to be on top of everything */
.hw-combobox__listbox {
  isolation: isolate;
}

/* Alternative approach using portal-like positioning for deeply nested comboboxes */
.hw-combobox[data-hw-combobox-expanded-value="true"] .hw-combobox__main__wrapper {
  position: relative;
  z-index: 99999;
}

.hw-combobox[data-hw-combobox-expanded-value="true"] .hw-combobox__listbox {
  position: absolute;
  z-index: 99999 !important;
}