/* ============================================================
   BSX REPORTS OVERVIEW  v2.0
   All selectors prefixed bsx-rep-over-*
   Requires: bsx-design.css, bsx-base.css, bsx-rep-row.css
   Full screen width — sidebar 12% | gap 3% | rows 70% | right 15%
   ============================================================ */

/* ── Outer wrapper ───────────────────────────────────────── */
.bsx-rep-over-wrap {
    display:               grid;
    grid-template-columns: 12% 3% 70% 15%;
    width:                 100%;
    box-sizing:            border-box;
    align-items:           flex-start;
}

/* ── Sidebar — col 1, sticky ─────────────────────────────── */
.bsx-rep-over-sidebar {
    grid-column:    1;
    position:       sticky;
    top:            5rem;
    display:        flex;
    flex-direction: column;
    gap:            0.4rem;
    padding-top:    0.5rem;
    padding-left:   20px;
}

.bsx-rep-over-sidebar__label {
    font-size:      var(--bsx-text-xs);
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--bsx-text);
    opacity:        0.45;
    margin-bottom:  0.3rem;
}

/* ── Nav buttons ─────────────────────────────────────────── */
.bsx-rep-over-btn {
    display:       flex;
    align-items:   center;
    gap:           0.4rem;
    width:         100%;
    padding:       0.4rem 0.6rem;
    border:        1px solid var(--bsx-border);
    border-radius: var(--bsx-radius-md, 6px);
    background:    transparent;
    color:         var(--bsx-text);
    font-size:     var(--bsx-text-sm);
    font-weight:   400;
    cursor:        pointer;
    text-align:    left;
    transition:    all var(--bsx-transition);
}

.bsx-rep-over-btn:hover {
    background:   var(--bsx-bg-mid);
    border-color: var(--bsx-accent-mid);
}

.bsx-rep-over-btn.active {
    background:   var(--bsx-bg-mid);
    border-color: var(--bsx-accent-mid);
    font-weight:  600;
}

.bsx-rep-over-btn__icon {
    font-size:   0.9rem;
    opacity:     0.6;
    flex-shrink: 0;
}

/* ── Report list — col 3 ─────────────────────────────────── */
.bsx-rep-over-list {
    grid-column: 3;
}

/* ── Row wrapper ─────────────────────────────────────────── */
.bsx-rep-over-item {
    margin-bottom: 0.2rem;
}

/* ── Group headers (inserted by JS) ──────────────────────── */
.bsx-rep-over-group-header {
    display:       flex;
    align-items:   center;
    gap:           0.5rem;
    padding:       0.5rem 0 0.25rem;
    margin-top:    0.75rem;
    border-bottom: 1px solid var(--bsx-border);
    font-size:     var(--bsx-text-md);
    font-weight:   600;
    color:         var(--bsx-text);
}

.bsx-rep-over-group-header:first-child { margin-top: 0; }

.bsx-rep-over-group-header img {
    width:      38px;
    height:     25px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ── Empty state ─────────────────────────────────────────── */
.bsx-rep-over-empty {
    font-size: 0.85rem;
    opacity:   0.5;
    padding:   1rem 0;
}


/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 1023px) and (min-width: 768px) {
    .bsx-rep-over-wrap {
        grid-template-columns: 14% 2% 84% 0%;
    }
}

@media (max-width: 767px) and (min-width: 568px) {
    .bsx-rep-over-wrap {
        display:        flex;
        flex-direction: column;
        gap:            0.75rem;
    }
    .bsx-rep-over-sidebar {
        position:       static;
        flex-direction: row;
        align-items:    center;
        flex-wrap:      wrap;
        gap:            0.4rem;
        padding-top:    0;
    }
    .bsx-rep-over-sidebar__label { margin-bottom: 0; margin-right: 0.3rem; }
    .bsx-rep-over-btn            { width: auto; }
}

@media (max-width: 567px) {
    .bsx-rep-over-wrap {
        display:        flex;
        flex-direction: column;
        gap:            0.5rem;
    }
    .bsx-rep-over-sidebar {
        position:       static;
        flex-direction: row;
        flex-wrap:      wrap;
        gap:            0.3rem;
        padding-top:    0;
    }
    .bsx-rep-over-sidebar__label { display: none; }
    .bsx-rep-over-btn {
        width:     auto;
        font-size: var(--bsx-text-xs);
        padding:   0.3rem 0.5rem;
    }
}