/* RD-2805 — Drill-down tables in #modal-metric-detail.
 *
 * The problem: these modals render every filtered row (371 merged PRs on the
 * Leanmote org, thousands on a big one) into a modal that grows to whatever
 * height the table needs. The page ends up scrolling a modal taller than the
 * viewport, and the column headers — which carry the per-column filter buttons
 * — scroll out of reach after ~15 rows.
 *
 * The fix: the TABLE gets the scrollport, not the page. `.lm-md-scroll` is a
 * bounded two-axis scroller and `<thead>` sticks to its top edge.
 *
 * Why the scroller is here and not on `.modal-body`: sticky would then anchor to
 * the body's padding box, leaving rows visible in the padding strip above the
 * pinned header. Scoping the scrollport to the table also keeps the summary
 * row, the tab strip and the "showing N of M" counter parked outside it, always
 * on screen.
 *
 * Replaces the `transform: scaleY(-1)` double-flip these wrappers used to carry
 * (a trick to float the horizontal scrollbar above the table). A transformed
 * ancestor becomes the containing block for its descendants, which kills both
 * `position: sticky` on the header and `position: fixed` on the portalized
 * filter menus. With the height bounded, the bottom scrollbar is always on
 * screen anyway, so the trick has nothing left to buy.
 *
 * Loaded after style.bundle.css so these win over Bootstrap's table rules.
 */

#modal-metric-detail .lm-md-scroll {
    /* Bounded so the modal stops growing with the row count. 58vh leaves room
     * for the modal header/footer plus the summary + counter that sit outside
     * this box, inside a dialog already capped by .modal-dialog-scrollable. */
    max-height: 58vh;
    overflow: auto;
    /* The scrollport is the sticky header's containing block: no transform, no
     * filter, no `will-change` may be introduced here or the header unsticks. */
}

#modal-metric-detail .lm-md-scroll > table > thead > tr > th {
    /* !important because the PR-activity header cells carry Bootstrap's
     * .position-relative utility, which is itself !important and would
     * otherwise win and silently unstick the header. Sticky is a positioned
     * element too, so it keeps serving as the containing block for the filter
     * menu that lives inside the <th> until it is portalized out. */
    position: sticky !important;
    top: 0;
    /* Above the striped rows, below the portalized filter menus (z-index 1100). */
    z-index: 3;
    /* Opaque: rows scroll underneath, and .table-striped paints its own row
     * backgrounds that would otherwise read through. */
    background-color: var(--bs-body-bg, #ffffff);
    /* A real border on a sticky cell scrolls away with the cell box in some
     * engines; box-shadow paints reliably at the pinned edge. */
    box-shadow: inset 0 -1px 0 var(--bs-border-color, #f1f1f4);
}

/* The filter menu lives inside the <th> until it is portalized out on open.
 * Until then it must not stretch the sticky header's height. */
#modal-metric-detail .lm-md-scroll > table > thead > tr > th .pr-column-filter-menu {
    position: absolute;
}