/* CSS gốc thanh tab dùng chung. Tách khỏi _tab_bar_assets.blade.php để trình duyệt lưu đệm. */
/* ── Shared Tab Bar ── */
/* #3643: bố cục cột (layout => 'sidebar') — khối tab trong cột phải, cùng dáng danh mục tab của trang thành viên. */
.chart-tabs-side { background: linear-gradient(180deg, var(--color-primary-light), var(--color-primary)); border: none; }
.chart-tabs-side .sidebar-tool-link { width: 100%; text-align: left; font: inherit; font-size: var(--fs-sm); font-weight: 600; padding: var(--space-2) var(--space-3); cursor: pointer; color: var(--color-ui-text-main); position: relative; }
.chart-tabs-side .sidebar-tool-link:not(.btn-gold) { background: transparent; }
.chart-tabs-side .sidebar-tool-link.btn-gold { cursor: default; font-weight: 700; color: var(--color-accent-gold); }
.chart-tabs-wrap {
    position: sticky;
    z-index: 50;
    background: transparent;
    transition: background 0.2s ease;
}
/* When pinned (sticky engaged): nền sao huyền bí thay backdrop-filter blur.
   - Layer 1: deep-navy solid (che content phía dưới, không cần blur).
   - Layer 2: inline SVG starfield tile-able 240×60 — vector, ~1.2KB, browser
     rasterize 1 lần rồi cache; iOS Safari zero compositing cost vs blur.
   - Layer 3: radial-gradient mờ vàng nhạt ở giữa — gợi tinh vân / aura. */
.chart-tabs-wrap.is-stuck {
    background-color: #0d0f1a;
    background-image:
        radial-gradient(ellipse 70% 120% at 50% 50%, rgba(212, 160, 23, 0.18), transparent 75%),
        url('/images/starfield.svg');
    background-repeat: no-repeat, repeat;
}
.chart-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 0;
    flex-wrap: nowrap;
    padding: 4px 0 0 0;
    position: relative;
    /* Hide pre-reflow overflow so tabs don't push past container before JS runs.
       Dropdown sits outside .chart-tabs (sibling in wrap) so it escapes this clip. */
    overflow: hidden;
}
.chart-tab-btn {
    padding: 8px 16px;
    font-size: 0.8rem;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    border: 1px solid var(--color-border);
    border-bottom: none;
    background: transparent;
    color: var(--color-text-muted);
    transition: background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
    flex-shrink: 0;
}
.chart-tab-btn:hover {
    color: var(--color-text-main);
    background: var(--color-bg-hover);
}
.chart-tab-btn .tab-icon { font-size: 0.9rem; }
.chart-tab-btn .tab-action {
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.82rem;
    opacity: 0.6;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}
.chart-tab-btn .tab-action:hover { opacity: 1; background: var(--color-bg-active); }
.chart-tab-btn.active .tab-action { opacity: 0.85; }

/* ── Tab Content ── */
.chart-tab-panel {
    display: none;
    animation: chartTabFadeIn 0.3s ease;
}
.chart-tab-panel.active { display: block; }
@keyframes chartTabFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── More Button ── */
.chart-tab-more {
    display: none;                /* Shown by JS when overflow detected */
    margin-left: auto;
    flex-shrink: 0;
}

/* ── More Dropdown (overflowed tabs) ── */
.chart-tab-dropdown {
    display: none;
    position: absolute;
    top: calc(100% - 1px);
    right: 0;
    min-width: 200px;
    max-width: 280px;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--color-bg-card, rgba(15, 23, 42, 0.98));
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 6px;
    flex-direction: column;
    gap: 2px;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.chart-tab-dropdown.open { display: flex; }
.chart-tab-dropdown .chart-tab-btn {
    border-radius: 6px;
    border: 1px solid transparent;
    padding: 8px 12px;
    justify-content: flex-start;
    width: 100%;
}
.chart-tab-dropdown .chart-tab-btn .tab-icon { display: inline-flex; }

/* ── Extras slot (e.g. SA date picker) ── */
.chart-tab-extras {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 2;
}

/* ── Mobile: compact tabs ── */
@media (max-width: 768px) {
    .chart-tabs { padding: 4px 0 0 0; }
    .chart-tab-btn {
        padding: 5px 8px;
        font-size: 0.72rem;
    }
    .chart-tab-btn .tab-icon { display: none; }
    /* Keep icons visible inside dropdown on mobile — labels are shorter when stacked */
    .chart-tab-dropdown .chart-tab-btn { padding: 8px 10px; font-size: 0.78rem; }
    .chart-tab-dropdown .chart-tab-btn .tab-icon { display: inline-flex; }
    .chart-tab-more {
        padding: 5px 10px;
        font-size: 0.82rem;
    }
    /* Move extras to its own row below tabs (no overlap with More ▾) */
    .chart-tab-extras {
        position: static;
        transform: none;
        padding: 6px 8px;
        justify-content: flex-end;
        border-top: 1px solid var(--color-border, rgba(255,255,255,0.08));
    }
}

/* ── Print ── */
@media print {
    .chart-tabs-wrap { display: none !important; }
}