/* Mobile Tab Navigation */
.mobile-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    position: -webkit-sticky; /* For Safari support */
    position: sticky;
    top: 0; /* Tells it to stick to the very top of the screen */
    z-index: 100; /* Ensures the tabs stay above your charts and table rows */
    background-color: var(--pico-background-color, #ffffff); /* Crucial: prevents scrolling content from bleeding through */
    padding-top: 10px; /* Optional: adds a little breathing room at the top */
    padding-bottom: 10px;
}

.tab-btn {
    flex: 1;
    padding: 0.5rem;
    text-align: center;
    background: var(--pico-secondary-background);
    border: 1px solid var(--pico-secondary-border);
    border-radius: var(--pico-border-radius);
    cursor: pointer;
    font-weight: bold;
    color: var(--pico-color);
}

.tab-btn.active {
    background: var(--pico-primary-background);
    color: var(--pico-primary-inverse);
    border-color: var(--pico-primary-background);
}

/* Hide inactive tab content on mobile */
.tab-content {
    display: none; 
}
.tab-content.active {
    display: block; 
}

/* Table Wrapper to prevent horizontal overflow */
.table-wrapper {
    overflow-x: auto;
    width: 100%;
}

/* Desktop View: Hide Tabs, Show Side-by-Side */
@media (min-width: 992px) {
    .mobile-tabs {
        display: none !important; /* Hide the tab buttons entirely */
    }
    .main-layout {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Table gets 2/3, Sidebar gets 1/3 */
        gap: 2rem;
        align-items: start;
    }
    .tab-content {
        display: block !important; /* Force both columns to be visible */
    }
}