/**
 * Search Dropdown Component
 * Includes search input, filter panel, results grid
 */

@use '../variables' as *;
@use '../mixins' as *;

.target-conditions-trait,
.entity-selector-trait {

    // Search wrapper
    .target-search-wrapper {
        position: relative;
    }

    // Search dropdown
    .target-search-dropdown {
        @include dropdown-container;
        display: none;
        width: 600px;
        max-width: calc(100vw - 40px);

        &.show {
            display: block;
        }
    }

    // Dropdown header
    .dropdown-header {
        display: flex;
        align-items: center;
        gap: $es-spacing-sm;
        padding: $es-spacing-md;
        background: $es-bg-header;
        border-bottom: 1px solid $es-border-color;
        border-radius: $es-radius-lg $es-radius-lg 0 0;
    }

    .dropdown-search-input {
        @include input-base;
        flex: 1;
        padding: $es-spacing-sm $es-spacing-md;
    }

    .dropdown-close-btn {
        @include button-reset;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        color: $es-text-muted;
        border-radius: $es-radius-md;
        transition: all $es-transition-fast;

        &:hover {
            background: $es-slate-200;
            color: $es-text-secondary;
        }
    }

    // Dropdown controls bar
    .dropdown-controls {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: $es-spacing-sm;
        padding: $es-spacing-sm $es-spacing-md;
        background: $es-white;
        border-bottom: 1px solid $es-border-color;
    }

    .dropdown-controls-left,
    .dropdown-controls-right {
        display: flex;
        align-items: center;
        gap: $es-spacing-sm;
    }

    // View mode buttons
    .view-mode-btn {
        @include button-reset;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        color: $es-text-muted;
        background: transparent;
        border-radius: $es-radius-sm;
        transition: all $es-transition-fast;

        &:hover {
            background: $es-slate-100;
            color: $es-text-secondary;
        }

        &.active {
            background: $es-primary;
            color: $es-white;
        }
    }

    // Results count
    .dropdown-results-count {
        font-size: $es-font-size-xs;
        color: $es-text-muted;
    }

    // Dropdown body
    .dropdown-body {
        max-height: 400px;
        overflow-y: auto;
        @include custom-scrollbar;
    }

    // Results container
    .dropdown-results {
        padding: 0 $es-spacing-sm;
    }

    // Results count text
    .results-count {
        font-size: $es-font-size-xs;
        color: $es-text-muted;
        padding: $es-spacing-xs $es-spacing-sm;
    }

    // Results header (for list view columns)
    .results-header {
        display: flex;
        align-items: center;
        gap: $es-spacing-sm;
        padding: $es-spacing-xs $es-spacing-md;
        background: $es-slate-100;
        border-bottom: 1px solid $es-border-color;
        font-size: $es-font-size-xs;
        font-weight: $es-font-weight-semibold;
        color: $es-text-secondary;
    }

    // Grid view
    .dropdown-results-grid {
        display: grid;
        gap: $es-spacing-sm;

        &.view-list {
            grid-template-columns: 1fr;
        }

        &.view-grid-2 {
            grid-template-columns: repeat(2, 1fr);
        }

        &.view-grid-3 {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    // Result item (both class names for compatibility)
    // Note: Main dropdown-item styling is in the global .target-search-dropdown section below
    .dropdown-result-item {
        display: flex;
        align-items: center;
        gap: $es-spacing-sm;
        padding: $es-spacing-sm 0;
        background: $es-white;
        border: none;
        border-bottom: 1px solid $es-border-color;
        border-radius: 0;
        cursor: pointer;
        transition: background $es-transition-fast;

        &:last-child {
            border-bottom: none;
        }

        &:hover {
            background: $es-bg-hover;
        }

        &.selected {
            background: $es-primary-light;
        }

        &.disabled {
            opacity: 0.5;
            cursor: not-allowed;

            &:hover {
                background: $es-white;
            }
        }
    }

    .result-item-image,
    .result-image {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        overflow: hidden;
        border-radius: $es-radius-sm;
        background: $es-slate-100;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        &.result-flag {
            width: 32px;
            height: 24px;
            border-radius: 2px;
            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
            background: transparent;

            img {
                object-fit: contain;
            }

            .flag-fallback {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
                background: linear-gradient(135deg, #e8eaed 0%, #dadce0 100%);
                font-size: 14px;
                color: #5f6368;
            }
        }
    }

    .result-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        background: $es-slate-100;
        border-radius: $es-radius-sm;
        color: $es-text-muted;

        i {
            font-size: 16px;
        }
    }

    .result-item-info,
    .result-info {
        flex: 1;
        min-width: 0;
    }

    .result-item-name,
    .result-name {
        font-size: $es-font-size-sm;
        font-weight: $es-font-weight-medium;
        color: $es-text-primary;
        @include text-truncate;
    }

    .result-item-meta,
    .result-subtitle {
        font-size: $es-font-size-xs;
        color: $es-text-muted;
    }

    .subtitle-line {
        @include text-truncate;
    }

    .subtitle-line-primary {
        color: $es-text-secondary;
    }

    .subtitle-line-secondary {
        color: $es-text-muted;
        font-size: 11px;
    }

    // Result columns (for product list view)
    .result-col {
        flex-shrink: 0;
        width: 70px;
        text-align: right;
        font-size: $es-font-size-xs;
    }

    .result-col-price {
        color: $es-text-secondary;
    }

    .result-col-sale {
        color: $es-danger;
        font-weight: $es-font-weight-semibold;
    }

    .result-col-stock {
        .col-value {
            &.stock-ok {
                color: $es-success;
            }

            &.stock-low {
                color: $es-warning;
            }

            &.stock-out {
                color: $es-danger;
            }
        }
    }

    .result-col-sales {
        color: $es-text-muted;
    }

    .col-value {
        display: block;
    }

    .result-item-checkbox,
    .result-checkbox {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        border: 2px solid $es-border-dark;
        border-radius: $es-radius-sm;
        transition: all $es-transition-fast;

        i {
            display: none;
            font-size: 10px;
            color: $es-white;
        }

        .dropdown-result-item.selected &,
        .dropdown-item.selected & {
            background: $es-primary;
            border-color: $es-primary;

            i {
                display: block;
            }
        }
    }

    // Product-specific result item
    .result-item-product {
        display: flex;
        align-items: center;
        gap: $es-spacing-sm;
    }

    // No results state
    .no-results {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: $es-spacing-sm;
        padding: $es-spacing-xl;
        color: $es-text-muted;
        font-size: $es-font-size-sm;

        i {
            font-size: 1.25rem;
            opacity: 0.5;
        }
    }

    // Empty state
    .dropdown-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: $es-spacing-sm;
        padding: $es-spacing-xl;
        text-align: center;
        color: $es-text-muted;

        i {
            font-size: 2rem;
            opacity: 0.5;
        }

        p {
            margin: 0;
            font-size: $es-font-size-sm;
        }
    }

    // Loading state
    .dropdown-loading {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: $es-spacing-xl;
        color: $es-text-muted;

        i {
            font-size: 1.5rem;
            animation: spin 1s linear infinite;
        }
    }

    // Unified dropdown footer - combines load more and actions
    .dropdown-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: $es-spacing-md;
        padding: $es-spacing-sm $es-spacing-md;
        background: $es-slate-50;
        border-top: 1px solid $es-border-color;
        border-radius: 0 0 $es-radius-lg $es-radius-lg;
    }

    // Left side: load more controls
    .dropdown-footer-left {
        display: flex;
        align-items: center;
        gap: $es-spacing-xs;
        font-size: $es-font-size-xs;
        color: $es-text-muted;

        .load-label {
            color: $es-text-muted;
        }

        .load-more-select,
        select.load-more-select {
            appearance: none;
            padding: 0.25rem 1.5rem 0.25rem 0.5rem;
            border: 1px solid $es-border-color;
            border-radius: $es-radius-sm;
            background: $es-white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23666' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right 0.4rem center;
            background-size: 8px;
            font-size: $es-font-size-xs;
            color: $es-text-secondary;
            cursor: pointer;
            min-width: 55px;

            &:hover {
                border-color: $es-primary;
            }

            &:focus {
                outline: none;
                border-color: $es-primary;
            }
        }

        .remaining-text {
            color: $es-text-muted;

            strong {
                color: $es-text-secondary;
                font-weight: $es-font-weight-semibold;
            }
        }

        .btn-load-all {
            @include button-reset;
            padding: 0.25rem 0.5rem;
            font-size: $es-font-size-xs;
            color: $es-primary;
            background: transparent;
            border-radius: $es-radius-sm;
            transition: all $es-transition-fast;

            &:hover {
                background: $es-primary-light;
            }
        }
    }

    // Right side: action buttons
    .dropdown-footer-right {
        display: flex;
        align-items: center;
        gap: $es-spacing-sm;
    }

    .dropdown-action-btn {
        @include button-reset;
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.375rem 0.75rem;
        font-size: $es-font-size-xs;
        font-weight: $es-font-weight-medium;
        border-radius: $es-radius-sm;
        transition: all $es-transition-fast;

        .btn-shortcut {
            font-size: 10px;
            padding: 0.125rem 0.25rem;
            background: rgba(0, 0, 0, 0.08);
            border-radius: 3px;
            font-weight: $es-font-weight-normal;
        }

        &.btn-cancel {
            color: $es-text-secondary;
            background: $es-white;
            border: 1px solid $es-border-color;

            &:hover {
                background: $es-slate-100;
                border-color: $es-border-dark;
            }
        }

        &.btn-apply,
        &.btn-save {
            color: $es-white;
            background: $es-primary;
            border: 1px solid $es-primary;

            &:hover {
                background: $es-primary-hover;
                border-color: $es-primary-hover;
            }

            .btn-shortcut {
                background: rgba(255, 255, 255, 0.2);
            }
        }
    }

    // Legacy support - hide old load more section when new footer exists
    .dropdown-load-more {
        display: none;
    }

    .load-more-controls {
        display: none;
    }

    // Filter panel
    .dropdown-filter-panel {
        padding: $es-spacing-md;
        background: $es-slate-50;
        border-bottom: 1px solid $es-border-color;
    }

    .filter-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: $es-spacing-sm;
    }

    .filter-panel-title {
        font-size: $es-font-size-sm;
        font-weight: $es-font-weight-semibold;
        color: $es-text-primary;
    }

    .filter-panel-toggle {
        @include button-reset;
        font-size: $es-font-size-xs;
        color: $es-primary;

        &:hover {
            text-decoration: underline;
        }
    }

    .filter-panel-content {
        display: grid;
        gap: $es-spacing-sm;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .filter-group {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .filter-label {
        font-size: $es-font-size-xs;
        font-weight: $es-font-weight-medium;
        color: $es-text-secondary;
    }

    .filter-select,
    .filter-input {
        @include input-base;
        padding: 0.375rem $es-spacing-sm;
        font-size: $es-font-size-xs;
    }
}

// Category tree view
.target-conditions-trait,
.entity-selector-trait {
    .category-tree {
        padding: $es-spacing-sm;
    }

    .tree-container {
        // Contains tree items
    }

    .tree-loading {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: $es-spacing-sm;
        padding: $es-spacing-xl;
        color: $es-text-muted;
        font-size: $es-font-size-sm;

        i {
            animation: spin 0.6s linear infinite;
        }
    }

    // Tree item (used by JavaScript)
    .tree-item {
        display: flex;
        align-items: center;
        gap: $es-spacing-xs;
        padding: 0.375rem $es-spacing-sm;
        border-radius: $es-radius-sm;
        cursor: pointer;
        transition: background-color $es-transition-fast;

        &:hover {
            background: $es-bg-hover;
        }

        &.selected {
            background: $es-primary-light;

            .tree-checkbox {
                background: $es-primary;
                border-color: $es-primary;

                i {
                    display: block;
                }
            }
        }

        &.has-children {
            // Parent node styling
        }
    }

    // tree-toggle, btn-select-children, tree-checkbox, tree-icon styles in _tree.scss

    .tree-info {
        display: flex;
        align-items: center;
        gap: $es-spacing-xs;
        flex: 1;
        min-width: 0;
    }

    .tree-name {
        font-size: $es-font-size-sm;
        color: $es-text-primary;
        @include text-truncate;
    }

    .tree-subtitle {
        font-size: $es-font-size-xs;
        color: $es-text-muted;
    }

    // Legacy category tree classes (for compatibility)
    .category-tree-item {
        padding: 0.25rem 0;
    }

    .category-tree-node {
        display: flex;
        align-items: center;
        gap: $es-spacing-sm;
        padding: $es-spacing-xs $es-spacing-sm;
        border-radius: $es-radius-sm;
        cursor: pointer;
        transition: background-color $es-transition-fast;

        &:hover {
            background: $es-bg-hover;
        }

        &.selected {
            background: $es-primary-light;
        }
    }

    .category-tree-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        color: $es-text-muted;
        transition: transform $es-transition-fast;

        &.expanded {
            transform: rotate(90deg);
        }

        &.empty {
            visibility: hidden;
        }
    }

    .category-tree-checkbox {
        flex-shrink: 0;
        width: 16px;
        height: 16px;
        border: 2px solid $es-border-dark;
        border-radius: 3px;
        transition: all $es-transition-fast;

        &.checked {
            background: $es-primary;
            border-color: $es-primary;

            &::after {
                content: '\2713';
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
                color: $es-white;
                font-size: 10px;
            }
        }

        &.indeterminate {
            background: $es-primary;
            border-color: $es-primary;

            &::after {
                content: '\2212';
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
                color: $es-white;
                font-size: 10px;
            }
        }
    }

    .category-tree-name {
        flex: 1;
        font-size: $es-font-size-sm;
        color: $es-text-primary;
        @include text-truncate;
    }

    .category-tree-count {
        font-size: $es-font-size-xs;
        color: $es-text-muted;
    }

    .category-tree-children {
        margin-left: 24px;
    }

    // Search history
    .search-history-list {
        padding: $es-spacing-sm;
    }

    .history-item {
        display: flex;
        align-items: center;
        gap: $es-spacing-sm;
        padding: $es-spacing-sm;
        border-radius: $es-radius-sm;
        cursor: pointer;
        transition: background-color $es-transition-fast;

        &:hover {
            background: $es-bg-hover;
        }

        > i {
            color: $es-text-muted;
            font-size: 14px;
        }
    }

    .history-query {
        flex: 1;
        font-size: $es-font-size-sm;
        color: $es-text-primary;
    }

    .btn-delete-history {
        @include button-reset;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        color: $es-text-muted;
        border-radius: $es-radius-sm;
        opacity: 0;
        transition: all $es-transition-fast;

        .history-item:hover & {
            opacity: 1;
        }

        &:hover {
            background: $es-danger-light;
            color: $es-danger;
        }

        i {
            font-size: 12px;
        }
    }

    // Filter panel
    .filter-panel {
        display: none;
        padding: $es-spacing-md;
        background: $es-slate-50;
        border-bottom: 1px solid $es-border-color;

        &.show {
            display: block;
        }
    }

    .filter-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: $es-spacing-sm;
        margin-bottom: $es-spacing-sm;

        &:last-child {
            margin-bottom: 0;
        }
    }

    // View mode select
    .view-mode-select {
        @include input-base;
        padding: 0.25rem 0.5rem;
        font-size: $es-font-size-xs;
        min-width: 80px;
    }
}

// =============================================================================
// Global dropdown styles (when appended to body instead of inside wrapper)
// Duplicates key styles for when dropdown is outside .entity-selector-trait
// =============================================================================
body > .target-search-dropdown,
.target-search-dropdown {
    @include dropdown-container;
    display: none;
    width: 600px;
    max-width: calc(100vw - 40px);

    &.show {
        display: block;
    }

    // Dropdown header
    .dropdown-header {
        display: flex;
        align-items: center;
        gap: $es-spacing-sm;
        padding: $es-spacing-md;
        background: $es-bg-header;
        border-bottom: 1px solid $es-border-color;
        border-radius: $es-radius-lg $es-radius-lg 0 0;
        flex-wrap: wrap;
    }

    .results-count {
        font-size: $es-font-size-sm;
        font-weight: $es-font-weight-semibold;
        color: $es-text-primary;
        white-space: nowrap;
    }

    .dropdown-actions {
        display: flex;
        align-items: center;
        gap: $es-spacing-xs;
        flex-wrap: wrap;
        flex: 1;
        justify-content: flex-end;
    }

    .btn-select-all,
    .btn-clear-selection {
        @include button-reset;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.25rem 0.5rem;
        font-size: $es-font-size-xs;
        color: $es-text-secondary;
        background: $es-white;
        border: 1px solid $es-border-color;
        border-radius: $es-radius-sm;
        cursor: pointer;
        transition: all $es-transition-fast;

        &:hover {
            background: $es-bg-hover;
            border-color: $es-slate-300;
        }

        kbd {
            font-size: 0.65rem;
            padding: 0.125rem 0.25rem;
            background: $es-slate-100;
            border-radius: 2px;
            color: $es-text-muted;
        }
    }

    .sort-controls {
        display: flex;
        align-items: center;
        // No gap - elements are connected
    }

    .sort-field-select {
        @include input-base;
        padding: 0.25rem 0.5rem;
        font-size: $es-font-size-xs;
        min-width: 80px;
        height: 28px;  // Match btn-sort-dir height
        border-radius: $es-radius-sm 0 0 $es-radius-sm;
        border-right: none;
    }

    .btn-sort-dir {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        min-width: 38px;
        flex-shrink: 0;
        height: 28px;
        padding: 0;
        margin: 0;
        color: $es-text-muted;
        background: $es-white;
        border: 1px solid $es-border-color;
        border-radius: 0 $es-radius-sm $es-radius-sm 0;
        cursor: pointer;
        transition: all $es-transition-fast;

        i {
            font-size: 14px;
        }

        &:hover {
            background: $es-bg-hover;
            color: $es-text-primary;
        }

        &.active {
            background: $es-primary-light;
            border-color: $es-primary;
            color: $es-primary;
        }
    }

    .view-mode-select {
        @include input-base;
        padding: 0.25rem 0.5rem;
        font-size: $es-font-size-xs;
        min-width: 80px;
        margin-left: 0.25rem;
    }

    .btn-toggle-filters,
    .btn-show-history {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        min-width: 32px;
        flex-shrink: 0;
        height: 28px;
        padding: 0;
        margin: 0;
        color: $es-text-muted;
        background: $es-white;
        border: 1px solid $es-border-color;
        border-radius: $es-radius-sm;
        cursor: pointer;
        transition: all $es-transition-fast;

        i {
            font-size: 14px;
        }

        &:hover {
            background: $es-bg-hover;
            color: $es-text-primary;
        }

        &.active {
            background: $es-primary-light;
            border-color: $es-primary;
            color: $es-primary;
        }
    }

    .refine-compact {
        display: flex;
        align-items: center;
        // No gap - elements are connected

        // Connected to refine-input
        .btn-refine-negate {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            min-width: 32px;
            flex-shrink: 0;
            height: 28px;
            padding: 0;
            margin: 0;
            color: $es-text-muted;
            background: $es-white;
            border: 1px solid $es-border-color;
            border-right: none;
            border-radius: $es-radius-sm 0 0 $es-radius-sm;
            cursor: pointer;
            transition: all $es-transition-fast;

            &:hover {
                background: $es-bg-hover;
                color: $es-text-primary;
            }

            &.active {
                background: $es-danger-light;
                color: $es-danger;
                border-color: $es-danger;
            }
        }

        .refine-input {
            @include input-base;
            width: 100px;
            padding: 0.25rem 0.5rem;
            font-size: $es-font-size-xs;
            border-radius: 0 $es-radius-sm $es-radius-sm 0;
        }

        .btn-clear-refine {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            padding: 0;
            margin: 0;
            margin-left: -1px;  // Overlap input border when visible
            color: $es-text-muted;
            background: $es-white;
            border: 1px solid $es-border-color;
            border-radius: 0 $es-radius-sm $es-radius-sm 0;
            cursor: pointer;
            transition: all $es-transition-fast;

            &:hover {
                background: $es-bg-hover;
                color: $es-text-primary;
            }
        }
    }

    // Filter panel
    .filter-panel {
        display: none;
        padding: $es-spacing-md;
        background: $es-slate-50;
        border-bottom: 1px solid $es-border-color;

        &.show {
            display: block;
        }
    }

    .filter-row {
        display: flex;
        align-items: center;
        gap: $es-spacing-sm;
        flex-wrap: wrap;
        margin-bottom: $es-spacing-sm;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .filter-label {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        font-size: $es-font-size-xs;
        color: $es-text-secondary;
        cursor: pointer;

        input[type="checkbox"] {
            margin: 0;
        }
    }

    .filter-price-range {
        display: flex;
        align-items: center;
        gap: 0.25rem;

        .filter-price-label {
            font-size: $es-font-size-xs;
            color: $es-text-muted;
        }

        .filter-price-min,
        .filter-price-max {
            @include input-base;
            width: 70px;
            padding: 0.25rem 0.5rem;
            font-size: $es-font-size-xs;
        }

        .filter-price-sep {
            color: $es-text-muted;
        }
    }

    .btn-clear-filters {
        @include button-reset;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        color: $es-text-muted;
        border-radius: $es-radius-sm;
        cursor: pointer;
        margin-left: auto;

        &:hover {
            background: $es-slate-200;
            color: $es-text-primary;
        }
    }

    // Multi-row filters
    .filter-row-multi {
        flex-direction: column;
        align-items: stretch;
        gap: $es-spacing-sm;
    }

    .filter-subrow {
        display: flex;
        align-items: center;
        gap: $es-spacing-sm;
        flex-wrap: wrap;
    }

    .filter-range-group,
    .filter-date-group,
    .filter-select-group {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .filter-range-label,
    .filter-date-label,
    .filter-select-label,
    .filter-row-label {
        font-size: $es-font-size-xs;
        color: $es-text-muted;
        white-space: nowrap;

        i {
            margin-right: 0.25rem;
        }
    }

    .filter-range-sep {
        color: $es-text-muted;
    }

    .filter-product-count-min,
    .filter-product-count-max,
    .filter-sales-min,
    .filter-sales-max,
    .filter-turnover-min,
    .filter-turnover-max,
    .filter-date-add-from,
    .filter-date-add-to,
    .filter-last-product-from,
    .filter-last-product-to {
        @include input-base;
        width: 70px;
        padding: 0.25rem 0.5rem;
        font-size: $es-font-size-xs;
    }

    .filter-depth-select,
    .filter-attribute-group-select,
    .filter-feature-group-select {
        @include input-base;
        padding: 0.25rem 0.5rem;
        font-size: $es-font-size-xs;
        min-width: 100px;
    }

    .filter-attributes-container,
    .filter-features-container,
    .filter-values-container {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    // Filter group toggle buttons (attribute/feature groups)
    .filter-group-toggle {
        @include button-reset;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.25rem 0.5rem;
        font-size: $es-font-size-xs;
        color: $es-text-secondary;
        background: $es-white;
        border: 1px solid $es-border-color;
        border-radius: $es-radius-sm;
        cursor: pointer;
        transition: all $es-transition-fast;

        &:hover {
            background: $es-bg-hover;
            border-color: $es-slate-300;
        }

        &.active {
            background: $es-primary-light;
            border-color: $es-primary;
            color: $es-primary;

            .toggle-count {
                color: $es-primary;
            }
        }

        &.has-selection {
            border-color: $es-success;
            background: rgba($es-success, 0.05);

            .toggle-count {
                color: $es-success;
                font-weight: $es-font-weight-semibold;
            }
        }

        .toggle-name {
            font-weight: $es-font-weight-medium;
        }

        // Count with eye icon (like group-count-badge)
        .toggle-count {
            display: inline-flex;
            align-items: center;
            gap: 0.125rem;
            color: $es-text-muted;
            font-size: 0.65rem;

            i {
                font-size: 10px;
                color: $es-primary;
            }

            // Clickable preview badge
            &.clickable {
                cursor: pointer;
                padding: 0.125rem 0.25rem;
                border-radius: $es-radius-sm;
                transition: all $es-transition-fast;

                &:hover {
                    background: rgba($es-primary, 0.1);
                    color: $es-primary;

                    i {
                        color: $es-primary;
                    }
                }

                &.popover-open {
                    background: $es-primary;
                    color: $es-white;

                    i {
                        color: $es-white;
                    }
                }

                &.loading {
                    i {
                        animation: spin 0.6s linear infinite;
                    }
                }
            }
        }
    }

    // Filter value chips
    .filter-chip {
        @include button-reset;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.25rem 0.5rem;
        font-size: $es-font-size-xs;
        color: $es-text-secondary;
        background: $es-slate-100;
        border: 1px solid transparent;
        border-radius: $es-radius-sm;
        cursor: pointer;
        transition: all $es-transition-fast;

        &:hover {
            background: $es-slate-200;
        }

        &.active {
            background: $es-primary;
            color: $es-white;
        }
    }

    // Filter attribute chip (specific)
    .filter-attr-chip,
    .filter-feat-chip {
        @extend .filter-chip;
    }

    // Filter row for values (expandable)
    .filter-row-values {
        display: flex;
        align-items: center;
        gap: $es-spacing-sm;
        padding: $es-spacing-sm;
        background: $es-white;
        border: 1px solid $es-border-color;
        border-radius: $es-radius-sm;

        .filter-values-container {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.25rem;
            flex: 1;
        }

        .filter-values-label {
            font-size: $es-font-size-xs;
            font-weight: $es-font-weight-semibold;
            color: $es-text-secondary;
            white-space: nowrap;
        }

        .btn-close-values {
            @include button-reset;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            width: 20px;
            height: 20px;
            color: $es-text-muted;
            border-radius: $es-radius-sm;

            &:hover {
                background: $es-slate-200;
                color: $es-text-primary;
            }
        }
    }

    // Filter chip name and count
    .chip-name {
        font-weight: $es-font-weight-medium;
    }

    .chip-count {
        font-size: 0.6rem;
        color: $es-text-muted;
        margin-left: 0.125rem;
    }

    .filter-chip.active .chip-count {
        color: rgba(255, 255, 255, 0.8);
    }

    // Dropdown content
    .dropdown-content {
        max-height: 400px;
        overflow-y: auto;
        @include custom-scrollbar;
    }

    .dropdown-items {
        display: flex;
        flex-direction: column;
        gap: $es-spacing-xs;
        padding: $es-spacing-sm;
    }

    .item-checkbox {
        flex-shrink: 0;
        width: 16px;
        height: 16px;
        border: 2px solid $es-border-dark;
        border-radius: 3px;
        transition: all $es-transition-fast;

        .dropdown-item.selected & {
            background: $es-primary;
            border-color: $es-primary;
        }
    }

    .item-image {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        object-fit: cover;
        border-radius: $es-radius-sm;
        background: $es-slate-100;
    }

    .item-info {
        flex: 1;
        min-width: 0;
    }

    .item-name {
        font-size: $es-font-size-sm;
        font-weight: $es-font-weight-medium;
        color: $es-text-primary;
        @include text-truncate;
    }

    .item-meta {
        font-size: $es-font-size-xs;
        color: $es-text-muted;
        @include text-truncate;
    }

    // Dropdown footer - unified structure
    .dropdown-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: $es-spacing-md;
        padding: $es-spacing-sm $es-spacing-md;
        background: $es-slate-50;
        border-top: 1px solid $es-border-color;
        border-radius: 0 0 $es-radius-lg $es-radius-lg;
    }

    .dropdown-footer-left {
        display: flex;
        align-items: center;
        gap: $es-spacing-xs;
        font-size: $es-font-size-xs;
        color: $es-text-muted;

        .load-label {
            color: $es-text-muted;
        }

        .load-more-select,
        select.load-more-select {
            appearance: none;
            padding: 0.25rem 1.5rem 0.25rem 0.5rem;
            border: 1px solid $es-border-color;
            border-radius: $es-radius-sm;
            background: $es-white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23666' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right 0.4rem center;
            background-size: 8px;
            font-size: $es-font-size-xs;
            color: $es-text-secondary;
            cursor: pointer;
            min-width: 55px;

            &:hover {
                border-color: $es-primary;
            }

            &:focus {
                outline: none;
                border-color: $es-primary;
            }
        }

        .remaining-text {
            color: $es-text-muted;

            strong {
                color: $es-text-secondary;
                font-weight: $es-font-weight-semibold;
            }
        }
    }

    .dropdown-footer-right {
        display: flex;
        align-items: center;
        gap: $es-spacing-sm;
    }

    .dropdown-action-btn {
        @include button-reset;
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.375rem 0.75rem;
        font-size: $es-font-size-xs;
        font-weight: $es-font-weight-medium;
        border-radius: $es-radius-sm;
        transition: all $es-transition-fast;
        white-space: nowrap;

        .btn-shortcut {
            font-size: 10px;
            padding: 0.125rem 0.25rem;
            background: rgba(0, 0, 0, 0.08);
            border-radius: 3px;
            font-weight: $es-font-weight-normal;
        }

        &.btn-cancel {
            color: $es-text-secondary;
            background: $es-white;
            border: 1px solid $es-border-color;

            &:hover {
                background: $es-slate-100;
                border-color: $es-border-dark;
            }
        }

        &.btn-apply,
        &.btn-save {
            color: $es-white;
            background: $es-primary;
            border: 1px solid $es-primary;

            &:hover {
                background: $es-primary-hover;
                border-color: $es-primary-hover;
            }

            .btn-shortcut {
                background: rgba(255, 255, 255, 0.2);
            }
        }
    }

    .dropdown-footer-info {
        font-size: $es-font-size-xs;
        color: $es-text-muted;
    }

    // Legacy button support
    .btn-cancel-dropdown {
        @include button-reset;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.375rem 0.75rem;
        font-size: $es-font-size-sm;
        color: $es-white;
        background: $es-primary;
        border: 1px solid $es-primary;
        border-radius: $es-radius-sm;
        cursor: pointer;

        &:hover {
            background: $es-primary-hover;
            border-color: $es-primary-hover;
        }

        i {
            font-size: 10px;
        }

        kbd {
            font-size: 0.65rem;
            padding: 0.125rem 0.25rem;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 2px;
            color: rgba(255, 255, 255, 0.8);
        }
    }

    // Filter chips in dropdown
    .filter-chips-row {
        display: flex;
        flex-wrap: wrap;
        gap: $es-spacing-xs;
        padding: $es-spacing-xs $es-spacing-md;
        border-bottom: 1px solid $es-border-color;
    }

    .filter-chip {
        @include chip;
    }

    // Empty and loading states
    .dropdown-empty,
    .dropdown-loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: $es-spacing-xl;
        text-align: center;
        color: $es-text-muted;
        font-size: $es-font-size-sm;

        i {
            font-size: 2rem;
            opacity: 0.5;
            margin-bottom: $es-spacing-sm;
        }
    }

    // Search history panel
    .search-history-panel {
        display: none;
        padding: $es-spacing-sm;
        background: $es-white;
        border-bottom: 1px solid $es-border-color;

        &.show {
            display: block;
        }
    }

    .history-item {
        display: flex;
        align-items: center;
        gap: $es-spacing-sm;
        padding: $es-spacing-xs $es-spacing-sm;
        border-radius: $es-radius-sm;
        cursor: pointer;
        transition: background $es-transition-fast;

        &:hover {
            background: $es-bg-hover;
        }

        i {
            color: $es-text-muted;
            font-size: $es-font-size-sm;
        }

        span {
            flex: 1;
            font-size: $es-font-size-sm;
            color: $es-text-primary;
        }

        .btn-remove-history,
        .btn-delete-history {
            @include button-reset;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            color: $es-text-muted;
            border-radius: $es-radius-sm;
            transition: all $es-transition-fast;

            &:hover {
                background: $es-slate-200;
                color: $es-danger;
            }
        }
    }

    // Search history list container
    .search-history-list {
        display: flex;
        flex-direction: column;
        gap: $es-spacing-xs;
    }

    // Results header (for list view columns)
    .results-header {
        display: flex;
        align-items: center;
        gap: $es-spacing-sm;
        padding: $es-spacing-xs $es-spacing-md;
        background: $es-slate-100;
        border-bottom: 1px solid $es-border-color;
        font-size: $es-font-size-xs;
        font-weight: $es-font-weight-semibold;
        color: $es-text-secondary;

        .header-spacer {
            width: 58px; // checkbox + image width
            flex-shrink: 0;
        }

        .header-col {
            flex-shrink: 0;
            width: 70px;
            text-align: right;
        }

        .header-col-name {
            flex: 1;
            text-align: left;
        }
    }

    // Results container
    .dropdown-results {
        padding: 0 $es-spacing-sm;
        background: $es-white;
        min-height: 200px;
    }

    // Dropdown item (search result)
    .dropdown-item {
        position: relative;
        display: flex;
        align-items: center;
        gap: $es-spacing-sm;
        padding: $es-spacing-sm 0;
        background: $es-white;
        border: none;
        border-bottom: 1px solid $es-border-color;
        border-radius: 0;
        cursor: pointer;
        transition: background $es-transition-fast;

        &:last-child {
            border-bottom: none;
        }

        &:hover {
            background: $es-bg-hover;
        }

        &.selected {
            background: $es-primary-light;

            .result-checkbox {
                background: $es-primary;
                border-color: $es-primary;
                color: $es-white;

                i {
                    display: block;
                }
            }
        }

        &.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
    }

    // Checkbox indicator
    .result-checkbox {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        background: $es-white;
        border: 2px solid $es-border-dark;
        border-radius: 3px;
        transition: all $es-transition-fast;

        i {
            display: none;
            font-size: 10px;
        }
    }

    // View mode classes (applied to dropdown container) - no gap/padding for shared borders
    &.view-cols-2 .dropdown-results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; padding: 0; border-top: 1px solid $es-border-color; border-left: 1px solid $es-border-color; }
    &.view-cols-3 .dropdown-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 0; border-top: 1px solid $es-border-color; border-left: 1px solid $es-border-color; }
    &.view-cols-4 .dropdown-results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 0; border-top: 1px solid $es-border-color; border-left: 1px solid $es-border-color; }
    &.view-cols-5 .dropdown-results { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; padding: 0; border-top: 1px solid $es-border-color; border-left: 1px solid $es-border-color; }
    &.view-cols-6 .dropdown-results { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; padding: 0; border-top: 1px solid $es-border-color; border-left: 1px solid $es-border-color; }
    &.view-cols-7 .dropdown-results { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; padding: 0; border-top: 1px solid $es-border-color; border-left: 1px solid $es-border-color; }
    &.view-cols-8 .dropdown-results { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0; padding: 0; border-top: 1px solid $es-border-color; border-left: 1px solid $es-border-color; }

    // Grid view item styling (compact cards with shared borders)
    &.view-cols-2,
    &.view-cols-3,
    &.view-cols-4,
    &.view-cols-5,
    &.view-cols-6,
    &.view-cols-7,
    &.view-cols-8 {
        .dropdown-item {
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: $es-spacing-sm;
            border: none;
            border-right: 1px solid $es-border-color;
            border-bottom: 1px solid $es-border-color;
            border-radius: 0;

            .result-checkbox {
                position: absolute;
                top: $es-spacing-xs;
                left: $es-spacing-xs;
            }

            .result-image,
            .result-icon {
                width: 48px;
                height: 48px;
                margin-bottom: $es-spacing-xs;
            }

            .result-info {
                width: 100%;
            }

            .result-name {
                font-size: $es-font-size-xs;
                line-height: 1.3;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

            .result-subtitle {
                display: none;
            }

            // Show compact product info in grid
            .result-col {
                display: none;
            }

            .result-grid-info {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 0.25rem;
                margin-top: $es-spacing-xs;
                font-size: 0.65rem;

                .grid-price {
                    color: $es-text-primary;
                    font-weight: $es-font-weight-semibold;
                }

                .grid-stock {
                    color: $es-text-muted;

                    &.stock-out { color: $es-danger; }
                    &.stock-low { color: $es-warning; }
                }

                .grid-discount {
                    color: $es-success;
                    font-weight: $es-font-weight-medium;
                }
            }
        }

        // Hide results header in grid views
        .results-header {
            display: none;
        }
    }

    // Remove right border from last item in each row (per column count)
    &.view-cols-2 .dropdown-results .dropdown-item:nth-child(2n) { border-right: none; }
    &.view-cols-3 .dropdown-results .dropdown-item:nth-child(3n) { border-right: none; }
    &.view-cols-4 .dropdown-results .dropdown-item:nth-child(4n) { border-right: none; }
    &.view-cols-5 .dropdown-results .dropdown-item:nth-child(5n) { border-right: none; }
    &.view-cols-6 .dropdown-results .dropdown-item:nth-child(6n) { border-right: none; }
    &.view-cols-7 .dropdown-results .dropdown-item:nth-child(7n) { border-right: none; }
    &.view-cols-8 .dropdown-results .dropdown-item:nth-child(8n) { border-right: none; }

    // Smaller items for higher column counts
    &.view-cols-5,
    &.view-cols-6,
    &.view-cols-7,
    &.view-cols-8 {
        .dropdown-item {
            .result-image,
            .result-icon {
                width: 40px;
                height: 40px;
            }

            .result-name {
                font-size: 0.65rem;
            }
        }
    }

    // Product-specific result item
    .result-item-product {
        display: flex;
        align-items: center;
        gap: $es-spacing-sm;
        flex: 1;
        min-width: 0;
    }

    .result-item-image,
    .result-image {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        overflow: hidden;
        border-radius: $es-radius-sm;
        background: $es-slate-100;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .result-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        background: $es-slate-100;
        border-radius: $es-radius-sm;
        color: $es-text-muted;

        i {
            font-size: 16px;
        }
    }

    .result-item-info,
    .result-info {
        flex: 1;
        min-width: 0;
    }

    .result-item-name,
    .result-name {
        font-size: $es-font-size-sm;
        font-weight: $es-font-weight-medium;
        color: $es-text-primary;
        @include text-truncate;
    }

    .result-item-meta,
    .result-subtitle {
        font-size: $es-font-size-xs;
        color: $es-text-muted;
    }

    .subtitle-line {
        @include text-truncate;
    }

    .subtitle-line-primary {
        color: $es-text-secondary;
    }

    .subtitle-line-secondary {
        color: $es-text-muted;
        font-size: 11px;
    }

    // Result columns (for product list view)
    .result-col {
        flex-shrink: 0;
        width: 70px;
        text-align: right;
        font-size: $es-font-size-xs;
    }

    .result-col-price {
        color: $es-text-secondary;
    }

    .result-col-sale {
        color: $es-danger;
        font-weight: $es-font-weight-semibold;
    }

    .result-col-stock {
        .col-value {
            &.stock-ok {
                color: $es-success;
            }

            &.stock-low {
                color: $es-warning;
            }

            &.stock-out {
                color: $es-danger;
            }
        }
    }

    .result-col-sales {
        color: $es-text-muted;
    }

    .col-value {
        display: block;
    }

    // Result checkbox
    .result-item-checkbox,
    .result-checkbox {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        border: 2px solid $es-border-dark;
        border-radius: $es-radius-sm;
        transition: all $es-transition-fast;

        i {
            display: none;
            font-size: 10px;
            color: $es-white;
        }

        .dropdown-result-item.selected &,
        .dropdown-item.selected & {
            background: $es-primary;
            border-color: $es-primary;

            i {
                display: block;
            }
        }
    }

    // No results state
    .no-results {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: $es-spacing-sm;
        padding: $es-spacing-xl;
        color: $es-text-muted;
        font-size: $es-font-size-sm;

        i {
            font-size: 1.25rem;
            opacity: 0.5;
        }
    }

    // Load more controls
    .load-more-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: $es-spacing-sm;
        padding: $es-spacing-sm $es-spacing-md;
        font-size: $es-font-size-xs;
        color: $es-text-muted;

        .load-more-label,
        .load-more-of {
            white-space: nowrap;
        }

        .remaining-count {
            font-weight: $es-font-weight-semibold;
            color: $es-text-secondary;
        }

        .load-more-select {
            @include input-base;
            padding: 0.25rem 0.5rem;
            font-size: $es-font-size-xs;
            min-width: 60px;
        }

        .btn-load-more {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: $es-spacing-xs;
            margin: 0;
            border: none;
            color: $es-primary;
            background: $es-primary-light !important;
            border-radius: $es-radius-sm;
            cursor: pointer;
            transition: all $es-transition-fast;
            font: inherit;

            i {
                font-size: 14px;
            }

            &:hover {
                background: rgba($es-primary, 0.2) !important;
            }
        }
    }

    // Load more button
    .dropdown-load-more {
        display: flex;
        justify-content: center;
        padding: $es-spacing-md;
        border-top: 1px solid $es-border-color;

        .load-more-btn {
            @include button-reset;
            display: inline-flex;
            align-items: center;
            gap: $es-spacing-xs;
            padding: $es-spacing-sm $es-spacing-md;
            font-size: $es-font-size-sm;
            font-weight: $es-font-weight-medium;
            color: $es-primary;
            background: $es-primary-light;
            border-radius: $es-radius-md;
            transition: all $es-transition-fast;

            &:hover {
                background: rgba($es-primary, 0.2);
            }

            &.loading {
                opacity: 0.7;
                cursor: wait;
            }
        }
    }

    // Dropdown body
    .dropdown-body {
        max-height: 400px;
        overflow-y: auto;
        @include custom-scrollbar;
    }

    // Tree view styles (for categories)
    .tree-container {
        padding: $es-spacing-sm;
    }

    .tree-loading {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: $es-spacing-sm;
        padding: $es-spacing-xl;
        color: $es-text-muted;
        font-size: $es-font-size-sm;

        i {
            animation: spin 0.6s linear infinite;
        }
    }

    .tree-item {
        display: flex;
        align-items: center;
        gap: $es-spacing-xs;
        padding: 0.375rem $es-spacing-sm;
        border-radius: $es-radius-sm;
        cursor: pointer;
        transition: background-color $es-transition-fast;

        &:hover {
            background: $es-bg-hover;
        }

        &.selected {
            background: $es-primary-light;

            .tree-checkbox {
                background: $es-primary;
                border-color: $es-primary;

                i {
                    display: block;
                }
            }
        }
    }

    // tree-toggle, btn-select-children, tree-checkbox, tree-icon styles in _tree.scss

    .tree-info {
        display: flex;
        align-items: center;
        gap: $es-spacing-xs;
        flex: 1;
        min-width: 0;
    }

    .tree-name {
        font-size: $es-font-size-sm;
        color: $es-text-primary;
        @include text-truncate;
    }

    .tree-subtitle {
        font-size: $es-font-size-xs;
        color: $es-text-muted;
    }
}

// ============================================================================
// Standalone dropdown styles (for when dropdown is appended to body)
// These selectors work because .target-search-dropdown is on the dropdown itself
// ============================================================================

.target-search-dropdown {
    // Results container - scrollable
    .dropdown-results {
        max-height: 400px;
        overflow-y: auto;
        padding: 0 $es-spacing-sm;
        @include custom-scrollbar;
    }

    // Results header (for list view columns)
    .results-header {
        display: flex;
        align-items: center;
        gap: $es-spacing-sm;
        padding: $es-spacing-xs $es-spacing-md;
        background: $es-slate-100;
        border-bottom: 1px solid $es-border-color;
        font-size: $es-font-size-xs;
        font-weight: $es-font-weight-semibold;
        color: $es-text-secondary;

        .header-spacer {
            width: 58px; // checkbox + image width
            flex-shrink: 0;
        }

        .header-col {
            flex-shrink: 0;
            width: 70px;
            text-align: right;
        }

        .header-col-name {
            flex: 1;
            text-align: left;
        }
    }

    // Hide results-header by default, show only for products in list view
    &:not(.view-list) .results-header,
    &.view-tree .results-header {
        display: none;
    }

    // Result item for products
    .result-item-product {
        display: flex;
        align-items: center;
        gap: $es-spacing-sm;
        flex: 1;
        min-width: 0;
    }

    // Result columns for product data
    .result-col {
        flex-shrink: 0;
        width: 70px;
        text-align: right;
        font-size: $es-font-size-xs;
    }

    .result-col-price {
        color: $es-text-secondary;
    }

    .result-col-sale {
        color: $es-danger;
        font-weight: $es-font-weight-semibold;
    }

    .result-col-stock {
        .col-value {
            &.stock-ok { color: $es-success; }
            &.stock-low { color: $es-warning; }
            &.stock-out { color: $es-danger; }
        }
    }

    .result-col-sales {
        color: $es-text-muted;
    }

    // Dropdown item styling
    .dropdown-item {
        display: flex;
        align-items: center;
        gap: $es-spacing-sm;
        padding: 0;
        border: none;
        border-bottom: 1px solid $es-border-color;
        border-radius: 0;
        cursor: pointer;
        transition: background-color $es-transition-fast;

        &:last-child {
            border-bottom: none;
        }

        &:hover {
            background: $es-bg-hover;
        }

        &.selected {
            background: $es-primary-light;
        }
    }

    // Result checkbox styling
    .result-checkbox {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        border: 2px solid $es-border-dark;
        border-radius: 3px;
        transition: all $es-transition-fast;

        i {
            font-size: 10px;
            color: transparent;
        }

        .dropdown-item.selected & {
            background: $es-primary;
            border-color: $es-primary;

            i {
                color: $es-white;
            }
        }
    }

    // Result image
    .result-image {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        overflow: hidden;
        border-radius: $es-radius-sm;
        background: $es-slate-100;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    // Result icon (for non-image entities)
    .result-icon {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: $es-slate-100;
        border-radius: $es-radius-sm;

        i {
            font-size: 16px;
            color: $es-text-muted;
        }
    }

    // Result info container
    .result-info {
        flex: 1;
        min-width: 0;
    }

    .result-name {
        font-size: $es-font-size-sm;
        font-weight: $es-font-weight-medium;
        color: $es-text-primary;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .result-subtitle {
        font-size: $es-font-size-xs;
        color: $es-text-muted;
    }

    .subtitle-line {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .subtitle-line-primary {
        color: $es-text-secondary;
    }

    .subtitle-line-secondary {
        color: $es-text-muted;
        font-size: 11px;
    }

    // Hide columns in grid/tree views
    &[class*="view-cols-"] .result-col,
    &.view-tree .result-col {
        display: none;
    }

    // Entity search box - full width
    .entity-search-box {
        display: flex;
        align-items: center;
        gap: $es-spacing-sm;
        width: 100%;
        padding: $es-spacing-sm $es-spacing-md;
        background: $es-white;
        border: none;
        border-bottom: 1px solid $es-border-color;
        border-radius: 0;

        .entity-search-icon {
            color: $es-text-muted;
            flex-shrink: 0;
            margin-left: $es-spacing-xs;
        }

        // Override Bootstrap/parent form input styles
        input.entity-search-input,
        input.entity-search-input[type="text"] {
            flex: 1;
            min-width: 0;
            width: auto !important;
            max-width: none !important;
            height: auto;
            padding: 0;
            margin: 0;
            border: none !important;
            outline: none;
            background: transparent !important;
            font-size: $es-font-size-sm;
            color: $es-text-primary;
            box-shadow: none !important;

            &::placeholder {
                color: $es-text-muted;
            }

            &:focus {
                border: none !important;
                box-shadow: none !important;
                outline: none;
            }
        }

        .search-loading {
            color: $es-text-muted;
        }
    }
}

// Body-level dropdown (when appended to body for z-index)
body > .target-search-dropdown {
    // Override dropdown-item border when inside body-appended dropdown
    .dropdown-item {
        border: none;
        border-radius: 0;

        &:not(:last-child) {
            border-bottom: 1px solid $es-border-color;
        }
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}