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

.reports-browser-container {
    width:      1200px;
    height:     500px;
    display:    flex;
    background: var(--bsx-bg-dark);
    overflow:   hidden;
}

.reports-list {
    display:        flex;
    flex-direction: column;
    width:          27%;
    height:         100%;
    gap:            5px;
    overflow-y:     auto;
    padding:        8px;
    justify-items:  start;
    box-sizing:     border-box;
}

.report-item {
    padding:       8px 12px;
    cursor:        pointer;
    display:       flex;
    background:    #343337;
    color:         var(--bsx-text-sub);
    border:        1px solid var(--bsx-border);
    border-radius: var(--bsx-radius-lg);
    overflow-x:    hidden;
    transition:    all var(--bsx-transition-med);
}

.report-item:hover  { background: var(--bsx-bg); box-shadow: var(--bsx-shadow-sm); transform: scale(1.05); }
.report-item.active { background: var(--bsx-bg); }
.report-item p:empty { display: none; }
.report-info        { flex: none; min-width: 0; }

.report-title  { margin: 0 20px; font-size: var(--bsx-text-base); font-weight: 600; color: var(--bsx-text); }
.report-date   { margin: 0 20px; font-size: var(--bsx-text-sm);  color: var(--bsx-accent); }
.disclaim      { margin-top: 15px; font-size: 0.7rem; color: #736e70; }

.reports-detail {
    width:      67%;
    height:     100%;
    padding:    30px;
    overflow-y: auto;
    background: var(--bsx-bg-dark);
    position:   relative;
}

.detail-placeholder {
    display:     flex;
    align-items: center;
    justify-content: center;
    height:      100%;
    color:       var(--bsx-text-sub);
    text-align:  center;
    font-style:  italic;
    font-size:   var(--bsx-text-base);
}

.detail-content        { display: none; animation: fadeIn 0.3s ease; font-size: var(--bsx-text-sm); color: var(--bsx-text); line-height: 1.3rem; }
.detail-content.active { display: block; }
.detail-content h2     { margin-top: 0; color: var(--bsx-accent); font-size: var(--bsx-text-base); }
.detail-content p      { font-size: var(--bsx-text-sm); line-height: var(--bsx-text-sm); color: #eabcae; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Scrollbars */
.reports-list::-webkit-scrollbar,
.reports-detail::-webkit-scrollbar       { width: 8px; }
.reports-list::-webkit-scrollbar-track,
.reports-detail::-webkit-scrollbar-track { background: var(--bsx-bg-deep); }
.reports-list::-webkit-scrollbar-thumb,
.reports-detail::-webkit-scrollbar-thumb { background: var(--bsx-bg-mid); border-radius: 2px; }
.reports-list::-webkit-scrollbar-thumb:hover,
.reports-detail::-webkit-scrollbar-thumb:hover { background: var(--bsx-bg-deep); }