/* Add New Symbol Control - Reusable Component */
/* Exchange dropdown + Symbol input + Add button */
/* Uses glow-system.css variables for consistent hover effects */
/* Hint label above Add Symbol controls */
.hint-label {
    display: none;
    font-size: 0.8em;
    font-weight: 800;
    color: #6bb6ff;
    letter-spacing: 0.05em;
    padding: 0 0 8px 2px;
    margin: 0;
    transition: all 0.3s ease;
    text-shadow: 0 0 12px rgba(107, 182, 255, 0.4);
}
.hint-label.active {
    display: block;
}
.hint-label.hidden {
    display: none;
}
.hint-label::before {
    content: '1';
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid rgba(107, 182, 255, 0.25);
    text-align: center;
    line-height: 16px;
    font-weight: 900;
    font-size: 0.75em;
    margin-right: 6px;
    color: #fff;
    box-shadow: 0 0 8px rgba(107, 182, 255, 0.1), inset 0 0 4px rgba(107, 182, 255, 0.05);
    transition: all 0.3s ease;
}
.hint-label.active::before {
    content: '1';
    color: #fff;
    border-color: #6bb6ff;
    box-shadow: 0 0 12px rgba(107, 182, 255, 0.3), inset 0 0 8px rgba(107, 182, 255, 0.1);
}
.exchange-symbol-container {
    display: none !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    align-items: stretch !important;
    position: relative !important;
    left: 0 !important;
    gap: 0px !important;
    height: 44px !important;
}
.exchange-symbol-container.active {
    display: flex !important;
}
.exchange-symbol-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    flex: none !important;
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    height: 44px !important;
    padding: 0 8px !important;
    background: rgba(24, 31, 46, 0.8) !important;
    border: 2px solid #6bb6ff !important;
    border-right: none !important;
    border-radius: 4px 0 0 4px !important;
    transition: border-color var(--glow-transition),
        box-shadow var(--glow-transition),
        background var(--glow-transition) !important;
    color: #6bb6ff !important;
    font-size: 0.85em !important;
    font-weight: 600 !important;
}
.exchange-symbol-select:hover {
    border-color: var(--glow-subtle-border) !important;
    box-shadow: var(--glow-subtle-shadow) !important;
    background: rgba(24, 31, 46, 0.95) !important;
}
.exchange-symbol-select:focus {
    border-color: var(--glow-medium-border) !important;
    box-shadow: none !important;
}
.exchange-symbol-input {
    box-sizing: border-box !important;
    flex: none !important;
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    height: 44px !important;
    padding: 0 8px !important;
    background: rgba(24, 31, 46, 0.8) !important;
    border: 2px solid #6bb6ff !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    font-size: 0.85em !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    outline: none !important;
    transition: border-color var(--glow-transition),
        box-shadow var(--glow-transition),
        background var(--glow-transition) !important;
}
.exchange-symbol-input:hover {
    border-color: var(--glow-subtle-border) !important;
    box-shadow: var(--glow-subtle-shadow) !important;
}
.exchange-symbol-input:focus {
    border-color: var(--glow-medium-border) !important;
    box-shadow: none !important;
}
.exchange-symbol-button {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 60px !important;
    padding: 0 12px !important;
    height: 44px !important;
    border: 2px solid #6bb6ff !important;
    border-left: none !important;
    border-radius: 0 4px 4px 0 !important;
    background: rgba(24, 31, 46, 0.8) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.85em !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color var(--glow-transition),
        box-shadow var(--glow-transition),
        background var(--glow-transition),
        color var(--glow-transition) !important;
}
.exchange-symbol-button:not(.btn-disabled) {
    cursor: pointer !important;
    background: #6bb6ff !important;
    color: #ffffff !important;
    border: 2px solid #6bb6ff !important;
    border-left: none !important;
}
.exchange-symbol-button:not(.btn-disabled):hover {
    background: #5aa8f0 !important;
    border-color: #5aa8f0 !important;
}
.exchange-symbol-button:not(.btn-disabled):active {
    box-shadow: var(--glow-strong-shadow) !important;
    background: rgba(var(--glow-blue), 0.25) !important;
}
.exchange-option {
    background: #1e293b !important;
    color: #6bb6ff !important;
}
/*
Usage:
<div class="exchange-symbol-container">
    <select id="exchangeSelect" class="form-select form-control-standard form-select-white exchange-symbol-select">
        <option value="CME" class="exchange-option">CME</option>
        <option value="NASDAQ" class="exchange-option">NSDQ</option>
        <option value="NYSE" class="exchange-option">NYSE</option>
    </select>
    <input type="text" id="symbolInput" class="symbol-input form-control-standard exchange-symbol-input" placeholder="Symbol">
    <button type="button" id="addSymbol" class="btn btn-secondary btn-control btn-disabled exchange-symbol-button" disabled>Add</button>
</div>
*/