/* ============================================================
   BSX CAMPAIGN TABS
   Requires: bsx-design.css, bsx-base.css
   ============================================================ */

.ctab-browser-container {
    width:       1240px;
    height:      500px;
    display:     flex;
    flex-direction: row;
    flex-wrap:   nowrap;
    gap:         5px;
    background:  var(--bsx-bg-dark);
    overflow:    auto;
}

.ctab-sidetext-container {
    width:          34%;
    height:         100%;
    display:        flex;
    flex-wrap:      wrap;
    flex-direction: column;
    gap:            5px;
    padding:        8px;
    justify-items:  start;
}

.ctab-sidetext-item {
    display:         flex;
    justify-content: space-between;
    padding:         8px 10px;
    font-size:       var(--bsx-text-sm);
    line-height:     1rem;
}

.st-label { text-align: left;  font-size: var(--bsx-text-sm); }
.st-val   { font-size: var(--bsx-text-sm); font-weight: bold; text-align: right; margin-right: 15px; }

.ctab-chart-container {
    display:        flex;
    flex-wrap:      wrap;
    flex-direction: column;
    width:          66%;
    height:         100%;
    padding:        10px;
    background:     var(--bsx-bg-dark);
    position:       relative;
    animation:      fadeIn 0.3s ease;
}

@media (max-width: 768px) {
    .ctab-browser-container    { width: 300%; flex-direction: column; }
    .ctab-sidetext-container   { width: 100%; }
    .ctab-chart-container      { width: 34%; }
    .st-label, .st-val         { font-size: var(--bsx-text-base); }
}