{# 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 - Uses library CSS variables for theme adaptation */
.menu-scrollable::-webkit-scrollbar {
  width: 0.5rem;
}
.menu-scrollable::-webkit-scrollbar-track {
  background-color: var(--tm-color-outline-variant-lib);
  border-radius: 9999px;
}
.menu-scrollable::-webkit-scrollbar-thumb {
  background-color: var(--tm-color-on-surface-variant-lib);
  border-radius: 9999px;
}
.menu-scrollable::-webkit-scrollbar-thumb:hover {
  background-color: var(--tm-color-on-surface-lib);
}

/* Dark mode automatically handled by CSS variables - no .dark override needed! */

/* 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 - Uses library CSS variables */
.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: color-mix(in oklch, var(--tm-color-primary-lib) 30%, transparent);
  opacity: 1;
}

.swipe-item.swipe-selected.swipe-active::before {
  background-color: color-mix(in oklch, var(--tm-color-on-primary-lib) 40%, transparent);
  opacity: 1;
}

/* Dark mode handled automatically - no manual override needed */
</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-on:dropdown-opened.window="if ($event.detail.id !== $id('search-menu-dropdown')) close()"
     x-effect="if (show) $dispatch('dropdown-opened', { id: $id('search-menu-dropdown') })"
     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-surface-lib tm:border-0 tm:shadow-sm tm:ring-1 tm:ring-inset tm:ring-outline-variant-lib tm:transition-all tm:duration-200 tm:focus-within:ring-2 tm:focus-within:ring-primary-lib"
                 :class="show ? 'tm:ring-2 tm:ring-primary-lib' : ''">
                <!-- 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-on-primary-lib tm:bg-primary-lib tm:shadow-sm tm:transition-all tm:duration-150 hover:tm:bg-primary-lib hover:tm:opacity-90 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-on-primary-lib/80 tm:rounded tm:transition-all tm:duration-150 hover:tm:text-on-primary-lib hover:tm:bg-on-primary-lib/20 hover:tm:scale-110 tm:active:scale-95 tm:focus:outline-none tm:focus:ring-2 tm:focus:ring-on-primary-lib tm:focus:ring-offset-2 tm:focus:ring-offset-primary-lib"
                                        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-on-primary-lib tm:bg-primary-lib 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-on-primary-lib/20 tm:text-on-primary-lib 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-on-surface-variant-lib">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-on-surface-variant-lib hover:tm:text-on-surface-lib tm:transition-colors tm:duration-150 tm:focus:outline-none tm:focus:ring-2 tm:focus:ring-primary-lib tm:focus:ring-offset-2 tm:focus:ring-offset-surface-lib 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-surface-container-high-lib tm:shadow-lg tm:border tm:border-outline-variant-lib">
            <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-outline-variant-lib">
                    <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-on-surface-variant-lib"
                                 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()"
                               x-ref="searchInput"
                               x-init="$watch('show', value => { if (value && shouldAutoFocus) { $nextTick(() => $refs.searchInput?.focus()) } })"
                               class="tm:block tm:w-full tm:rounded-md tm:border-0 tm:bg-surface-container-lib tm:py-2.5 tm:md:py-2 tm:pr-16 tm:md:pr-12 tm:pl-10 tm:text-base tm:text-on-surface-lib tm:outline-none tm:placeholder:text-on-surface-variant-lib tm:focus:bg-surface-container-high-lib tm:focus:ring-2 tm:focus:ring-primary-lib 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-surface-container-high-lib 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-on-surface-variant-lib tm:bg-surface-container-high-lib tm:sticky tm:top-0 tm:z-[10] tm:border-b tm:border-outline-variant-lib">
                        <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)"
                            @keydown.enter.prevent="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-on-surface-lib tm:select-none tm:cursor-pointer tm:transition-all tm:duration-150 tm:ease-in-out swipe-item"
                            :class="isSelected(tagName) ? 'tm:bg-primary-lib swipe-selected' : (isFocused(tagName) ? 'tm:bg-surface-container-highest-lib tm:ring-2 tm:ring-inset tm:ring-primary-lib' : 'hover:tm:bg-surface-container-highest-lib 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-on-primary-lib"
                                         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-on-surface-variant-lib"
                             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-on-surface-variant-lib">No tags in library</h3>
                        <p class="tm:mt-1 tm:text-sm tm:text-on-surface-variant-lib">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-on-surface-variant-lib"
                             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-on-surface-variant-lib">No tags found</h3>
                        <p class="tm:mt-1 tm:text-sm tm:text-on-surface-variant-lib">
                            No matches for "<span x-text="search" class="tm:font-medium tm:text-on-surface-variant-lib"></span>"
                        </p>
                        <p class="tm:mt-2 tm:text-xs tm:text-on-surface-variant-lib"
                           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-surface-container-highest-lib tm:border-t tm:border-outline-variant-lib">
                    <p class="tm:text-xs tm:text-on-surface-variant-lib 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-on-surface-lib tm:bg-surface-container-high-lib tm:border tm:border-outline-variant-lib tm:rounded">↑↓</kbd>
                            navigate
                            <kbd class="tm:px-1.5 tm:py-0.5 tm:text-xs tm:font-semibold tm:text-on-surface-lib tm:bg-surface-container-high-lib tm:border tm:border-outline-variant-lib 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-on-surface-lib tm:bg-surface-container-high-lib tm:border tm:border-outline-variant-lib 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 CLASS MIGRATION - MAIN SELECT (MD3 REFACTOR v3.1)
===========================================================
Date: December 06, 2025
Migration: MD3 Elevation Alignment + Cross-component Dropdown Coordination

CROSS-COMPONENT COORDINATION (v3.1):
✅ Added x-on:dropdown-opened.window listener
   - Closes this dropdown when another dropdown opens
   - Uses $id('search-menu-dropdown') for unique identification

✅ Added x-effect to dispatch 'dropdown-opened' event
   - Fires when 'show' becomes true
   - Other dropdown components (datetime, etc.) receive and close

EVENT PATTERN:
- Event name: 'dropdown-opened'
- Payload: { id: $id('search-menu-dropdown') }
- Bubbles to window level
- All dropdown components listen and close if id doesn't match

MD3 CHANGES APPLIED (ELEVATION ALIGNMENT - v3.0):
1. ✅ Dropdown container: bg-surface-container-lib → bg-surface-container-high-lib [1→3]
   - Matches datetime component dropdown elevation
   - Creates proper "floating" effect above page content
   
2. ✅ Search input idle: bg-surface-lib → bg-surface-container-lib [0→1]
   - Creates "inset" feel within elevated dropdown
   - Provides subtle visual depth
   
3. ✅ Search input focus: focus:bg-surface-container-lib → focus:bg-surface-container-high-lib [1→3]
   - Input "rises" to match dropdown on focus
   - Indicates active state clearly
   
4. ✅ List container: bg-surface-container-lib → bg-surface-container-high-lib [1→3]
   - Matches dropdown elevation
   - Items can hover to +1 level (highest)
   
5. ✅ Search result count sticky: bg-surface-container-lib → bg-surface-container-high-lib
   - Matches list container for seamless appearance
   
6. ✅ List items hover/focus: bg-surface-container-high-lib → bg-surface-container-highest-lib [3→4]
   - Proper +1 elevation step on interaction
   - Clear visual feedback
   
7. ✅ Desktop footer: bg-surface-container-lib → bg-surface-container-highest-lib [1→4]
   - Matches datetime footer elevation
   - Added border-t for visual separation
   - Kbd elements updated: bg-surface-lib → bg-surface-container-high-lib

ELEVATION HIERARCHY (ALIGNED WITH DATETIME):
- Input (closed):          surface-lib [0]
- Dropdown container:      surface-container-high-lib [3] ← elevated
- Search input (idle):     surface-container-lib [1] ← inset feel
- Search input (focus):    surface-container-high-lib [3] ← rises
- List items (base):       surface-container-high-lib [3] ← matches container
- List items (hover):      surface-container-highest-lib [4] ← +1 elevation
- List items (selected):   primary-lib ← semantic
- Desktop footer:          surface-container-highest-lib [4] ← action area

NO OTHER CHANGES:
- Alpine.js component logic: unchanged
- HTMX: unchanged  
- HTML structure: unchanged
- Spacing/layout: unchanged
- Z-index values: unchanged
- Non-MD3 classes: unchanged
{% endcomment %}