/* --- Pivot Data Toggle Styles --- */

.signal-container {
    display: none;
}

.pivot-container {
    border: 1px solid var(--ga-color-border);
    border-radius: var(--ga-radius-lg);
    margin: 20px 0;
    overflow: hidden; /* Ensures smooth corners */
}

.pivot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    cursor: pointer;
    background-color: var(--ga-color-surface-soft);
    list-style: none; /* Removes the default arrow marker */
}

.pivot-header::-webkit-details-marker {
    display: none; /* Also removes the marker in Safari/Chrome */
}

.pivot-header h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

/* Custom toggle arrow icon */
.toggle-icon {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--ga-color-text); /* Arrow pointing down */
    transition: transform 0.3s ease;
}

/* Rotate the arrow when the details element is open */
.pivot-container[open] > .pivot-header .toggle-icon {
    transform: rotate(180deg);
}

.pivot-content {
    padding: 15px;
    border-top: 1px solid var(--ga-color-border);
}

/* --- Main Layout with Sidebar --- */
.main-analysis-container {
    display: flex;
    gap: 20px;
    width: 100%;
    margin: 0 auto;
}

.chart-section {
    flex: 1;
    min-width: 0; /* Prevents flex item from overflowing */
}

/* Mobile responsiveness for layout */
@media (max-width: 768px) {
    .main-analysis-container {
        flex-direction: column;
        gap: 15px;
    }

    /* Profile sidebar will be styled by profileSidebar.css but positioned here */
    .profile-sidebar {
        order: -1; /* Show sidebar above chart on mobile */
    }
}

@media (max-width: 480px) {
    .main-analysis-container {
        gap: 10px;
    }
}