/* ==========================================================================
   Filterable Select — Generic dropdown with search filtering
   Content-agnostic: works with any server-rendered option markup.
   ========================================================================== */

/* Wrapper */
.filterable-select {
  position: relative;
}

/* Trigger — matches standard form input styling */
.filterable-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--parchment);
  border-radius: var(--border-radius);
  padding: var(--space-sm);
  font: inherit;
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--ink-dark);
  transition: border-color var(--transition-base), background var(--transition-base);
}

.filterable-select-trigger:focus {
  outline: none;
  border-color: var(--parchment-dark);
  background: rgba(255, 255, 255, 0.95);
}

.filterable-select-trigger::after {
  content: "\25BE"; /* down-pointing triangle */
  margin-left: var(--space-xs);
  color: var(--ink-light);
  flex-shrink: 0;
}

.filterable-select-trigger--placeholder {
  color: var(--ink-light);
}

/* Trigger content — allows rich HTML (icons + text) inside trigger */
.filterable-select-trigger-content {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
  overflow: hidden;
}

/* Search input — same position as trigger, swaps in when open */
.filterable-select-search {
  display: block;
  width: 100%;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--parchment-dark);
  border-radius: var(--border-radius);
  padding: var(--space-sm);
  font: inherit;
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  outline: none;
  box-sizing: border-box;
}

.filterable-select-search:focus {
  background: rgba(255, 255, 255, 0.95);
}

.filterable-select-search::placeholder {
  color: var(--ink-light);
}

/* Panel — flows in document so scrollable parents accommodate it naturally */
.filterable-select-panel {
  margin-top: var(--space-2xs);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--parchment);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-card-elevated);
  max-height: 240px;
  overflow-y: auto;
}

/* Group heading */
.filterable-select-group-heading {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-accent);
  padding: var(--space-xs) var(--space-sm);
  color: var(--ink-light);
  background: var(--paper-texture);
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Option — base style */
.filterable-select-option {
  padding: var(--space-sm);
  cursor: pointer;
}

.filterable-select-option:hover,
.filterable-select-option.selected {
  background: var(--paper-texture);
}

/* Empty/none option */
.filterable-select-option--none {
  color: var(--ink-light);
  font-style: italic;
}

/* Excluded options (hidden by external controllers) */
.filterable-select-excluded {
  display: none !important;
}

/* ==========================================================================
   Idea Picker Option — idea-specific styling for filterable-select options
   ========================================================================== */

.idea-picker-option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--ink-medium);
}

.idea-picker-option-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}

.idea-picker-option-emoji {
  flex-shrink: 0;
  font-size: var(--font-size-sm);
  line-height: 1;
}

/* ==========================================================================
   Project Picker — shared dropdown for ideas + commitments
   ========================================================================== */

.project-picker-option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--ink-medium);
}

.project-picker-option-emoji {
  flex-shrink: 0;
  font-size: var(--font-size-sm);
  line-height: 1;
}

.project-picker-section-header {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--ink-light);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-accent);
  border-bottom: 1px solid var(--parchment);
}