/* ============================================================
   BSX CASSANDRA OVERVIEW
   Requires: bsx-design.css, bsx-base.css
   ============================================================ */

.cass-sidebar-wrapper {
    background:    var(--bsx-bg-mid);
    border:        1px solid var(--bsx-border);
    border-radius: var(--bsx-radius-xl);
    padding:       1.5rem;
    color:         var(--bsx-text);
    position:      fixed;
    top:           142px;
    width:         13%;
    max-height:    calc(100vh - 40px);
    overflow-y:    auto;
}

.cass-over-sidebar {
    padding:    100px 20px 0 20px;
    align-self: start;
    max-height: 100vh;
    overflow-y: auto;
}

.cass-over-header          { margin-bottom: 5px; padding: 20px 20px 0; }
.cass-over-header h1       { color: #f0f0f0; font-size: var(--bsx-text-sm); margin-bottom: 0.1rem; font-weight: 300; letter-spacing: 1px; }

.sort-controls { display: flex; flex-direction: column; gap: 0; line-height: 0.8rem; }

.cass-over-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap:                   25px;
    margin:                20px;
    width:                 100%;
}

.cass-over-grid[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.cass-over-grid[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
.cass-over-grid[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }

.cass-over-card {
    background:    var(--bsx-bg-mid);
    border:        1px solid var(--bsx-border);
    border-radius: var(--bsx-radius-2xl);
    padding:       1.25rem;
    transition:    all var(--bsx-transition-med);
    box-shadow:    var(--bsx-shadow-lg);
}

.cass-over-card:hover {
    background:   var(--bsx-bg);
    box-shadow:   var(--bsx-shadow-md);
    transform:    scale(1.05);
    border-color: var(--bsx-accent-mid);
}

.cass-over-logo {
    width:         140px;
    height:        105px;
    object-fit:    contain;
    margin:        0 auto 5px;
    display:       block;
    padding:       5px;
    border-radius: var(--bsx-radius-xl);
}

.cass-over-name {
    color:          #f0f0f0;
    font-size:      var(--bsx-text-lg);
    font-weight:    500;
    margin-bottom:  10px;
    text-align:     center;
    letter-spacing: 0.5px;
}

.cass-over-info { display: grid; gap: 5px; margin-bottom: 2px; }

.info-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    color:           #b0b0b0;
    font-size:       var(--bsx-text-md);
    padding:         4px 0;
    border-bottom:   1px solid #333;
}

.info-label { color: #808080; font-weight: 500; }
.info-value { color: #e0e0e0; font-weight: 600; }

.co-performance-metrics {
    display:          grid;
    grid-template-columns: repeat(3, 1fr);
    gap:              10px;
    margin-top:       5px;
    padding-top:      5px;
    border-top:       1px solid #3a3a3a;
}

.co-metric       { text-align: center; }
.co-metric-label { font-size: var(--bsx-text-md); color: #808080; margin-bottom: 2px; }
.co-metric-value { font-size: var(--bsx-text-md); font-weight: 700; color: var(--bsx-accent); }
.co-rating-stars { text-align: center; margin-top: 5px; color: var(--bsx-accent); font-size: 1.3rem; }

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

@media (max-width: 1200px) {
    .cass-over-grid[data-columns="4"] { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) and (min-width: 768px) {
    .cass-over-sidebar { padding: 20px; max-height: none; overflow-y: visible; }
    .cass-over-grid    { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 15px; }
}

@media (max-width: 767px) and (min-width: 568px) {
    .cass-sidebar-wrapper { position: static; width: 100%; max-height: none; overflow-y: visible; margin-bottom: 1rem; }
    .cass-over-sidebar    { padding: 5px; max-height: none; overflow-y: visible; }
    .cass-over-grid       { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 15px; margin: 2%; width: 96%; }
}

@media (max-width: 567px) {
    .cass-sidebar-wrapper { position: static; width: 100%; max-height: none; overflow-y: visible; margin-bottom: 1rem; }
    .cass-over-sidebar    { padding: 5px; max-height: none; overflow-y: visible; }
    .cass-over-grid       { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 15px; margin: 2%; width: 96%; }
}

@media (max-width: 768px) {
    .cass-over-grid { grid-template-columns: 1fr !important; }
    .sort-controls  { flex-direction: column; }
    .sort-btn       { width: 100%; }
}