/* ============================================================
   BSX CAMPAIGN TABS
   Requires: bsx-design.css, bsx-base.css
   ============================================================ */
.pub-art-browser-container {
    width:       100%;
    display:     flex;
    flex-direction: row;
    flex-wrap:   nowrap;
    gap:         5px;
    background:  var(--bsx-bg-dark);
    overflow:    auto;
}

.pub-art-chart-container {
    overflow:       hidden;
    display:        flex;
    flex-direction: column; /* flex-wrap: wrap removed — was the actual bug */
    width:          100%;
    height:         100%;
    padding:        10px;
    background:     var(--bsx-bg-dark);
    position:       relative;
    animation:      fadeIn 0.3s ease;
}


.bsx-freq-selector {
	display: flex;
	gap: 0.25rem;
	margin-bottom: 0.5rem;
}

.bsx-freq-btn {
	background: transparent;
	border: 1px solid var(--bsx-border);
	color: var(--bsx-text);
	border-radius: var(--bsx-radius-lg, 4px);
	padding: 0.2rem 0.6rem;
	font-size: var(--bsx-text-sm, 0.8rem);
	cursor: pointer;
}

.bsx-freq-btn.active {
	background: var(--bsx-accent-mid);
	border-color: var(--bsx-accent-mid);
}

@media (max-width: 768px) {

    .pub-art-chart-container {
        width:  100%;
        height: auto;
    }

    .bsx-chart-wrapper {
        display:        flex;
        flex-direction: column;
    }

    .bsx-freq-selector {
        width: 100%;
        margin-bottom: 4px;
    }
}