/* Custom scrollbar */
.scrollbar-thin { scrollbar-width: thin; }
.scrollbar-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 3px; }
.scrollbar-thin::-webkit-scrollbar-thumb:hover { background: #334155; }

/* Chart card */
.chart-card {
    background: #0d1117;
    border: 1px solid #21262d;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    min-height: 200px;  /* enough for header + small price area + subcharts */
    height: 100%;
}
#charts-grid > * { min-height: 0; }  /* grid children must allow shrink */
#charts-grid { min-height: 0; }
#watchlist-strip { max-height: 50px; }  /* don't let watchlist push grid down */
.chart-stack { min-height: 0; height: 100%; overflow: hidden; }
.chart-card.fullscreen {
    position: fixed; inset: 0; z-index: 60;
}
.chart-header {
    background: #020617;
    border-bottom: 1px solid #21262d;
    padding: 4px 8px;
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
    font-size: 11px;
    color: #cbd5e1;
}
.chart-title-btn { cursor: pointer; font-weight: 700; }
.chart-title-btn:hover { color: #818cf8; }
.tf-btn {
    padding: 1px 6px; font-size: 10px; font-weight: 600;
    background: transparent; color: #94a3b8;
    border: 1px solid transparent; border-radius: 3px;
    cursor: pointer; transition: all 0.1s;
}
.tf-btn:hover { color: #c9d1d9; background: #1e293b; }
.tf-btn.active { background: #4338ca; color: white; }

.ind-btn {
    padding: 1px 5px; font-size: 9px; font-weight: 700;
    background: transparent; color: #64748b;
    border: 1px solid #334155; border-radius: 3px;
    cursor: pointer;
}
.ind-btn:hover { color: #c9d1d9; }
.ind-btn.active { background: #581c87; color: #f0abfc; border-color: #6b21a8; }
.range-btn {
    padding: 1px 6px; font-size: 10px; font-weight: 600;
    background: transparent; color: #94a3b8;
    border: none; border-radius: 3px; cursor: pointer;
}
.range-btn:hover { color: #c9d1d9; background: #1e293b; }
.range-btn.active { background: #4338ca; color: white; }

.chart-body {
    flex: 1; min-height: 0; position: relative;
}
.chart-stack {
    display: flex; flex-direction: column; height: 100%;
}
.chart-price { flex: 1; min-height: 0; }
.chart-flow { height: 0; flex-shrink: 0; display: none; border-top: 1px solid #1e293b; }
.chart-flow.visible { height: 75px; display: block; position: relative; }
.flow-legend {
    position: absolute; top: 3px; left: 6px; z-index: 5;
    font-size: 10px; font-family: monospace; font-weight: 700;
    display: flex; gap: 10px;
    background: rgba(13,17,23,0.85); padding: 2px 6px; border-radius: 3px;
    border: 1px solid #21262d;
    pointer-events: none;
}
.chart-rsi { height: 60px; flex-shrink: 0; border-top: 1px solid #1e293b; display: none; }
.chart-rsi.visible { display: block; }

.ticker-strip span { color: #cbd5e1; }
.ticker-strip .up { color: #22c55e; }
.ticker-strip .dn { color: #ef4444; }

/* Symbol modal list */
.sym-item {
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 12px;
    color: #cbd5e1;
    transition: background 0.1s;
}
.sym-item:hover { background: #1e293b; }
.sym-item .cat {
    font-size: 9px; text-transform: uppercase;
    background: #1e1b4b; color: #818cf8;
    padding: 1px 5px; border-radius: 3px;
}

#ws-dot.connected { background: #22c55e !important; }
#ws-dot.stale { background: #eab308 !important; }

/* Mobile/tablet tuning — 44px touch targets per Apple HIG */
@media (max-width: 768px) {
    .chart-header {
        font-size: 11px; padding: 4px 6px;
        flex-wrap: wrap; gap: 4px;
    }
    .tf-btn { font-size: 11px; padding: 6px 10px; min-height: 32px; min-width: 36px; }
    .ind-btn { font-size: 10px; padding: 5px 8px; min-height: 32px; min-width: 32px; }
    .range-btn { font-size: 11px; padding: 8px 10px; min-height: 36px; min-width: 36px; }
    .chart-title-btn { font-size: 12px; }
    .chart-flow.visible { height: 60px; }   /* readable on mobile */
    .chart-rsi.visible { height: 55px; }
    #live-ticker { display: none; }
    aside#trading-sidebar { width: 92vw; }
    /* Show RANGE selector on mobile too — was hidden md:flex */
    #global-range { display: flex !important; }
    #global-range span:first-child { display: none; }  /* hide "RANGE" text on mobile, just buttons */
    /* Symbol modal full-width on narrow phones */
    #symbol-modal > div { max-width: 100% !important; width: 100% !important; }
}
@media (max-width: 1024px) and (min-width: 769px) {
    /* Tablet — slightly larger touch targets */
    .tf-btn { font-size: 10px; padding: 2px 5px; }
    .ind-btn { font-size: 9px; padding: 1px 4px; }
}
/* Force horizontal scroll on chart header on very narrow screens */
.chart-header .tf-btn, .chart-header .ind-btn {
    flex-shrink: 0;
}