/**
 * Financial Analytics Platform - Search & Autocomplete Styles
 * Ticker search, autocomplete dropdown, and search-related UI
 */

/* ============================================================================
   Search Box Container
   ============================================================================ */
.search-box {
    max-width: 600px;
    margin: 0 auto 20px;
}

.search-form {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.search-wrapper,
.search-container {
    position: relative;
    flex: 1;
}

.search-input-container,
.search-input-wrapper {
    position: relative;
}

/* ============================================================================
   Search Input
   ============================================================================ */
.search-input {
    width: 100%;
    background: var(--color-bg-primary);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    padding-left: 48px;
    font-size: 16px;
    color: var(--color-text-primary);
    outline: none;
    transition: all var(--transition-normal);
}

.search-input:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15);
}

.search-input::placeholder {
    color: #4b5563;
    text-transform: none;
}

/* Smaller search input variant */
.search-input-wrapper input {
    width: 100%;
    padding-left: 42px;
}

/* ============================================================================
   Search Icon
   ============================================================================ */
.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--color-text-muted);
    pointer-events: none;
    z-index: 1;
}

.search-input-wrapper .search-icon {
    left: 12px;
    width: 18px;
    height: 18px;
}

/* ============================================================================
   Search Spinner
   ============================================================================ */
.search-spinner {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid rgba(79, 70, 229, 0.3);
    border-top-color: #4f46e5;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: none;
    z-index: 2;
}

.search-input-wrapper .search-spinner {
    left: 12px;
    width: 18px;
    height: 18px;
}

.search-spinner.active {
    display: block;
}

.search-spinner.active + .search-icon,
.search-spinner.active ~ .search-icon {
    display: none;
}

@keyframes spin {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

/* ============================================================================
   Search Results Dropdown
   ============================================================================ */
.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg-primary);
    border: 2px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    max-height: 350px;
    overflow-y: auto;
    z-index: 100;
    display: none;
    text-align: left;
}

.search-results.active {
    display: block;
}

/* Smaller variant */
.search-container .search-results {
    border-width: 1px;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    max-height: 320px;
}

/* ============================================================================
   Search Result Items
   ============================================================================ */
.search-result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border);
    transition: background var(--transition-fast);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: rgba(79, 70, 229, 0.1);
}

.search-container .search-result-item {
    padding: 12px 14px;
}

/* ============================================================================
   Search Result Info
   ============================================================================ */
.search-result-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.search-result-symbol {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-success);
}

.search-container .search-result-symbol {
    font-size: 14px;
}

.search-result-name {
    font-size: 13px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-container .search-result-name {
    font-size: 12px;
}

/* ============================================================================
   Search Result Meta
   ============================================================================ */
.search-result-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    margin-left: 12px;
}

.search-result-type {
    font-size: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.search-container .search-result-type {
    padding: 2px 8px;
}

/* Type-specific colors */
.search-result-type.stock {
    background: rgba(79, 70, 229, 0.15);
    border: 1px solid rgba(79, 70, 229, 0.4);
    color: #a5b4fc;
}

.search-result-type.crypto {
    background: rgba(234, 179, 8, 0.15);
    border: 1px solid rgba(234, 179, 8, 0.4);
    color: #fcd34d;
}

.search-result-type.etf {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #86efac;
}

.search-result-type.futures,
.search-result-type.index {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.4);
    color: #93c5fd;
}

.search-result-exchange {
    font-size: 11px;
    color: var(--color-text-muted);
}

.search-container .search-result-exchange {
    font-size: 10px;
}

/* ============================================================================
   Search States
   ============================================================================ */
.search-no-results {
    padding: 18px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 14px;
}

.search-container .search-no-results {
    padding: 16px;
    font-size: 13px;
}

.search-error {
    padding: 14px 18px;
    background: var(--color-danger-bg);
    color: var(--color-danger-light);
    font-size: 13px;
}

.search-container .search-error {
    padding: 12px 16px;
    font-size: 12px;
}

.search-hint {
    padding: 12px 18px;
    text-align: center;
    color: #4b5563;
    font-size: 12px;
    border-top: 1px solid var(--color-border);
}

/* ============================================================================
   Search Button
   ============================================================================ */
.search-btn {
    padding: 16px 32px;
    font-size: 16px;
    border-radius: var(--radius-lg);
}

/* ============================================================================
   Add Ticker Button
   ============================================================================ */
.add-ticker-btn {
    background: #4f46e5;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all var(--transition-normal);
}

.add-ticker-btn:hover {
    background: #4338ca;
}

/* ============================================================================
   Ticker Search Component (Reusable)
   ============================================================================ */
.ticker-search-wrapper {
    position: relative;
    width: 100%;
}

.ticker-search-container {
    position: relative;
}

.ticker-search-input {
    padding-left: 42px !important;
    width: 100%;
}

.ticker-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--color-text-muted);
    pointer-events: none;
    z-index: 1;
}

.ticker-search-spinner {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 2px solid rgba(79, 70, 229, 0.3);
    border-top-color: #4f46e5;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: none;
    z-index: 2;
}

.ticker-search-spinner.active {
    display: block;
}

.ticker-search-spinner.active + .ticker-search-icon,
.ticker-search-spinner.active ~ .ticker-search-icon {
    display: none;
}

.ticker-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
    display: none;
    text-align: left;
}

.ticker-search-results.active {
    display: block;
}

.ticker-search-results .search-result-item {
    padding: 12px 14px;
}

.ticker-search-results .search-result-symbol {
    font-size: 14px;
}

.ticker-search-results .search-result-name {
    font-size: 12px;
}

.ticker-search-results .search-result-type {
    font-size: 9px;
    padding: 2px 8px;
}

.ticker-search-results .search-result-exchange {
    font-size: 10px;
}

.ticker-search-results .search-no-results {
    padding: 14px;
    font-size: 13px;
}

.ticker-search-results .search-hint {
    padding: 10px 14px;
    font-size: 11px;
}