{# tag_me/templates/tag_me/tag_me_select.html #}
{% comment %}
  REFACTORED: Shared structure with conditional search bar actions
  Breakpoint: md: (768px)
  - Desktop (>= 768px): Inline action buttons
  - Mobile (< 768px): Context-aware action button
  
  Only the search bar action area is different between mobile/desktop.
  Everything else is shared with responsive Tailwind classes.
{% endcomment %}
<style>
/* Custom Scrollbar Styles - Light and Dark Mode */
.menu-scrollable::-webkit-scrollbar {
  width: 0.5rem;
}
.menu-scrollable::-webkit-scrollbar-track {
  background-color: oklch(0.91 0.00 286); /* border-base light */
  border-radius: 9999px;
}
.menu-scrollable::-webkit-scrollbar-thumb {
  background-color: oklch(0.61 0.01 258); /* text-muted */
  border-radius: 9999px;
}
.menu-scrollable::-webkit-scrollbar-thumb:hover {
  background-color: oklch(0.53 0.02 258); /* text-secondary */
}

.dark .menu-scrollable::-webkit-scrollbar-track {
  background-color: oklch(0.36 0.01 259); /* border-base dark */
}
.dark .menu-scrollable::-webkit-scrollbar-thumb {
  background-color: oklch(0.53 0.02 258); /* text-secondary dark - from placeholder */
}
.dark .menu-scrollable::-webkit-scrollbar-thumb:hover {
  background-color: oklch(0.69 0.00 264); /* text-muted dark */
}

/* Screen Reader Only - for accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Swipe Gesture Styles */
.swipe-item {
  position: relative;
  touch-action: pan-y;
  transition: transform 0.2s ease-out;
}

.swipe-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease-out;
}

.swipe-item.swipe-unselected.swipe-active::before {
  background-color: oklch(0.61 0.20 266 / 0.3); /* primary-base with 30% opacity */
  opacity: 1;
}

.swipe-item.swipe-selected.swipe-active::before {
  background-color: oklch(0.91 0.00 286 / 0.4); /* border-base with 40% opacity */
  opacity: 1;
}

.dark .swipe-item.swipe-selected.swipe-active::before {
  background-color: oklch(0.53 0.02 258 / 0.4); /* text-secondary dark with 40% opacity */
}
</style>
<!-- Main Container -->
<div id='tag-me-select-container-{{ name }}'
     x-data="alpineTagMeMultiSelect({ addTagURL: '{{ add_tag_url }}', permittedToAddTags: {{ permitted_to_add_tags }}, allowMultiple: {{ multiple|yesno:'true,false' }}, autoSelectNewTags: {{ auto_select_new_tags|yesno:'true,false' }}, displayNumberSelected: {{ display_number_selected }}, choices: {{ choices|safe }}, selected: {{ values|safe }}, helpUrl: 'https://google.com ', mgmtUrl: 'https://google.com' })"
     x-on:click.outside="close()"
     x-on:keydown.escape="if(show) { $event.stopPropagation(); close(); }"
     x-id="['search-menu-dropdown']"
     role="combobox"
     aria-label="Tag selection combobox"
     aria-haspopup="listbox"
     :aria-expanded="show"
     :aria-describedby="$id('keyboard-instructions')"
     class="tm:w-full">
    <!-- Hidden Input for Form Submission -->
    <input type="hidden" name="{{ name }}" x-model="formValue">
    <!-- Aria-live region for screen reader announcements -->
    <div aria-live="polite"
         aria-atomic="true"
         class="sr-only"
         x-text="ariaAnnouncement"></div>
    <!-- Keyboard instructions for screen readers -->
    <div :id="$id('keyboard-instructions')" class="sr-only">
        Use arrow keys to navigate options. Press Enter to select. Press Escape to close. Press Backspace in empty search to clear all selections.
    </div>
    <!-- Widget Container -->
    <div id="tag-me-select-{{ name }}"
         class="tm:relative tm:w-full"
         x-ref="widgetContainer">
        <!-- Input-like Container (Closed State) - SHARED -->
        <div class="tm:relative tm:w-full">
            <div class="tm:block tm:w-full tm:md:h-[37px] tm:rounded-md tm:bg-bg-base tm:border-0 tm:shadow-sm tm:ring-1 tm:ring-inset tm:ring-border-base tm:transition-all tm:duration-200 tm:focus-within:ring-2 tm:focus-within:ring-border-focus"
                 :class="show ? 'tm:ring-2 tm:ring-border-focus' : ''">
                <!-- Selected Tags Display + Clickable Area -->
                <div class="tm:flex tm:items-center tm:py-2 tm:md:py-1.5 tm:pr-11 tm:md:pr-10 tm:pl-3 tm:cursor-pointer"
                     @click="toggle()">
                    <!-- Tags Container -->
                    <div class="tm:flex tm:flex-wrap tm:gap-2 tm:md:gap-2 tm:flex-1 tm:items-center">
                        <!-- Display Selected Tags (up to displayNumberSelected) -->
                        <template x-for="tagName in displayedSelected" :key="tagName">
                            <div class="tm:inline-flex tm:justify-center tm:items-center tm:font-medium tm:py-1.5 tm:px-3 tm:md:py-1 tm:md:px-2.5 tm:rounded-md tm:md:rounded-full tm:text-text-on-primary tm:bg-primary-base tm:shadow-sm tm:transition-all tm:duration-150 hover:tm:bg-primary-hover hover:tm:shadow-md hover:tm:scale-105"
                                 style="cursor: default"
                                 role="option"
                                 aria-selected="true"
                                 @click.stop
                                 x-transition:enter="transition ease-out duration-200"
                                 x-transition:enter-start="opacity-0 scale-90"
                                 x-transition:enter-end="opacity-100 scale-100"
                                 x-transition:leave="transition ease-in duration-150"
                                 x-transition:leave-start="opacity-100 scale-100"
                                 x-transition:leave-end="opacity-0 scale-90">
                                <div x-text="tagName"
                                     class="tm:text-xs tm:font-normal tm:leading-none tm:max-w-full tm:flex-initial tm:mr-1">
                                </div>
                                <button type="button"
                                        x-on:click.stop="removeTag(tagName)"
                                        class="tm:flex-shrink-0 tm:p-1 tm:md:p-0 tm:text-text-on-primary/80 tm:rounded tm:transition-all tm:duration-150 hover:tm:text-text-on-primary hover:tm:bg-text-on-primary/20 hover:tm:scale-110 tm:active:scale-95 tm:focus:outline-none tm:focus:ring-2 tm:focus:ring-text-on-primary tm:focus:ring-offset-2 tm:focus:ring-offset-primary-base"
                                        style="cursor: pointer"
                                        :aria-label="'Remove ' + tagName + ' tag'"
                                        :title="'Remove ' + tagName">
                                    <svg xmlns="http://www.w3.org/2000/svg"
                                         class="tm:h-4 tm:w-4 tm:md:h-3.5 tm:md:w-3.5"
                                         fill="none"
                                         viewBox="0 0 24 24"
                                         stroke="currentColor"
                                         stroke-width="2.5"
                                         aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
                                    </svg>
                                </button>
                            </div>
                        </template>
                        <!-- "More" Indicator -->
                        <div x-show="overflowCount > 0"
                             x-transition:enter="transition ease-out duration-200"
                             x-transition:enter-start="opacity-0 scale-90"
                             x-transition:enter-end="opacity-100 scale-100"
                             x-transition:leave="transition ease-in duration-150"
                             x-transition:leave-start="opacity-100 scale-100"
                             x-transition:leave-end="opacity-0 scale-90"
                             class="tm:inline-flex tm:justify-center tm:items-center tm:font-medium tm:py-1.5 tm:px-3 tm:md:py-1 tm:md:px-2.5 tm:rounded-md tm:md:rounded-full tm:text-text-on-primary tm:bg-primary-hover tm:shadow-sm">
                            <span class="tm:text-xs tm:font-normal tm:leading-none">
                                <span class="tm:inline-flex tm:px-1.5 tm:rounded tm:text-xs tm:font-normal tm:bg-text-on-primary/20 tm:text-text-on-primary tm:mr-1 tm:align-middle">
                                    +<span x-text="overflowCount"></span>
                                </span>
                                more
                            </span>
                        </div>
                        <!-- Placeholder Text -->
                        <span x-show="selectedTags.size === 0"
                              class="tm:flex-1 tm:text-sm tm:text-placeholder">Select tags...</span>
                    </div>
                </div>
                <!-- Dropdown Toggle Button (Always Visible) -->
                <button type="button"
                        x-on:click="toggle()"
                        class="tm:absolute tm:inset-y-0 tm:right-0 tm:flex tm:items-center tm:px-3 tm:md:px-2 tm:text-text-secondary hover:tm:text-text-primary tm:transition-colors tm:duration-150 tm:focus:outline-none tm:rounded-r-md"
                        :aria-expanded="show"
                        aria-controls="tag-me-select-{{ name }}"
                        aria-label="Toggle tag selection dropdown">
                    <svg viewBox="0 0 20 20"
                         fill="currentColor"
                         data-slot="icon"
                         aria-hidden="true"
                         class="tm:h-5 tm:w-5"
                         :style="show ? 'transform: rotate(180deg)' : 'transform: rotate(0deg)'">
                        <path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
                    </svg>
                </button>
            </div>
        </div>
        <!-- End Input-like Container -->
        <!-- Dropdown Container - SHARED -->
        <div x-show="show"
             x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="opacity-0 translate-y-1"
             x-transition:enter-end="opacity-100 translate-y-0"
             x-transition:leave="transition ease-in duration-100"
             x-transition:leave-start="opacity-100 translate-y-0"
             x-transition:leave-end="opacity-0 translate-y-1"
             x-cloak
             x-init=" const updatePosition = () => { if (!$refs.widgetContainer) { console.warn('tag-me-select: widgetContainer ref not found'); return; }  if ($el.dataset.positioned === 'true') { return; }  const isMobileView = window.innerWidth < 768;  if (isMobileView) { const rect = $refs.widgetContainer.getBoundingClientRect(); const viewportWidth = window.innerWidth; const margin = 8;  const spaceOnLeft = rect.left; const spaceOnRight = viewportWidth - rect.right;  if (spaceOnLeft > spaceOnRight) { $el.style.right = '0'; $el.style.left = 'auto'; $el.style.width = Math.min(viewportWidth - margin * 2, rect.right - margin) + 'px'; } else { $el.style.left = '0'; $el.style.right = 'auto'; $el.style.width = Math.min(viewportWidth - margin * 2, viewportWidth - rect.left - margin) + 'px'; } } else { $el.style.width = '100%'; $el.style.left = '0'; $el.style.right = '0'; }  $el.dataset.positioned = 'true'; };  $watch('show', value => { if (value) { $el.dataset.positioned = 'false'; setTimeout(updatePosition, 10); } }); "
             class="tm:absolute tm:z-dropdown tm:mt-2 tm:w-full tm:rounded-md tm:bg-bg-base tm:shadow-lg tm:border tm:border-border-base">
            <div class="tm:flex tm:flex-col tm:w-full">
                <!-- Search Section - SHARED -->
                <div class="tm:px-3 tm:py-3 tm:border-b tm:border-border-base">
                    <div class="tm:relative">
                        <!-- Search Icon -->
                        <div class="tm:absolute tm:inset-y-0 tm:left-0 tm:pl-3 tm:flex tm:items-center tm:pointer-events-none">
                            <svg xmlns="http://www.w3.org/2000/svg"
                                 class="tm:h-5 tm:w-5 tm:text-text-secondary"
                                 fill="none"
                                 viewBox="0 0 24 24"
                                 stroke="currentColor"
                                 stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                            </svg>
                        </div>
                        <!-- Search Input - SHARED -->
                        <input id="search-{{ name }}"
                               type="text"
                               name="search-{{ name }}"
                               autocomplete="off"
                               x-model.debounce.300ms="search"
                               @keydown.backspace="if($event.target.value === '') deselectAll()"
                               @keydown.arrow-down.prevent="navigateDown()"
                               @keydown.arrow-up.prevent="navigateUp()"
                               @keydown.enter.prevent="selectFocused()"
                               class="tm:block tm:w-full tm:rounded-md tm:bg-bg-raised tm:py-2.5 tm:md:py-2 tm:pr-16 tm:md:pr-12 tm:pl-10 tm:text-base tm:text-text-primary tm:outline-none tm:placeholder:text-placeholder tm:focus:bg-bg-base tm:focus:ring-2 tm:focus:ring-border-focus tm:transition-colors tm:duration-150 tm:sm:text-sm/6"
                               placeholder="Search tags..."
                               role="searchbox"
                               aria-label="Search available tags"
                               aria-autocomplete="list"
                               :aria-activedescendant="focusedTag ? 'tag-option-' + focusedTag : null"
                               :aria-controls="show ? 'tag-listbox-{{ name }}' : null"
                               :aria-expanded="show">
                        <!-- Search Bar Actions - ONLY DIFFERENT PART -->
                        <div class="tm:absolute tm:inset-y-0 tm:right-0 tm:flex tm:items-center tm:py-1.5 tm:pr-2 tm:md:pr-1.5">
                            <!-- Desktop: Inline action buttons -->
                            <div class="tm:hidden tm:md:block">{% include "tag_me/tag_me_select_search_bar_desktop.html" %}</div>
                            <!-- Mobile: Context-aware action button (will be built in Phase C) -->
                            <div class="tm:block tm:md:hidden">{% include "tag_me/tag_me_select_search_bar_mobile.html" %}</div>
                        </div>
                    </div>
                </div>
                <!-- Options List - SHARED -->
                <ul id="tag-listbox-{{ name }}"
                    role="listbox"
                    tabindex="-1"
                    aria-label="Available tags"
                    x-show="!menuShow"
                    x-transition:enter="transition ease-out duration-300"
                    x-transition:enter-start="opacity-0 translate-y-1"
                    x-transition:enter-end="opacity-100 translate-y-0"
                    x-cloak
                    class="tm:max-h-60 tm:w-full tm:overflow-y-auto tm:overflow-x-hidden tm:bg-bg-base tm:pt-1 tm:mb-0 tm:text-base tm:outline-none menu-scrollable tm:sm:text-sm">
                    <!-- Search Result Count -->
                    <li x-show="filteredTags.length > 0 && search.length > 0"
                        class="tm:px-3 tm:py-1.5 tm:text-xs tm:text-text-secondary tm:bg-bg-raised tm:sticky tm:top-0 tm:z-[10] tm:border-b tm:border-border-base">
                        <span class="tm:font-medium" x-text="filteredTags.length"></span>
                        <span x-text="filteredTags.length === 1 ? 'result' : 'results'"></span>
                    </li>
                    <!-- Existing Tags -->
                    <template x-for="(tagName, index) in filteredTags" :key="tagName">
                        <li role="option"
                            :id="'tag-option-' + tagName"
                            :aria-selected="isSelected(tagName)"
                            :aria-label="tagName + (isSelected(tagName) ? ' (selected)' : '')"
                            @click="toggleTag(tagName)"
                            @touchstart="handleSwipeStart($event, $el)"
                            @touchmove="handleSwipeMove($event)"
                            @touchend="handleSwipeEnd($event, tagName)"
                            @touchcancel="resetSwipe()"
                            class="tm:block tm:px-4 tm:py-3 tm:md:px-3 tm:md:py-2 tm:text-text-primary tm:select-none tm:cursor-pointer tm:transition-all tm:duration-150 tm:ease-in-out hover:tm:shadow-sm swipe-item"
                            :class="isSelected(tagName) ? 'tm:bg-primary-base swipe-selected' : (isFocused(tagName) ? 'tm:bg-bg-hover tm:ring-2 tm:ring-inset tm:ring-border-focus' : 'hover:tm:bg-bg-hover swipe-unselected')">
                            <div class="tm:flex tm:items-center tm:justify-between">
                                <span x-text="tagName" class="tm:truncate"></span>
                                <!-- Checkmark for Selected -->
                                <span class="tm:flex-shrink-0 tm:ml-2 tm:transition-all tm:duration-200"
                                      x-show="isSelected(tagName)"
                                      x-transition:enter="transition ease-out duration-200"
                                      x-transition:enter-start="opacity-0 scale-50"
                                      x-transition:enter-end="opacity-100 scale-100"
                                      x-transition:leave="transition ease-in duration-150"
                                      x-transition:leave-start="opacity-100 scale-100"
                                      x-transition:leave-end="opacity-0 scale-50">
                                    <svg class="tm:h-5 tm:w-5 tm:text-text-on-primary"
                                         xmlns="http://www.w3.org/2000/svg"
                                         viewBox="0 0 20 20"
                                         fill="currentColor"
                                         aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                                    </svg>
                                </span>
                            </div>
                        </li>
                    </template>
                    <!-- Empty Library State -->
                    <li x-show="filteredTags.length === 0 && search.length === 0"
                        x-transition:enter="transition ease-out duration-200"
                        x-transition:enter-start="opacity-0"
                        x-transition:enter-end="opacity-100"
                        class="tm:px-4 tm:py-8 tm:text-center">
                        <svg class="tm:mx-auto tm:h-12 tm:w-12 tm:text-text-muted"
                             fill="none"
                             viewBox="0 0 24 24"
                             stroke="currentColor"
                             aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
                        </svg>
                        <h3 class="tm:mt-2 tm:text-sm tm:font-medium tm:text-text-secondary">No tags in library</h3>
                        <p class="tm:mt-1 tm:text-sm tm:text-text-muted">Start typing to create your first tag!</p>
                    </li>
                    <!-- No Search Results Message -->
                    <li x-show="filteredTags.length === 0 && search.length > 0"
                        x-transition:enter="transition ease-out duration-200"
                        x-transition:enter-start="opacity-0"
                        x-transition:enter-end="opacity-100"
                        class="tm:px-4 tm:py-8 tm:text-center">
                        <svg class="tm:mx-auto tm:h-10 tm:w-10 tm:text-text-muted"
                             fill="none"
                             viewBox="0 0 24 24"
                             stroke="currentColor"
                             aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                        </svg>
                        <h3 class="tm:mt-2 tm:text-sm tm:font-medium tm:text-text-secondary">No tags found</h3>
                        <p class="tm:mt-1 tm:text-sm tm:text-text-muted">
                            No matches for "<span x-text="search" class="tm:font-medium tm:text-text-secondary"></span>"
                        </p>
                        <p class="tm:mt-2 tm:text-xs tm:text-text-muted" x-show="canAddTag">Try a different search or create a new tag</p>
                    </li>
                </ul>
                <!-- Footer - SHARED (responsive visibility) -->
                <div class="tm:hidden tm:md:block tm:w-full tm:py-2 tm:m-0 tm:rounded-b-md tm:bg-bg-raised">
                    <p class="tm:text-xs tm:text-text-secondary tm:text-center tm:px-3">
                        <span class="tm:inline-flex tm:items-center tm:gap-1">
                            <kbd class="tm:px-1.5 tm:py-0.5 tm:text-xs tm:font-semibold tm:text-text-primary tm:bg-bg-base tm:border tm:border-border-base tm:rounded">↑↓</kbd>
                            navigate
                            <kbd class="tm:px-1.5 tm:py-0.5 tm:text-xs tm:font-semibold tm:text-text-primary tm:bg-bg-base tm:border tm:border-border-base tm:rounded tm:ml-2">Enter</kbd>
                            select
                            <kbd class="tm:px-1.5 tm:py-0.5 tm:text-xs tm:font-semibold tm:text-text-primary tm:bg-bg-base tm:border tm:border-border-base tm:rounded tm:ml-2">Esc</kbd>
                            close
                        </span>
                    </p>
                </div>
                <!-- Mobile Footer with Help/Management -->
                <div class="tm:block tm:md:hidden">{% include "tag_me/tag_me_mobile_footer.html" %}</div>
            </div>
        </div>
        <!-- End Dropdown Container -->
    </div>
    <!-- End Widget Container -->
    <!-- Mobile Bottom Sheet (< 768px only) -->
    <div class="tm:block tm:md:hidden">{% include "tag_me/tag_me_bottom_sheet.html" %}</div>
</div>
<!-- End Main Container -->
{% comment %}
TEMPLATE MIGRATION NOTES - MAIN SELECT
=======================================
Date: November 19, 2025
Corrected by: Claude

CORRECTIONS APPLIED:
1. ✅ Restored x-init attribute with mobile positioning JavaScript (was removed)
2. ✅ Changed tm:mt-1 back to tm:mt-2 (incorrect spacing change)
3. ✅ Kept tm:z-dropdown (user confirmed)
4. ✅ Restored original transition attributes (duration-200, translate-y-1)
5. ✅ Removed added attributes: role="dialog", aria-modal="false", aria-label
6. ✅ Restored original HTML structure for "More" indicator and Placeholder

RULE FOLLOWED: ONLY class="" attributes modified with tm: prefix and semantic tokens.
All Alpine.js attributes, HTML structure, and other attributes preserved.

MAPPING DECISIONS:

CUSTOM SCROLLBAR (in <style> tag):
- Track light: #e5e7eb → oklch(0.91 0.00 286) (border-base)
- Thumb: #9ca3af → oklch(0.61 0.01 258) (text-muted)
- Thumb hover: #6b7280 → oklch(0.53 0.02 258) (text-secondary)
- Track dark: #1f2937 → oklch(0.36 0.01 259) (border-base dark)
- Using .dark selector instead of @media (prefers-color-scheme: dark)

SWIPE GESTURES (in <style> tag):
- Unselected active: rgba(99, 102, 241, 0.3) → oklch(0.61 0.20 266 / 0.3) (primary-base with opacity)
- Selected active: rgba(209, 213, 219, 0.4) → oklch(0.91 0.00 286 / 0.4) (border-base with opacity)
- Selected active dark: rgba(107, 114, 128, 0.4) → oklch(0.53 0.02 258 / 0.4) (text-secondary dark)

INPUT-LIKE CONTAINER (Closed State):
- bg-white dark:bg-white/5 → bg-bg-base (base surface)
- ring-gray-300 dark:ring-gray-300 → ring-border-base (standard border)
- focus-within:ring-indigo-500 → focus-within:ring-border-focus
- ring-2 ring-indigo-500 (open state) → ring-2 ring-border-focus

SELECTED TAG CHIPS:
- bg-indigo-500 → bg-primary-base (primary brand background)
- text-white → text-text-on-primary (white text on colored bg)
- hover:bg-indigo-400 → hover:bg-primary-hover
- Remove button: text-white/80 → text-text-on-primary/80
- Remove button hover bg: bg-white/20 → bg-text-on-primary/20

"MORE" INDICATOR:
- bg-indigo-600 → bg-primary-hover (slightly darker than primary-base)
- bg-white/20 → bg-text-on-primary/20 (for "+N" badge)

PLACEHOLDER:
- text-gray-500 dark:text-gray-500 → text-placeholder

CHEVRON/TOGGLE BUTTON:
- text-gray-400 dark:text-gray-400 → text-text-secondary
- hover:text-gray-600 dark:hover:text-gray-300 → hover:text-text-primary

DROPDOWN CONTAINER:
- z-50 → z-dropdown (user confirmed)
- mt-2 → mt-2 (preserved, not mt-1)
- bg-white dark:bg-gray-800 → bg-bg-base
- border-gray-200 dark:border-white/10 → border-border-base

SEARCH INPUT:
- bg-gray-50 dark:bg-white/5 → bg-bg-raised (input background)
- text-gray-900 dark:text-white → text-text-primary
- placeholder:text-gray-400 dark:placeholder:text-gray-500 → placeholder:text-placeholder
- focus:bg-white dark:focus:bg-white/10 → focus:bg-bg-base
- focus:ring-indigo-400 → focus:ring-border-focus

SEARCH ICON:
- text-gray-400 dark:text-gray-400 → text-text-secondary

SEARCH RESULT COUNT:
- bg-gray-100 dark:bg-gray-900/80 → bg-bg-raised
- text-gray-700 dark:text-gray-300 → text-text-secondary
- border-gray-200 dark:border-white/10 → border-border-base
- z-10 → z-[10] (local stacking)

TAG LIST ITEMS:
- text-gray-900 dark:text-white → text-text-primary
- hover:bg-gray-100 dark:hover:bg-gray-700 → hover:bg-bg-hover
- Selected: bg-indigo-500 → bg-primary-base
- Focused: bg-gray-200 dark:bg-gray-700 → bg-bg-hover + ring-border-focus
- Checkmark: text-white → text-text-on-primary

EMPTY STATES:
- Icon: text-gray-400 dark:text-gray-500 → text-text-muted
- Heading: text-gray-700 dark:text-gray-300 → text-text-secondary
- Body: text-gray-500 dark:text-gray-500 → text-text-muted
- Emphasized text: text-gray-600 dark:text-gray-400 → text-text-secondary

FOOTER:
- bg-gray-50 dark:bg-gray-800 → bg-bg-raised
- text-gray-600 dark:text-gray-300 → text-text-secondary
- kbd: text-gray-700 dark:text-gray-200 → text-text-primary
- kbd bg: bg-white dark:bg-gray-800 → bg-bg-base
- kbd border: border-gray-300 dark:border-gray-700 → border-border-base
{% endcomment %}