/* ============================================================
   BSX REPORT ROW  v2.0  — overview variant
   All selectors prefixed bsx-report-over-* / bsx-rep-over-*
   Requires: bsx-design.css, bsx-base.css
   ============================================================ */

/* ── Outer link ──────────────────────────────────────────── */
a:has(.bsx-report-over-row) {
    display:         block;
    text-decoration: none;
    color:           var(--bsx-text);
    margin-bottom:   0.25rem;
    transition:      all var(--bsx-transition);
}

a:has(.bsx-report-over-row):hover .bsx-report-over-row {
    background:   var(--bsx-bg);
    box-shadow:   var(--bsx-shadow-md);
    transform:    scale(1.01);
    border-color: var(--bsx-accent-mid);
}

/* ── Row container — 8-col × 2-row grid ─────────────────── *
 * col 1 : company logo  (spans rows 1–2)                    *
 * col 2 : title                                             *
 * col 3 : date                                              *
 * col 4 : Initial/Follow-up tag                             *
 * col 5 : KPI-1 placeholder                                 *
 * col 6 : KPI-2 placeholder                                 *
 * col 7 : external link                                     *
 * col 8 : cassandra logo (spans rows 1–2)                   *
 * row 2   col 2–7: summary excerpt                          *
 * ─────────────────────────────────────────────────────────── */
.bsx-report-over-row {
    display:               grid;
    grid-template-columns: 12% 27% 13% 10% 8% 8% 8% 12%;
    grid-template-rows:    auto auto;
    column-gap:            0.3rem;
    row-gap:               0.2rem;
    align-items:           center;

    border:        1px solid var(--bsx-border);
    border-radius: var(--bsx-radius-lg);
    padding:       0.3rem 0.5rem;
    background:    var(--bsx-bg-mid);
    transition:    all var(--bsx-transition);
    width:         100%;
    box-sizing:    border-box;
}

/* ── Company logo — col 1, rows 1–2 ─────────────────────── */
.bsx-rep-over-logo-corp {
    grid-column: 1;
    grid-row:    1 / span 2;
    display:     flex;
    align-items: center;
}

.bsx-rep-over-logo-corp img {
    width:      90px;
    max-height: 60px;
    object-fit: contain;
    display:    block;
}

/* ── Title — col 2, row 1 ────────────────────────────────── */
.bsx-rep-over-title {
    grid-column:   2;
    grid-row:      1;
    font-weight:   600;
    font-size:     1rem;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    color:         #edcb82;
}

/* ── Date — col 3, row 1 ─────────────────────────────────── */
.bsx-rep-over-date {
    grid-column: 3;
    grid-row:    1;
    font-size:   0.9rem;
    font-weight: 400;
    color:       var(--bsx-text);
    opacity:     0.6;
}

/* ── Tag wrapper — col 4, row 1 ──────────────────────────── */
.bsx-rep-over-tag {
    grid-column: 4;
    grid-row:    1;
}

.bsx-tag {
    display:        inline-block;
    font-size:      0.8rem;
    font-weight:    700;
    text-transform: uppercase;
    padding:        2px 2px;
    border-radius:  3px;
    white-space:    nowrap;

}

.bsx-tag--initial { background: transparent; color: #ffcc33; }
.bsx-tag--fup     { background: transparent; color: #eb7e47; }
.bsx-tag--exit    { background: transparent; color: #f765f7; }
.bsx-tag--other   { background: transparent; color: #888888; }

/* ── KPI placeholders — cols 5–6, row 1 ─────────────────── */
.bsx-rep-over-kpi {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       44px;
    height:          22px;
    border-radius:   4px;
    background:      rgba(0,0,0,0.05);
    font-size:       var(--bsx-text-sm);
    font-weight:     600;
}
.bsx-rep-over-kpi:empty  { visibility: hidden; }
.bsx-rep-over-kpi--1     { grid-column: 5; grid-row: 1; }
.bsx-rep-over-kpi--2     { grid-column: 6; grid-row: 1; }

/* ── External link wrap — col 7, row 1 ──────────────────── */
.bsx-rep-over-extlink-wrap {
    grid-column:     7;
    grid-row:        1;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

/* Button reset + styling */
.bsx-rep-over-extlink {
    background:    none;
    border:        none;
    padding:       3px;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    color:         var(--bsx-text);
    opacity:       0.4;
    transition:    opacity 0.15s;
    border-radius: 4px;
}
.bsx-rep-over-extlink:hover { opacity: 1; }

/* ── Cassandra logo — col 8, rows 1–2 ───────────────────── */
.bsx-rep-over-logo-cass {
    grid-column:     8;
    grid-row:        1 / span 2;
    display:         flex;
    align-items:     center;
    justify-content: flex-end;
}

.bsx-rep-over-logo-cass img {
    width:      90px;
    max-height: 60px;
    object-fit: contain;
    display:    block;
}

/* ── Summary — cols 2–7, row 2 ──────────────────────────── */
.bsx-rep-over-summary {
    grid-column: 2 / 8;
    grid-row:    2;
    font-size:   var(--bsx-text-sm);
    color:       var(--bsx-text);
    opacity:     0.65;
    line-height: 1.4;
    display:     -webkit-box;
    -webkit-line-clamp:  2;
    -webkit-box-orient:  vertical;
    overflow:    hidden;
}


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

@media (max-width: 1023px) and (min-width: 768px) {
    .bsx-report-over-row {
        grid-template-columns: 10% 32% 14% 12% 7% 7% 6% 10%;
    }
    .bsx-rep-over-title { font-size: 0.85rem; }
    .bsx-rep-over-logo-corp img,
    .bsx-rep-over-logo-cass img { width: 70px; height: 46px; }
}

@media (max-width: 767px) and (min-width: 568px) {
    .bsx-report-over-row {
        grid-template-columns: 12% 50% 20% 10% 8%;
        grid-template-rows:    auto auto;
    }
    .bsx-rep-over-logo-corp    { grid-column: 1; grid-row: 1 / span 2; }
    .bsx-rep-over-title        { grid-column: 2; grid-row: 1; }
    .bsx-rep-over-date         { grid-column: 3; grid-row: 1; }
    .bsx-rep-over-tag          { grid-column: 2; grid-row: 2; }
    .bsx-rep-over-extlink-wrap { grid-column: 4; grid-row: 1; }
    .bsx-rep-over-logo-cass    { grid-column: 5; grid-row: 1 / span 2; }
    .bsx-rep-over-kpi--1,
    .bsx-rep-over-kpi--2       { display: none; }
    .bsx-rep-over-summary      { grid-column: 2 / 5; grid-row: 3; }
    .bsx-rep-over-logo-corp img,
    .bsx-rep-over-logo-cass img { width: 60px; height: 40px; }
}

@media (max-width: 567px) {
    .bsx-report-over-row {
        grid-template-columns: 18% 58% 14% 10%;
        grid-template-rows:    auto auto auto;
        column-gap:            0.2rem;
    }
    .bsx-rep-over-logo-corp    { grid-column: 1; grid-row: 1 / span 2; }
    .bsx-rep-over-title        { grid-column: 2 / 4; grid-row: 1; font-size: 0.82rem; }
    .bsx-rep-over-date         { grid-column: 2 / 4; grid-row: 2; font-size: var(--bsx-text-xs); opacity: 0.55; }
    .bsx-rep-over-extlink-wrap { grid-column: 4; grid-row: 1; }
    .bsx-rep-over-logo-cass    { grid-column: 4; grid-row: 2; justify-content: center; }
    .bsx-rep-over-summary      { grid-column: 1 / -1; grid-row: 3; font-size: var(--bsx-text-xs); }
    .bsx-rep-over-tag,
    .bsx-rep-over-kpi--1,
    .bsx-rep-over-kpi--2       { display: none; }
    .bsx-rep-over-logo-corp img,
    .bsx-rep-over-logo-cass img { width: 50px; height: 33px; }
}

@media (max-width: 360px) {
    .bsx-rep-over-title { font-size: 0.78rem; }
    .bsx-rep-over-date  { font-size: 0.65rem; }
}