@charset "UTF-8";

/* ==========================================================================
   SEARCH.CSS — Application-Specific Search Overrides
   ==========================================================================
   This file contains app-specific search styling that CANNOT live in the
   component library because it references:
   - SVG/image file paths
   - Domain-specific module IDs (#Mod_StockSearch, #Mod_ThreadSearch)
   - App-specific data attribute visibility toggles (ux-anon, data-new-message)
   - Domain-specific animation keyframes

   The STRUCTURAL/VISUAL styles live in component-library.css (Sections 47-49).
   This file provides the domain-specific layer on top.

   Organized by:
   1. Animation Keyframes
   2. Smart Tab Icon Mappings (Stock/Listings)
   3. Smart Tab Icon Mappings (Activity/Threads)
   4. Welcome Header Domain-Specific Overrides
   5. Unread Message Highlighting (Activity)
   6. Activity Center Mode
   ========================================================================== */


/* ==========================================================================
   0. HIDDEN ELEMENTS
   Domain-specific elements that we don't want to ever show (for now)
   ========================================================================== */

#Content_ThreadSearch > .resultsHeader {
    display: none;
}

#Content_StockSearch > .resultsHeader {
    display: none;
}

.search-welcome-header {
    margin-top: 1.5rem;
}

.search-welcome-header .action-breakdown {
    display: none;
}

.search-welcome-header .banner-content {
    display: none;
}

.search-welcome-header .banner-actions {
    display: none;
}
.search-welcome-header .welcome-metrics {
    display: none;
} 

/* ==========================================================================
   1. ANIMATION KEYFRAMES
   Domain-specific animations used by search module components.
   ========================================================================== */

@keyframes unreadPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 255, 203, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 4px rgba(0, 255, 203, 0);
    }
}

@keyframes urgentPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
    }
    50% {
        box-shadow: 0 0 30px rgba(239, 68, 68, 0.8);
    }
}

@keyframes activityPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

@keyframes activityUrgentPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}


/* ==========================================================================
   2. SMART TAB ICON MAPPINGS — Stock/Listings (#Mod_StockSearch)
   Maps [data-filter-value] attributes to SVG icon URLs.
   Structural tab styles are in component-library.css Section 47.
   ========================================================================== */

/* Default (inactive) tab icons */
#Mod_StockSearch .smart-tab[data-filter-value=""] .tab-icon {
    background-image: url('/images/icon/list-black.svg');
}

#Mod_StockSearch .smart-tab[data-filter-value="needs-listing-action"] .tab-icon {
    background-image: url('/images/icon/design-pencil-black.svg');
}

#Mod_StockSearch .smart-tab[data-filter-value="has-offers"] .tab-icon {
    background-image: url('/images/icon/stats-up-square-black.svg');
}

#Mod_StockSearch .smart-tab[data-filter-value="out-of-stock"] .tab-icon {
    background-image: url('/images/icon/grid-xmark-black.svg');
}

#Mod_StockSearch .smart-tab[data-filter-value="bestseller"] .tab-icon {
    background-image: url('/images/icon/star-black.svg');
}

#Mod_StockSearch .smart-tab[data-filter-value="recently-updated"] .tab-icon {
    background-image: url('/images/icon/clock-black.svg');
}

/* Active tab icons (some swap to different icons) */
#Mod_StockSearch .smart-tab.active[data-filter-value=""] .tab-icon {
    background-image: url('/images/icon/list-black.svg');
}

#Mod_StockSearch .smart-tab.active[data-filter-value="needs-action"] .tab-icon {
    background-image: url('/images/icon/alert-black.svg');
}

#Mod_StockSearch .smart-tab.active[data-filter-value="has-offers"] .tab-icon {
    background-image: url('/images/icon/message-black.svg');
}

#Mod_StockSearch .smart-tab.active[data-filter-value="out-of-stock"] .tab-icon {
    background-image: url('/images/icon/box-black.svg');
}

#Mod_StockSearch .smart-tab.active[data-filter-value="bestseller"] .tab-icon {
    background-image: url('/images/icon/star-black.svg');
}

#Mod_StockSearch .smart-tab.active[data-filter-value="recently-updated"] .tab-icon {
    background-image: url('/images/icon/clock-black.svg');
}


/* ==========================================================================
   3. SMART TAB ICON MAPPINGS — Activity/Threads (.activity-center)
   ========================================================================== */

.activity-center .smart-tab[data-filter-value] .tab-icon {
    background-image: url('/images/icon/action-black.svg');
}

.activity-center .smart-tab[data-filter-value="needs-action"] .tab-icon {
    background-image: url('/images/icon/alert-black.svg');
}

.activity-center .smart-tab[data-filter-value="buyer"] .tab-icon {
    background-image: url('/images/icon/hand-cash-black.svg');
}

.activity-center .smart-tab[data-filter-value="seller"] .tab-icon {
    background-image: url('/images/icon/bag-black.svg');
}

.activity-center .smart-tab[data-filter-value="messages-only"] .tab-icon {
    background-image: url('/images/icon/message-black.svg');
}


/* ==========================================================================
   4. WELCOME HEADER — Domain-Specific Overrides
   Structural/auth styles are in component-library.css Section 48.
   This section contains ONLY module-specific element ordering, control icon
   SVG mappings, and button-specific styling that varies per page.
   ========================================================================== */

/* --- Stock: Element ordering within authenticated welcome content --- */
#Body[ux-anon="0"] #Mod_StockSearch .welcome-content .welcome-title {
    order: 0;
    margin-right: 0;
    width: auto;
    display: inline-flex;
}

#Body[ux-anon="0"] #Mod_StockSearch .welcome-content .action-summary-banner {
    order: 1;
    margin-left: 0;
    margin-right: auto;
    width: auto;
    display: inline-flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    flex-direction: row;
}

#Body[ux-anon="0"] #Mod_StockSearch .welcome-content .welcome-subtitle {
    order: 2;
    flex-basis: 100%;
    text-align: left;
}

/* --- Stock: Create Listing button (banner-colored CTA) --- */
#Mod_StockSearch .welcome-controls .cmdCreateListing {
    background: var(--gradient-banner);
    color: var(--color-white);
    border-color: var(--color-border-medium);
}

    #Mod_StockSearch .welcome-controls .cmdCreateListing:hover {
        background: var(--gradient-banner);
        color: var(--color-white);
    }

/* --- Stock: Control icon SVG mappings --- */
#Mod_StockSearch .cmdCreateListing .control-icon {
    background-image: url('/images/icon/plus-white.svg');
}

#Mod_StockSearch .cmdSalesAnalytics .control-icon {
    background-image: url('/images/icon/graph-primary.svg');
}

/* --- Activity: Real-time status indicator domain overrides --- */
#Mod_ThreadSearch .realtime-status {
    background: var(--color-glass);
    padding: 0 var(--spacing-md);
    border-radius: var(--border-radius-full);
}

/* --- Activity: Sales Analytics control icon --- */
#Mod_ThreadSearch .cmdSalesAnalytics .control-icon {
    background-image: url('/images/icon/graph-primary.svg');
}


/* ==========================================================================
   5. UNREAD MESSAGE HIGHLIGHTING — Activity/Threads
   ========================================================================== */

/* Sections 5-6 were consolidated from former 7-8 during welcome header migration */

/* Unread/action styles now in component-library.css .inbox-item[data-new-message]
   (subtle background tint + border-color, per style guide — no thick left borders) */


/* ==========================================================================
   6. ACTIVITY CENTER MODE — Layout Override
   ========================================================================== */

#Mod_ThreadSearch[ux-mode="dashboard"] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin: 0 auto;
}


/* ==========================================================================
   7. SEARCH CONTEXT STATE — Domain-Specific Visibility
   ID-specific rules for browse/detail state toggling.
   Generic context toggle system is in component-library.css Section 50.
   ========================================================================== */

/* --- Stock + Messaging: Breadcrumb Hide (Browse State) --- */
#Mod_Stock[search-context-state="browse"] #Breadcrumb_Stock,
#Mod_Threads[search-context-state="browse"] #Breadcrumb_Thread {
    display: none;
}

/* --- Stock + Messaging: Breadcrumb Positioning (Detail State) --- */
#Mod_Stock[search-context-state="detail"] #Breadcrumb_Stock,
#Mod_Threads[search-context-state="detail"] #Breadcrumb_Thread {
    max-width: var(--container-max-width, 1400px);
    margin: 0 auto;
    padding: var(--spacing-sm) var(--spacing-lg);
}

/* --- Stock + Messaging: Back Button (Detail State) --- */
#Mod_Stock[search-context-state="detail"] #StockDetail_Header #Cmd_BackToStockListings,
#Mod_Threads[search-context-state="detail"] #ThreadDetail_Header #Cmd_BackToThreadListings {
    left: 5px;
    top: -30px;
}

/* --- Product/Store: Breadcrumb State --- */
#Mod_Products[search-context-state="browse"] #Breadcrumb_Product {
    color: var(--color-white);
    transform: none;
    margin-top: 2px;
    padding-left: 0;
    padding-right: 0;
}

#Mod_Products[search-context-state="browse"] #Breadcrumb_Product[data-breadcrumb-count="1"] {
    text-indent: -9999px;
    height: 8px;
}

#Mod_Products[search-context-state="detail"] #Breadcrumb_Product {
    margin-top: 2px;
    padding-left: 40px;
    padding-right: 20px;
    max-width: 1060px;
}

/* --- Product: Seller Info Visibility (Detail State) --- */
#Mod_Products[data-navigation-scope="marketplace"][search-context-state="detail"] #ProductSellerInfo {
    display: none;
}

#Mod_ProductSearch .filters-container {
    align-self: center;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    min-width: initial;
    display: flex;
    flex: 0;
    margin-left: auto;
    margin-right: auto;
    justify-self: center;
}

/* --- Dynamic Filter Selections (created by TypeScript without template) ---
   When facets load dynamically via AJAX, there's no server-rendered template
   for TypeScript to copy classes from. This ensures .selection elements in
   the filter bar get proper filter-pill styling. */
#Mod_ProductSearch .facetSelection .selection,
#Mod_ThreadSearch .facetSelection .selection {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--color-primary-on-dark, white);
    border: 1px solid var(--color-primary);
    border-radius: var(--border-radius-full, 100px);
    padding: 0 10px;
    font-size: var(--font-size-xs);
    line-height: 15px;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.25s var(--ease-elegant);
    align-self: stretch;
    order: -1;
}

#Mod_ProductSearch .facetSelection .selection:hover,
#Mod_ThreadSearch .facetSelection .selection:hover {
    background: var(--color-primary-dark, var(--color-primary));
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.3);
}


/* ==========================================================================
   8. EMPTY STATE VISIBILITY — Single Source of Truth

   ARCHITECTURE: CSS attribute selectors are the SINGLE source of truth for
   empty state visibility. TypeScript only sets attributes, never .show()/.hide().

   Pattern for all search modules:
   - [ux-no-results] = count is 0 (set by TypeScript)
   - [data-empty-state-type="X"] = which empty state to show (set by server/TypeScript)

   Empty states are hidden by default; CSS shows them when attributes match.
   ========================================================================== */

/* --- Default: All empty states hidden --- */
.search-empty-state,
.discover-empty-state,
.seller-empty-state {
    display: none;
}

/* --- Product/Discover: Show empty state when ux-no-results + data-empty-state-type --- */
#Mod_ProductSearch[ux-no-results][data-empty-state-type="default"]
    .discover-empty-state.default-empty {
    display: block;
    animation: fadeInUp 0.6s var(--ease-out, ease-out);
}

#Mod_ProductSearch[ux-no-results][data-empty-state-type="filtered"]
    .discover-empty-state.filtered-empty {
    display: block;
    animation: fadeInUp 0.6s var(--ease-out, ease-out);
}

#Mod_ProductSearch[ux-no-results][data-empty-state-type="auth_required"]
    .discover-empty-state.auth-required-empty {
    display: block;
    animation: fadeInUp 0.6s var(--ease-out, ease-out);
}

/* Hide filter interface when showing auth_required (anonymous user, no point showing filters) */
#Mod_ProductSearch[ux-no-results][data-empty-state-type="auth_required"] .discover-filter-interface {
    display: none;
}

/* Hide filter interface on seller store with no listings (default empty state) */
#Mod_ProductSearch[ux-no-results][data-empty-state-type="default"][data-navigation-scope="seller-store"] .discover-filter-interface {
    display: none;
}

/* --- Stock/Listings: Show empty state when ux-no-results + data-empty-state-type --- */
#Mod_StockSearch[ux-no-results][data-empty-state-type="default"]
    .seller-empty-state.default-empty {
    display: block;
    animation: fadeInUp 0.6s var(--ease-out, ease-out);
}

#Mod_StockSearch[ux-no-results][data-empty-state-type="filtered"]
    .seller-empty-state.filtered-empty {
    display: block;
    animation: fadeInUp 0.6s var(--ease-out, ease-out);
}

#Mod_StockSearch[ux-no-results][data-empty-state-type="onboarding"]
    .search-onboarding {
    display: block;
    animation: fadeInUp 0.6s var(--ease-out, ease-out);
}

/* --- Activity/Threads: Show empty state when ux-no-results + data-empty-state-type --- */
#Mod_ThreadSearch[ux-no-results][data-empty-state-type="default"]
    .discover-empty-state.default-empty.activity-empty {
    display: block;
    animation: fadeInUp 0.6s var(--ease-out, ease-out);
}

#Mod_ThreadSearch[ux-no-results][data-empty-state-type="filtered"]
    .discover-empty-state.filtered-empty.activity-empty {
    display: block;
    animation: fadeInUp 0.6s var(--ease-out, ease-out);
}

/* Hide filter interface for activity center when showing default empty state */
#Mod_ThreadSearch[ux-no-results][data-empty-state-type="default"] .activity-filter-interface {
    display: none;
}


/* ==========================================================================
   9. ONBOARDING & INTERFACE VISIBILITY — Based on Empty State Type

   Uses same attribute pattern as empty states for consistency.
   When onboarding shows, hide the filter interface.
   When filtered empty shows, keep filter interface visible for clearing filters.
   ========================================================================== */

/* Onboarding is already handled in section 8 via:
   #Mod_StockSearch[ux-no-results][data-empty-state-type="onboarding"] .search-onboarding */

/* Hide filter interface when showing onboarding (new user with no listings) */
#Mod_StockSearch[ux-no-results][data-empty-state-type="onboarding"] .seller-filter-interface,
#Mod_StockSearch[ux-no-results][data-empty-state-type="onboarding"] .search-section-header,
#Mod_StockSearch[ux-no-results][data-empty-state-type="default"] .seller-filter-interface,
#Mod_StockSearch[ux-no-results][data-empty-state-type="default"] .search-section-header {
    display: none;
}

/* Keep filter interface visible when filtered (so user can clear filters) */
#Mod_StockSearch[ux-no-results][data-empty-state-type="filtered"] .seller-filter-interface {
    display: block;
}




/* ==========================================================================
   10. CARD ICON MAPPINGS — Product Card
   SVG icon URLs for product search result cards.
   Structural card styles are in component-library.css Section 27.
   ========================================================================== */

/* --- Product Stats Icons (view count, watcher count) ---
   SVG base pattern + sizes in component-library.css Section 55 + Section 27 */
.product-stats .stat-item.view-count .icon {
    background-image: url(/images/icon/eye-black.svg);
}

.product-stats .stat-item.watcher-count .icon {
    background-image: url(/images/icon/bookmark-black.svg);
}

/* --- Product Watch/Favorite Button ---
   SVG base pattern + sizes in component-library.css Section 55 + Section 27 */
.product-actions .cmdSaveFavorite .icon,
.product-actions .social-watch-toggle .icon {
    background-image: url(/images/icon/bookmark-black.svg);
}

.product-actions .cmdSaveFavorite.watching .icon,
.product-actions .social-watch-toggle.watching .icon {
    background-image: url(/images/icon/bookmark-solid-black.svg);
}


/* ==========================================================================
   11. CARD ICON MAPPINGS — Listing Card
   SVG icon URLs for listing/stock search result cards.
   Structural card styles are in component-library.css Section 28.
   ========================================================================== */

/* --- Context Menu Button Icon ---
   Menu button has its own structural styling in component-library.css (higher
   specificity via .context-menu-trigger). Only the SVG URL is app-specific.
   Using .menu-icon span pattern for consistent icon rendering. */
.listing-card .menu-button .menu-icon {
    display: block;
    width: var(--icon-size-md, 20px);
    height: var(--icon-size-md, 20px);
    background-image: url(/images/icon/more-vert-black.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
    transition: opacity 0.2s var(--ease-out);
}

.listing-card .menu-button:hover .menu-icon {
    opacity: 0.85;
}

/* --- Metric Chip Icons ---
   SVG base pattern + sizes in component-library.css Section 55 + listing card section.
   Active state inversion in component-library.css Section 55. */
.metric-chip.views .metric-icon {
    background-image: url(/images/icon/eye-black.svg);
}

.metric-chip.watchers .metric-icon {
    background-image: url(/images/icon/bookmark-black.svg);
}

.metric-chip.sales .metric-icon {
    background-image: url(/images/icon/dollar-black.svg);
}

.metric-chip.offers .metric-icon {
    background-image: url(/images/icon/hand-cash-black.svg);
}

.metric-chip.meetups .metric-icon {
    background-image: url(/images/icon/group-black.svg);
}

.metric-chip.interest .metric-icon {
    background-image: url(/images/icon/graph-black.svg);
}

/* --- Drift Hint Icon ---
   SVG base pattern + sizes in component-library.css Section 55 */
.listing-card .hint-icon {
    background-image: url(/images/icon/alert-black.svg);
}

/* --- Primary Action Icons (status-dependent) ---
   SVG base pattern + sizes in component-library.css Section 55 */
.listing-card[data-status="draft"] .cmdManage .action-icon {
    background-image: url(/images/icon/action-primary.svg);
}

.listing-card[data-status="live"] .cmdManage .action-icon {
    background-image: url(/images/icon/edit-primary.svg);
}

/* --- No-Photo Placeholder Camera Icon ---
   SVG base pattern + sizes in component-library.css Section 55 + listing card section */
.listing-card .no-photo-placeholder .photo-icon {
    background-image: url(/images/icon/camera-secondary.svg);
}


/* ==========================================================================
   11B. ICON MAPPINGS — Filter Dialog
   Icon references for the filter button and filter panel elements.
   Structural filter dialog styles are in component-library.css Section 49B.
   ========================================================================== */

/* --- Filter Button Icon (.cmdChangeFilters) --- */
.searchContainer .modifyCommands .cmdChangeFilters::before {
    display: flex;
    content: "";
    position: static;
    background-image: url("/images/skin/icon-filter@2x.png");
    width: 14px;
    height: 25px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

/* --- Sort Filter Down Arrow --- */
.searchModule .facetSelection .option[search-filter-target="Sort"]::after {
    position: static;
    content: '';
    background-image: url("/images/skin/icon-down-black@2x.png");
    width: 10px;
    height: 10px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

/* ==========================================================================
   12. DARK MODE — Search-Specific Overrides
   ==========================================================================
   Icon dark mode inversions moved to component-library-dark.css Section 55.
   This section only has search-domain-specific dark mode rules.
   ========================================================================== */

/* --- Unread Message Highlighting ---
   Replace hardcoded rgba(255,255,255,1) with dark-adaptive background. */
[data-theme="dark"] .activity-center .thread.result.messages.listItem[data-needs-action] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, var(--color-background) 100%);
}

/* --- Filter Icon Inversions --- */
[data-theme="dark"] .searchContainer .modifyCommands .cmdChangeFilters::before {
    filter: brightness(0) invert(1);
}

[data-theme="dark"] .searchModule .facetSelection .option[search-filter-target="Sort"]::after {
    filter: brightness(0) invert(1);
}