/* Dropdown utilities */
.dropdown-surface {
  @apply absolute w-full rounded-md shadow-lg z-50;
  background-color: var(--surface-base);
  border: 1px solid var(--border-base);
}

.dropdown-header {
  @apply px-3 py-2 border-b;
  border-color: var(--border-base);
  background-color: var(--surface-secondary);
}

.dropdown-header-title {
  @apply text-xs font-medium;
  color: var(--text-muted);
}

.dropdown-section-header {
  @apply px-3 py-1.5 text-xs font-semibold;
  color: var(--text-muted);
  background-color: var(--surface-secondary);
}

.dropdown-content {
  @apply overflow-y-auto;
}

.dropdown-item {
  @apply cursor-pointer px-3 py-2 transition-colors;
  color: var(--text-primary);
}

.dropdown-item:hover {
  background-color: var(--surface-hover);
}

.dropdown-item-highlight {
  background-color: var(--dropdown-highlight-bg);
  color: var(--dropdown-highlight-text);
}

.dropdown-empty {
  @apply px-3 py-4 text-center text-sm;
  color: var(--text-muted);
}

.dropdown-loading {
  @apply p-4 text-center text-sm;
  color: var(--text-muted);
}

.dropdown-footer {
  @apply border-t px-3 py-2 text-xs;
  border-color: var(--border-base);
  color: var(--text-muted);
}

.dropdown-badge {
  @apply rounded px-1.5 py-0.5 text-xs font-normal;
  background-color: var(--accent-primary);
  color: var(--text-inverted);
}

.dropdown-icon {
  @apply flex-shrink-0;
  color: var(--text-muted);
}

.dropdown-icon-accent {
  color: var(--accent-primary);
}