/* ── Large screens (≥992px): right panel always visible inline ── */
@media (min-width: 992px) {
    .detail-panel {
        display: block !important;
        height: calc(100vh - 120px);
        overflow-y: auto;
        border-left: 1px solid #dee2e6;
        padding: 0 0 1.5rem 1rem;
        position: sticky;
        top: 70px;
    }
    .list-panel {
        height: calc(100vh - 120px);
        overflow-y: auto;
    }
}

/* ── Small screens (<992px): hidden by default, overlay when active ── */
@media (max-width: 991.98px) {
    .detail-panel {
        display: none;
    }
    .detail-panel.is-active {
        display: block !important;
        position: fixed;
        inset: 0;
        z-index: 1050;
        overflow-y: auto;
        background: #fff;
        padding: 1rem;
    }
}