/* ═══════════════════════════════════════
   FEED INSTITUTIONS — 2-PANE LAYOUT
   Mirrors feed_analyst.css structure
═══════════════════════════════════════ */

#feed-institutions {
    display: none;
    width: 100%;
}

#feed-institutions.active {
    display: block;
}

/* ── Grid: full viewport height (matches .analyst-grid) ── */
.inst-grid {
    display: flex;
    width: 100%;
    height: calc(100vh - 100px);
    min-height: 600px;
}

.inst-grid .card-slot.full-width {
    flex: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ── Main card ── */
.inst-main-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 88vh;
    overflow: hidden;
}

/* ── 2-pane body split ── */
.inst-body-split {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    overflow: hidden;
    padding: 0;
    gap: 0;
    min-height: 0;
}

/* ── LEFT pane: market overview (38%) ── */
.inst-stream-pane {
    flex: 0 0 38%;
    max-width: 38%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid var(--border);
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    box-sizing: border-box;
}

/* ── RIGHT pane: institution detail (62%) ── */
.inst-detail-pane {
    flex: 0 0 62%;
    max-width: 62%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Search bar: fixed at top of right pane */
.inst-search-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-base);
}

/* Detail content: flex column, no overflow — children manage their own scroll */
.inst-detail-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Fund dashboard: flex column filling full detail content height */
.fund-dashboard {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

/* ── Chart grid: 2×2 inside the 62% right pane ── */
.fund-charts-grid {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
}

.fund-chart-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 260px;
    min-height: 220px;
    overflow: hidden;
    position: relative;
    isolation: isolate;
}

.fund-chart-card .fund-chart-title {
    flex: 0 0 auto;
    min-height: 18px;
    margin-bottom: 6px;
}

.fund-chart-canvas {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: auto !important;
    position: relative;
    overflow: hidden;
}

.fund-chart-canvas > div,
.fund-chart-canvas canvas,
.fund-chart-canvas svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    display: block;
}

/* ── Table: fills remaining height ── */
#fund-dynamic-table {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 8px 8px;
    display: flex;
    flex-direction: column;
}

.fund-table-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.fund-table-body {
    display: block;
}

/* ── Responsive: stack at 1100px ── */
@media (max-width: 1100px) {
    .inst-grid {
        height: auto;
        min-height: auto;
    }

    .inst-main-card {
        max-height: none;
        overflow: visible;
    }

    .inst-body-split {
        flex-direction: column;
        overflow: visible;
    }

    .inst-stream-pane {
        flex: none;
        max-width: 100%;
        height: 45vh;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .inst-detail-pane {
        flex: none;
        max-width: 100%;
        height: auto;
        min-height: 55vh;
        overflow: visible;
    }

    .inst-detail-content {
        overflow-y: auto;
        min-height: 0;
    }

    .fund-dashboard {
        flex: 0 0 auto;
        height: auto;
    }

    .fund-charts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fund-chart-card { height: 240px; }

    #fund-dynamic-table { flex: 0 0 auto; }

    .fund-table-wrapper {
        flex: none;
        max-height: 380px;
    }
}

/* ── Mobile ── */
@media (max-width: 768px) {
    .inst-stream-pane { height: 40vh; }

    .fund-charts-grid {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 6px;
    }

    .fund-chart-card { height: 220px; }

    #fund-dynamic-table { padding: 0 6px 80px; }
}

/* ── Small mobile ── */
@media (max-width: 480px) {
    .inst-search-bar { padding: 8px 10px; gap: 6px; }
    .inst-stream-pane { height: 38vh; }
    .fund-chart-card { height: 200px; }
}