/* ============================================================
   bollinger.css  —  Bollinger Bands  ·  2×2 dashboard
   Dark terminal / trading-desk aesthetic
   ============================================================ */

/* ── tokens ─────────────────────────────────────────────────── */
:root {
    --bg:        #05070f;
    --bg-panel:  #090c18;
    --bg-card:   #0d1120;
    --border:    rgba(0, 212, 255, 0.10);
    --border-hi: rgba(0, 212, 255, 0.28);
    --cyan:      #00d4ff;
    --green:     #00ff88;
    --red:       #ff4444;
    --amber:     #f7931a;
    --muted:     rgba(160, 196, 228, 0.45);
    --text:      #dde4f0;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
    --font-ui:   -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --sidebar-w: 240px;
    --bar-h:     36px;   /* control bar fixed height */
}

/* ── reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── page shell ──────────────────────────────────────────────── */
.bb-page {
    display:   flex;
    width:     100%;
    height:    calc(100vh - 57px);
    background: var(--bg);
    color:     var(--text);
    font-family: var(--font-ui);
    position:  relative;
    overflow:  hidden;
}

/* scanline */
.bb-scanline {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px, transparent 3px,
        rgba(0,0,0,0.06) 3px, rgba(0,0,0,0.06) 4px
    );
    pointer-events: none;
    z-index: 500;
}

/* ── main area ───────────────────────────────────────────────── */
.bb-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.bb-main--split { gap: 0; padding: 0; }

/* ══════════════════════════════════════════════════════════════
   CONTROL BAR  —  single row, TOGGLE centred, never wraps
   ══════════════════════════════════════════════════════════════ */
.bb-shared-controls {
    display:       flex;
    align-items:   center;
    height:        var(--bar-h);
    padding:       0 12px;
    flex-shrink:   0;
    border-bottom: 1px solid var(--border);
    background:    var(--bg-panel);
    overflow:      hidden;
}

/* left group: period buttons + sliders — takes equal share */
.bb-controls-left {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex:        1;           /* grow to fill left half */
    min-width:   0;
    overflow:    hidden;
    white-space: nowrap;
}

/* right group: legend — takes equal share, right-aligned */
.bb-controls-right {
    display:         flex;
    align-items:     center;
    justify-content: flex-end;
    flex:            1;       /* grow to fill right half */
    min-width:       0;
    overflow:        hidden;
    white-space:     nowrap;
}

/* ── TOGGLE button — sits in the center between the two groups ── */
.bb-toggle-btn {
    flex-shrink:    0;
    background:     rgba(196,144,0,0.15);
    border:         1.5px solid #ffd700;
    color:          #fff8dc;
    font-family:    var(--font-mono);
    font-size:      9px;
    font-weight:    700;
    letter-spacing: 0.12em;
    padding:        0 16px;
    height:         24px;
    border-radius:  5px;
    cursor:         pointer;
    white-space:    nowrap;
    transition:     background 0.2s, box-shadow 0.2s;
    box-shadow:     0 0 10px rgba(255,215,0,0.35);
    margin:         0 12px;   /* breathing room from the two groups */
}
.bb-toggle-btn:hover {
    background: rgba(196,144,0,0.32);
    box-shadow: 0 0 18px rgba(255,215,0,0.75);
}
.bb-toggle-btn.active {
    background: #c49000;
    box-shadow: 0 0 20px rgba(255,215,0,0.9);
    color:      #fff;
}

/* ── period buttons — inline row ─────────────────────────────── */
.bb-period-row {
    display:     flex;
    align-items: center;
    gap:         4px;
    flex-shrink: 0;
}
.bb-period-btn {
    background:     var(--bg-card);
    border:         1px solid var(--border);
    color:          var(--muted);
    font-family:    var(--font-mono);
    font-size:      9px;
    font-weight:    700;
    letter-spacing: 0.06em;
    padding:        0 9px;
    height:         22px;
    border-radius:  4px;
    cursor:         pointer;
    transition:     all 0.18s;
    white-space:    nowrap;
}
.bb-period-btn:hover { border-color: var(--border-hi); color: var(--text); }
.bb-period-btn.active {
    background:   rgba(0,212,255,0.12);
    border-color: rgba(0,212,255,0.4);
    color:        var(--cyan);
    box-shadow:   0 0 8px rgba(0,212,255,0.2);
}

/* ── sliders ─────────────────────────────────────────────────── */
.bb-shared-sliders {
    display:     flex;
    align-items: center;
    gap:         6px;
    flex-shrink: 0;
}
.bb-slider-label {
    font-family:    var(--font-mono);
    font-size:      9px;
    color:          var(--muted);
    white-space:    nowrap;
    letter-spacing: 0.06em;
}
.bb-label-val { color: var(--cyan); }

.bb-range {
    -webkit-appearance: none;
    width:        90px;
    height:       3px;
    background:   var(--border);
    border-radius: 2px;
    outline:      none;
    cursor:       pointer;
    accent-color: var(--cyan);
    flex-shrink:  0;
}
.bb-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 6px rgba(0,212,255,0.7);
    cursor: pointer;
    transition: box-shadow 0.2s;
}
.bb-range::-webkit-slider-thumb:hover { box-shadow: 0 0 12px rgba(0,212,255,0.9); }

/* ── legend ──────────────────────────────────────────────────── */
.bb-legend {
    display:     flex;
    align-items: center;
    gap:         14px;
    flex-shrink: 0;
}
.bb-legend-item {
    display:     flex;
    align-items: center;
    gap:         5px;
    font-size:   9px;
    letter-spacing: 0.05em;
    color:       var(--muted);
    white-space: nowrap;
}
.bb-dot { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════
   2×2 GRID
   ══════════════════════════════════════════════════════════════ */
.bb-grid-2x2 {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows:    1fr 1fr;
    flex:                  1;
    min-height:            0;
    gap:                   4px;
    background:            var(--bg);
}

/* ── chart panel ─────────────────────────────────────────────── */
.bb-chart-panel {
    display:        flex;
    flex-direction: column;
    background:     var(--bg);
    min-height:     0;
    position:       relative;
    overflow:       hidden;
    border:         1px solid rgba(0, 212, 255, 0.22);
    box-shadow:     inset 0 0 0 1px rgba(0, 212, 255, 0.06),
                    0 0 18px rgba(0, 212, 255, 0.08),
                    0 0  1px rgba(0, 212, 255, 0.35);
    transition:     box-shadow 0.3s ease, border-color 0.3s ease;
}
.bb-chart-panel:hover {
    border-color: rgba(0, 212, 255, 0.45);
    box-shadow:   inset 0 0 0 1px rgba(0, 212, 255, 0.10),
                  0 0 32px rgba(0, 212, 255, 0.15),
                  0 0  2px rgba(0, 212, 255, 0.55);
}

/* ── chart header — ticker + meta only ───────────────────────── */
.bb-chart-header {
    display:       flex;
    align-items:   center;
    gap:           8px;
    flex-shrink:   0;
    padding:       3px 10px;
    border-bottom: 1px solid var(--border);
    background:    var(--bg-panel);
    min-height:    26px;
}
.bb-chart-header .bb-ticker-name { font-size: 12px; }
.bb-chart-header .bb-ticker-meta { font-size: 10px; }

/* ── chart wrap ──────────────────────────────────────────────── */
.bb-chart-wrap {
    flex:       1;
    background: var(--bg-panel);
    position:   relative;
    overflow:   hidden;
    min-height: 0;
}
.bb-chart-wrap::before,
.bb-chart-wrap::after {
    content: '';
    position: absolute;
    width: 24px; height: 24px;
    border-color: rgba(0,212,255,0.22);
    border-style: solid;
    z-index: 2;
    pointer-events: none;
}
.bb-chart-wrap::before { top: 0; left: 0; border-width: 2px 0 0 2px; border-radius: 4px 0 0 0; }
.bb-chart-wrap::after  { bottom: 0; right: 0; border-width: 0 2px 2px 0; border-radius: 0 0 4px 0; }

/* ── empty state ─────────────────────────────────────────────── */
.bb-empty-state {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 10px; color: var(--muted);
    font-size: 11px; letter-spacing: 0.08em;
    pointer-events: none; z-index: 1;
}
.bb-empty-icon {
    font-size: 26px; color: rgba(0,212,255,0.18);
    animation: emptyPulse 3s ease-in-out infinite;
}
@keyframes emptyPulse {
    0%,100% { opacity: 0.4; transform: scale(1); }
    50%      { opacity: 0.8; transform: scale(1.08); }
}

/* ── loading ─────────────────────────────────────────────────── */
.bb-loading {
    position: absolute; inset: 0;
    background: rgba(5,7,15,0.7);
    display: flex; align-items: center; justify-content: center;
    z-index: 10; backdrop-filter: blur(4px);
}
.bb-spinner {
    width: 28px; height: 28px;
    border: 2px solid var(--border);
    border-top-color: var(--cyan);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════
   SIDEBARS  —  overlay each panel, slide in/out
   ══════════════════════════════════════════════════════════════ */
.bb-sidebar {
    position:       absolute;
    top:            0;
    bottom:         0;
    width:          var(--sidebar-w);
    background:     var(--bg-panel);
    border:         1px solid var(--border-hi);
    display:        flex;
    flex-direction: column;
    overflow-y:     auto;
    padding:        14px 13px 18px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,212,255,0.2) transparent;
    z-index:        300;
    transition:     transform 0.26s ease, opacity 0.26s ease;
}
.bb-sidebar::-webkit-scrollbar       { width: 4px; }
.bb-sidebar::-webkit-scrollbar-thumb { background: rgba(0,212,255,0.2); border-radius: 2px; }

/* left-edge sidebars (A, C) */
.bb-sidebar--tl,
.bb-sidebar--bl { left: 0; border-right: 1px solid var(--border-hi); }
.bb-sidebar--tl.collapsed,
.bb-sidebar--bl.collapsed { transform: translateX(-100%); opacity: 0; pointer-events: none; }

/* right-edge sidebars (B, D) */
.bb-sidebar--tr,
.bb-sidebar--br { right: 0; border-left: 1px solid var(--border-hi); }
.bb-sidebar--tr.collapsed,
.bb-sidebar--br.collapsed { transform: translateX(100%); opacity: 0; pointer-events: none; }

/* ── per-panel backdrop — absolute inside .bb-chart-panel ───── */
.bb-sidebar-backdrop {
    position:        absolute;
    inset:           0;
    background:      rgba(0,0,0,0.42);
    z-index:         290;
    backdrop-filter: blur(1px);
    cursor:          pointer;
    display:         none;
}
.bb-sidebar-backdrop.visible { display: block; }

/* ── sidebar header ──────────────────────────────────────────── */
.bb-sidebar-header {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 12px; padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.bb-logo-icon {
    font-size: 16px; color: var(--cyan);
    filter: drop-shadow(0 0 6px rgba(0,212,255,0.7));
}
.bb-logo-text {
    font-family: var(--font-mono); font-size: 9px; font-weight: 700;
    letter-spacing: 0.18em; color: var(--cyan);
    text-shadow: 0 0 10px rgba(0,212,255,0.5);
}

/* ── section labels ──────────────────────────────────────────── */
.bb-section-label {
    font-family: var(--font-mono); font-size: 7px; font-weight: 700;
    letter-spacing: 0.22em; color: var(--muted);
    margin: 10px 0 5px; text-transform: uppercase;
}

/* ── fields ──────────────────────────────────────────────────── */
.bb-field { margin-bottom: 9px; }
.bb-label {
    display: flex; justify-content: space-between;
    font-size: 9px; letter-spacing: 0.08em;
    color: var(--muted); margin-bottom: 4px;
}
.bb-label-val { color: var(--cyan); font-family: var(--font-mono); }

/* ── selects ─────────────────────────────────────────────────── */
.bb-select-wrap { position: relative; }
.bb-select-wrap::after {
    content: '▾'; position: absolute; right: 8px; top: 50%;
    transform: translateY(-50%); color: var(--cyan);
    font-size: 9px; pointer-events: none;
}
.bb-select {
    width: 100%; background: var(--bg-card);
    border: 1px solid var(--border); color: var(--text);
    font-size: 9px; padding: 5px 22px 5px 7px;
    border-radius: 4px; outline: none; cursor: pointer;
    appearance: none; -webkit-appearance: none;
    transition: border-color 0.2s; font-family: var(--font-mono);
}
.bb-select:focus, .bb-select:hover { border-color: var(--border-hi); }
.bb-select option { background: #0d1120; }

/* ── sidebar range sliders ───────────────────────────────────── */
.bb-sidebar .bb-range { width: 100%; }

/* ── divider ─────────────────────────────────────────────────── */
.bb-divider { height: 1px; background: var(--border); margin: 7px 0; }

/* ── stat cards ──────────────────────────────────────────────── */
.bb-stats { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.bb-stat-placeholder { font-size: 9px; color: var(--muted); text-align: center; padding: 8px 0; letter-spacing: 0.06em; }
.bb-stat-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 4px; padding: 5px 7px;
    display: flex; justify-content: space-between; align-items: center;
}
.bb-stat-label { font-size: 7px; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }
.bb-stat-value { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--text); }
.bb-stat-value.up   { color: var(--green); }
.bb-stat-value.down { color: var(--red); }
.bb-stat-value.cyan { color: var(--cyan); }

/* ── ticker / meta ───────────────────────────────────────────── */
.bb-ticker-name {
    font-family: var(--font-mono); font-size: 13px; font-weight: 700;
    color: var(--cyan); letter-spacing: 0.10em;
    text-shadow: 0 0 14px rgba(0,212,255,0.45);
}
.bb-ticker-meta { font-size: 10px; color: var(--muted); letter-spacing: 0.05em; }

/* ── tabs ────────────────────────────────────────────────────── */
.bb-tabs {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 3px; margin-bottom: 10px;
}
.bb-tab-btn {
    background: var(--bg-card); border: 1px solid var(--border);
    color: var(--muted); font-family: var(--font-mono);
    font-size: 7px; font-weight: 700; letter-spacing: 0.06em;
    padding: 4px 2px; border-radius: 3px; cursor: pointer;
    transition: all 0.2s; text-transform: uppercase;
}
.bb-tab-btn:hover { border-color: var(--border-hi); color: var(--text); }
.bb-tab-btn.active {
    background: rgba(0,212,255,0.12); border-color: rgba(0,212,255,0.4);
    color: var(--cyan); box-shadow: 0 0 6px rgba(0,212,255,0.15);
}

/* ── quick-access grids ──────────────────────────────────────── */
.bb-quick-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 3px; margin-bottom: 3px;
}
.bb-quick-grid--wide {
    grid-template-columns: repeat(3, 1fr);
    max-height: 300px; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: rgba(0,212,255,0.2) transparent;
}
.bb-quick-grid--wide::-webkit-scrollbar       { width: 3px; }
.bb-quick-grid--wide::-webkit-scrollbar-thumb { background: rgba(0,212,255,0.2); }

.bb-quick-btn {
    background: var(--bg-card); border: 1px solid var(--border);
    color: var(--muted); font-family: var(--font-mono);
    font-size: 7px; font-weight: 700; letter-spacing: 0.04em;
    padding: 4px 2px; border-radius: 3px; cursor: pointer;
    transition: all 0.16s; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bb-quick-btn:hover { border-color: var(--border-hi); color: var(--text); background: rgba(0,212,255,0.06); }
.bb-quick-btn.active {
    background: rgba(0,212,255,0.15); border-color: rgba(0,212,255,0.5);
    color: var(--cyan); box-shadow: 0 0 6px rgba(0,212,255,0.2);
}
.bb-quick-btn--sm { font-size: 7px; padding: 3px 2px; }

/* ─── NAVBAR DROPDOWN ────────────────────────────────────────── */
.dropdown-menu {
    background-color: rgba(5,10,21,0.95) !important;
    border: 1px solid rgba(0,212,255,0.15) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
    z-index: 1050 !important;
}
.dropdown-item { color: rgba(160,196,228,0.85) !important; font-size: 13px; letter-spacing: 0.04em; }
.dropdown-item:hover { background-color: rgba(0,212,255,0.08) !important; color: #00d4ff !important; }
.dropdown-divider { border-color: rgba(0,212,255,0.1) !important; }