/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE DESIGN STYLESHEET
   Optimized for Desktop, Laptop, Tablet, and Mobile devices
   ═══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   OVERFLOW MENU (shared styles)
   ────────────────────────────────────────────────────────────── */

.tb-overflow-wrap {
    display: none;
    position: relative;
    flex-shrink: 0;
}

.tb-overflow-btn {
    width: 32px;
    height: 32px;
}

.tb-overflow-menu {
    min-width: 180px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--ui-panel, #1e1e2e);
    border: 1px solid var(--ui-panel-border, rgba(255,255,255,0.08));
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    z-index: 99999;
    padding: 4px 0;
    scrollbar-width: thin;
    margin-top: 0;
}

.tb-overflow-menu.hidden {
    display: none;
}

.tb-overflow-item {
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 14px;
    border: none;
    background: transparent;
    color: var(--ui-fg, #e0e0e0);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.1s;
    border-radius: 0;
    height: auto;
    min-width: 0;
}

.tb-overflow-item:hover {
    background: rgba(255,255,255,0.06);
}

.tb-overflow-item svg {
    flex-shrink: 0;
    opacity: 0.8;
}

/* ──────────────────────────────────────────────────────────────
   TOUCH DEVICE ENHANCEMENTS
   ────────────────────────────────────────────────────────────── */

@media (hover: none) and (pointer: coarse) {
    .symbol-display-btn,
    .icon-action-btn,
    .topbar-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ──────────────────────────────────────────────────────────────
   LARGE DESKTOP (≥1440px) — Full experience
   Everything visible, dividers shown, relaxed spacing.
   ────────────────────────────────────────────────────────────── */

@media (min-width: 1440px) {
    #topbar {
        height: 50px;
        padding: 0 12px;
    }

    .topbar-group {
        gap: 12px;
    }

    .header-title-section {
        gap: 12px;
    }

    .topbar-divider {
        display: block;
    }

    .symbol-display-btn {
        height: 34px;
        padding: 0 12px;
        font-size: 13px;
    }

    .topbar-btn {
        height: 34px;
        padding: 7px 10px;
        font-size: 13px;
    }

    .nav-label-btn {
        gap: 5px;
    }

    .icon-action-btn {
        width: 32px;
        height: 32px;
    }
}

/* ──────────────────────────────────────────────────────────────
   STANDARD DESKTOP (1200px – 1439px) — First compaction step
   Dividers hidden, reduced padding, icon-only for Alert/Replay.
   ────────────────────────────────────────────────────────────── */

@media (min-width: 1200px) and (max-width: 1439px) {
    #topbar {
        height: 48px;
        padding: 0 8px;
    }

    .topbar-group {
        gap: 8px;
    }

    .header-title-section {
        gap: 8px;
    }

    /* Hide dividers to reclaim horizontal space */
    .topbar-divider {
        display: none;
    }

    .symbol-display-btn {
        height: 32px;
        padding: 0 10px;
        font-size: 13px;
    }

    .symbol-nav {
        gap: 3px;
    }

    .topbar-btn {
        height: 32px;
        padding: 4px 8px;
        font-size: 12px;
    }

    .nav-label-btn {
        gap: 4px;
    }

    .icon-action-btn {
        width: 28px;
        height: 28px;
    }

    /* Icon-only for Alert */
    #alertBtn span {
        display: none;
    }
}

/* ──────────────────────────────────────────────────────────────
    LAPTOP (1024px – 1199px) — Compact, overflow menu appears
    Lower-priority items collapse into "More" menu.
    ────────────────────────────────────────────────────────────── */

@media (min-width: 1024px) and (max-width: 1199px) {
    #topbar {
        height: 46px;
        padding: 0 6px;
    }

    .topbar-group {
        gap: 6px;
    }

    .header-title-section {
        gap: 6px;
    }

    .topbar-divider {
        display: none;
    }

    .symbol-display-btn {
        height: 30px;
        padding: 0 8px;
        font-size: 12px;
        gap: 5px;
    }

    .symbol-nav {
        gap: 2px;
    }

    .topbar-btn {
        height: 30px;
        padding: 3px 6px;
        font-size: 12px;
    }

    .nav-label-btn {
        gap: 3px;
    }

    .icon-action-btn {
        width: 26px;
        height: 26px;
    }

    /* Icon-only for Alert */
    #alertBtn span {
        display: none;
    }

    /* Price info: more compact */
    .topbar-price-info {
        height: 32px;
        padding: 0 2px;
    }

    .topbar-price-val {
        font-size: 13px;
    }

    .topbar-price-chg {
        font-size: 10px;
    }
}

/* ──────────────────────────────────────────────────────────────
    TABLET (768px – 1023px) — Heavily compact, more overflow
    ────────────────────────────────────────────────────────────── */

@media (min-width: 768px) and (max-width: 1023px) {
    #topbar {
        height: 44px;
        padding: 0 5px;
        gap: 1px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }
    #topbar::-webkit-scrollbar { display: none; }

    .header-title-section {
        gap: 4px;
    }

    .topbar-group {
        gap: 4px;
    }

    .topbar-divider {
        display: none;
    }

    .symbol-display-btn {
        height: 28px;
        padding: 0 7px;
        font-size: 12px;
        gap: 4px;
    }

    .symbol-nav {
        gap: 2px;
    }

    .symbol-caret {
        display: none;
    }

    #symbolQuickAddBtn {
        width: 26px;
        height: 26px;
    }

    .topbar-btn {
        height: 28px;
        padding: 3px 5px;
        font-size: 11px;
    }

    .nav-label-btn {
        gap: 3px;
    }

    .icon-action-btn {
        width: 26px;
        height: 26px;
    }

    /* Price info hidden on tablet — space is tight */
    .topbar-price-info {
        display: none;
    }

    /* Market Watch: icon-only */
    /* #marketWatchBtn span:not(:first-child) {
        display: none;
    }
    #marketWatchBtn {
        padding: 3px 6px;
        font-size: 11px;
        height: 28px;
    } */

    /* Chart area adjustments */
    #chart-layout-area {
        left: 44px;
    }

}

/* ──────────────────────────────────────────────────────────────
   SMALL TABLET / LARGE MOBILE (480px – 767px)
   ────────────────────────────────────────────────────────────── */

@media (min-width: 480px) and (max-width: 767px) {
    #topbar {
        height: auto;
        padding: 0;
        overflow: visible;
        align-items: stretch;
    }

    .header-title-section {
        flex: 1;
        min-width: 0;
        overflow: visible;
        gap: 0;
    }

    /* 2-row wrapping layout */
    .topbar-group-primary {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
        overflow: visible;
        padding: 0 8px;
        gap: 6px;
        row-gap: 0;
    }

    .topbar-row-break {
        display: block;
        flex-basis: 100%;
        height: 1px;
        background: var(--ui-panel-border, rgba(255,255,255,0.08));
        margin: 0 -8px;
        width: calc(100% + 16px);
    }

    .topbar-group-primary .symbol-nav {
        flex-shrink: 0;
        height: 40px;
        display: flex;
        align-items: center;
    }

    .topbar-group-primary #indicatorBtn,
    .topbar-group-primary #alertBtn {
        flex-shrink: 0;
        height: 36px;
        display: flex;
        align-items: center;
    }

    .topbar-group-secondary { display: none; }
    .topbar-divider { display: none; }

    .symbol-display-btn { height: 28px; padding: 0 10px; font-size: 12px; }
    .topbar-btn { height: 28px; padding: 3px 8px; font-size: 12px; }
    .icon-action-btn { width: 28px; height: 28px; }

    /* Show text labels on row 2 */
    #alertBtn span { display: inline; }

    #chart-layout-area { left: 44px; }
}

/* ──────────────────────────────────────────────────────────────
   SMALL MOBILE (< 480px)
   ────────────────────────────────────────────────────────────── */

@media (max-width: 479px) {
    #topbar {
        height: 44px;
        padding: 0 4px;
        gap: 2px;
    }

    .topbar-group-primary {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: center;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        gap: 4px;
    }
    .topbar-group-primary::-webkit-scrollbar { display: none; }

    .topbar-group-secondary { display: none !important; }
    .topbar-row-break { display: none; }
    .topbar-divider { display: none !important; }

    .symbol-display-btn { height: 30px; padding: 0 8px; font-size: 11px; gap: 4px; }
    .symbol-caret { display: none; }
    #symbolQuickAddBtn { width: 28px; height: 28px; }
    .topbar-btn { height: 30px; padding: 3px 6px; font-size: 11px; }
    .icon-action-btn { width: 28px; height: 28px; }

    #chart-layout-area { left: 40px; }
}

/* ──────────────────────────────────────────────────────────────
   LANDSCAPE MODE (short viewport height)
   ────────────────────────────────────────────────────────────── */

@media (max-height: 500px) {
    #topbar {
        height: 40px;
    }

    .symbol-display-btn,
    .topbar-btn {
        height: 30px;
        padding: 4px 8px;
        font-size: 11px;
    }

    .icon-action-btn {
        width: 26px;
        height: 26px;
    }

}

/* ──────────────────────────────────────────────────────────────
   NON-TOPBAR RESPONSIVE (kept from original)
   ────────────────────────────────────────────────────────────── */

/* Touch targets (WCAG) */
@media (hover: none) and (pointer: coarse) {
    .pane-ctrl { min-width: 44px; min-height: 44px; }
}

/* Small mobile: pane controls */
@media (max-width: 479px) {
    .pane-header { padding: 4px 6px; gap: 4px; }
    .pane-symbol { font-size: 11px; font-weight: 600; }
    .pane-controls { gap: 2px; }
    .pane-ctrl { width: 22px; height: 22px; }
    .pane-ctrl svg { width: 10px !important; height: 10px !important; }
    .chart-text { font-size: 9px; }
}

/* Medium mobile: pane controls */
@media (min-width: 480px) and (max-width: 767px) {
    .pane-header { padding: 6px 8px; }
    .pane-symbol { font-size: 12px; }
    .pane-ctrl { width: 26px; height: 26px; }
}

/* Tablet: pane controls */
@media (min-width: 768px) and (max-width: 1023px) {
    .pane-header { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
    .pane-symbol { font-size: 14px; font-weight: 600; }
    .pane-live-price, .pane-status { font-size: 12px; }
    .pane-ctrl { width: 28px; height: 28px; }
    .grid-rsz-v { width: 3px; }
    .grid-rsz-h { height: 3px; }
}

/* Multi-pane grid */
@media (max-width: 479px) {
    .chart-row > .chart-pane:nth-child(n+2) { display: none; }
}

@media (min-width: 480px) and (max-width: 767px) {
    .chart-row { flex-wrap: wrap; }
    .chart-row > .chart-pane { flex: 1 1 100%; min-width: 100%; }
    .chart-row > .chart-pane:nth-child(n+2) { display: none; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .chart-row { flex-wrap: wrap; }
    .chart-row > .chart-pane { flex: 1 1 50%; min-width: 50%; }
    .chart-row > .chart-pane:nth-child(n+3) { display: none; }
}

@media (min-width: 1024px) {
    .chart-row > .chart-pane { display: block; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High DPI */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .grid-rsz-v { width: 1px; }
    .grid-rsz-h { height: 1px; }
    * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
    svg { image-rendering: crisp-edges; }
}

/* Safe areas (notched devices) */
@supports (padding: max(0px)) {
    #topbar {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
}

/* Print */
@media print {
    #topbar, #tab-bar, .pane-controls, .grid-rsz-hdl { display: none; }
    #chart-layout-area { position: static; top: auto; left: auto; right: auto; bottom: auto; width: 100%; height: auto; }
    .chart-pane { page-break-inside: avoid; break-inside: avoid; }
}