/**
 * FlowX4 Autocomplete Component
 * =============================
 */

/* ============================================
   AUTOCOMPLETE CONTAINER
   ============================================ */
.symbol-autocomplete {
    position: relative;
    width: 100%;
    max-width: 300px;
}

.symbol-autocomplete__input {
    width: 100%;
}

/* ============================================
   DROPDOWN
   ============================================ */
.symbol-autocomplete__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 300px;
    margin-top: var(--space-1);
    overflow-y: auto;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);
}

/* .symbol-autocomplete__dropdown.hidden - используется .hidden из utilities.css */

/* ============================================
   DROPDOWN ITEMS
   ============================================ */
.symbol-autocomplete__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.symbol-autocomplete__item:hover {
    background: var(--color-surface-hover);
}

.symbol-autocomplete__item--selected {
    background: var(--color-surface-active);
}

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

.symbol-autocomplete__item--disabled:hover {
    background: transparent;
}

/* ============================================
   ITEM CONTENT
   ============================================ */
.symbol-autocomplete__code {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.symbol-autocomplete__added {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    padding: var(--space-1) var(--space-2);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-sm);
}

/* ============================================
   SECTION HEADERS (grouped by exchange)
   ============================================ */
.symbol-autocomplete__section-header {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--color-border-default);
    background: var(--color-bg-tertiary);
}

.symbol-autocomplete__section-header:not(:first-child) {
    border-top: 1px solid var(--color-border-default);
    margin-top: var(--space-1);
}

/* ============================================
   EMPTY STATE
   ============================================ */
.symbol-autocomplete__empty {
    padding: var(--space-4);
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

/* ============================================
   SYMBOL DISPLAY IN TABLE
   ============================================ */
.symbol-code-display {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-accent-primary);
}