/* ═══════════════════════════════════════════════════════════
   TOP BAR CONTAINER + COMMON BUTTON STYLES + LIVE PRICE TICKER
   Status indicators · shared button border/color/cursor base
   ═══════════════════════════════════════════════════════════ */

    /* TOP BAR */
    #topbar {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 50px;
        background: var(--toolbar-bg, var(--navbar-bg, var(--ui-panel)));
        border-bottom: 1px solid var(--toolbar-border, var(--ui-panel-border));
        display: flex;
        align-items: center;
        padding: 0 12px;
        z-index: 10;
        overflow: visible;  /* allow dropdowns to overflow */
    }

    .header-title-section {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1;
        min-width: 0;
        overflow: visible;
    }

    .topbar-group {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
    }

    .topbar-group-primary {
        overflow: visible;
        white-space: nowrap;
    }

    .topbar-group-secondary {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 12px;
        position: relative;
    }

    /* Drawing-toolbar toggle button â€" hidden on large desktop, shown on tablet + mobile */

    .topbar-divider {
        width: 1px;
        height: 22px;
        background: var(--ui-panel-border);
        opacity: 0.9;
        flex-shrink: 0;
    }

    .symbol-nav {
        position: relative;
        display: flex;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
    }

    /* ── Topbar live price ticker ── */
    .topbar-price-info {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        height: 38px;
        padding: 0 4px;
        flex-shrink: 0;
        gap: 1px;
    }

    .topbar-price-val {
        font-size: 14px;
        font-weight: 700;
        color: var(--ui-fg);
        letter-spacing: 0.01em;
        font-variant-numeric: tabular-nums;
        transition: color 0.25s;
        line-height: 1;
    }

    .topbar-price-val.price-up   { color: #26a69a; }
    .topbar-price-val.price-down { color: #ef5350; }

    .topbar-price-chg {
        font-size: 11px;
        font-weight: 500;
        color: #8892a4;
        letter-spacing: 0.01em;
        font-variant-numeric: tabular-nums;
        line-height: 1;
        transition: color 0.25s;
    }

    .topbar-price-chg.price-up   { color: #26a69a; }
    .topbar-price-chg.price-down { color: #ef5350; }

    @keyframes priceFlash {
        0%   { opacity: 1; }
        30%  { opacity: 0.35; }
        100% { opacity: 1; }
    }
    .topbar-price-val.flash { animation: priceFlash 0.32s ease; }

    .symbol-display-btn,
    .icon-action-btn,
    .tf-dd-btn,
    .topbar-btn {
        color: var(--ui-fg);
        cursor: pointer;
        font-family: inherit;
    }

    .icon-action-btn,
    .tf-dd-btn,
    .topbar-btn {
        border: 1px solid transparent;
        transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    }

    .symbol-display-btn {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 34px;
        min-height: 34px;
        padding: 0 12px;
        background: var(--ui-button, var(--toolbar-bg));
        border: 1px solid var(--ui-border, rgba(255,255,255,.08));
        border-radius: 6px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.02em;
        white-space: nowrap;
        color: var(--ui-fg);
        cursor: pointer;
        outline: none;
        box-shadow: none;
        user-select: none;
        transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

    /* 40px click target hit area for compact visual footprint */
    .symbol-display-btn::before {
        content: '';
        position: absolute;
        top: -3px;
        bottom: -3px;
        left: 0;
        right: 0;
        min-height: 40px;
        min-width: 40px;
        border-radius: 6px;
    }

    .icon-action-btn:hover,
    .tf-dd-btn:hover,
    .topbar-btn:hover {
        background: var(--toolbar-hover, var(--ui-hover));
        border-color: var(--ui-panel-border);
    }

    .symbol-display-btn:hover {
        background: var(--ui-button-hover);
        border-color: var(--ui-panel-border, #333);
    }

    .symbol-display-btn:active {
        background: var(--ui-button-hover);
        border-color: var(--ui-panel-border, #333);
    }

    .symbol-display-btn[aria-expanded="true"] {
        background: rgba(41, 98, 255, 0.10);
        border-color: var(--ui-primary, #2962ff);
        color: var(--ui-primary, #2962ff);
    }

    .symbol-display-btn[aria-expanded="true"] .symbol-caret {
        opacity: 1;
    }

    .symbol-display-btn:focus-visible {
        outline: 2px solid var(--chart-axis-bg, #2196F3);
        outline-offset: 2px;
    }

    .symbol-caret {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        opacity: 0.7;
        flex-shrink: 0;
        pointer-events: none;
        transition: transform 0.15s ease, opacity 0.15s ease;
    }

    .symbol-display-btn:hover .symbol-caret {
        opacity: 0.95;
    }

    .icon-action-btn {
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        background: transparent;
        border-radius: 50%;
        flex-shrink: 0;
    }
    .status {
        width: 9px;
        height: 9px;
        border-radius: 999px;
        /* open */
        background: radial-gradient(circle at 28% 28%, rgba(255,255,255,0.95), rgba(255,255,255,0) 40%),
                    linear-gradient(180deg, #4fffe4, #00c2a8);
        margin-left: 0;
        flex-shrink: 0;
        box-shadow:
            0 0 0 1px rgba(255,255,255,0.14) inset,
            0 0 0 2px rgba(0, 194, 168, 0.18),
            0 2px 12px rgba(0, 194, 168, 0.55),
            0 0 18px rgba(79, 255, 228, 0.35);
    }

    .status.closed {
        /* closed */
        background: radial-gradient(circle at 28% 28%, rgba(255,255,255,0.95), rgba(255,255,255,0) 40%),
                    linear-gradient(180deg, #ff8f86, #ff2d55);
        box-shadow:
            0 0 0 1px rgba(255,255,255,0.14) inset,
            0 0 0 2px rgba(255, 45, 85, 0.18),
            0 2px 12px rgba(255, 45, 85, 0.50),
            0 0 18px rgba(255, 143, 134, 0.28);
    }

    /* .topbar-feature-hidden and #market-status rules live in theme.css */

/* ═══════════════════════════════════════════════════════════
   TOPBAR ACTION BUTTONS (topbar-btn, nav-label-btn, ind-active)
   ═══════════════════════════════════════════════════════════ */

/* Generic topbar action button */
.topbar-btn {
    background: transparent;
    border-radius: 10px;
    color: var(--ui-fg);
    padding: 7px 12px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.1s, border-color 0.1s;
    height: 34px;
    flex-shrink: 0;
}

    .nav-label-btn {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

/* Indicators button â€" highlights when panel is open */
.ind-topbar-btn.ind-btn-active {
    background: var(--ui-button-hover);
    border-color: var(--ui-panel-border);
    color: var(--ui-fg);
}}