/* 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;
}

/* Cycle Time / Time to Market column filters (LmDetailFilters): the funnel takes
 * the header label and the sort arrow stays beside it, never wrapping under it
 * (the same row css/shared/filter-bar.css gives Discoveries). */
#modal-metric-detail .lm-colfilter-row .custom-sort-indicator {
    flex: none;
}

/* Cycle Time / Time to Market Show Details (.lm-md-fit): the table fits the
 * modal, never wider, so no column is left behind a horizontal scrollbar that
 * sits under the last row. The text columns keep sizing themselves by what
 * they hold, and the time-per-status chart takes the room they leave: its
 * header asks for a share, and the chart is drawn at whatever width the column
 * got. Absolute, so a drawn chart never holds its column open (a 380px chart
 * used to push Owner out of Time to Market's nine columns). */
#modal-metric-detail table.lm-md-fit > thead > tr > th.lm-md-fit__chart {
    width: 36%;
}

/* Below 1200px Bootstrap drops modal-xl to 800px (500px under 992), where no
 * nine-column drill-down fits. Up to its usual 1140px, the dialog takes the
 * window's width minus the usual margins instead. */
@media (min-width: 576px) and (max-width: 1199.98px) {
    #modal-metric-detail .modal-dialog.modal-xl {
        --bs-modal-width: calc(100vw - 3.5rem);
    }
}

#modal-metric-detail .lm-md-fit__plotbox {
    position: relative;
    height: 30px;
}

#modal-metric-detail .lm-md-fit__plot {
    position: absolute;
    inset: 0;
}

/* A table here must fit the modal, and next to the time-per-status column
 * not every title fits on one line: a header takes a second one when its column
 * needs it ("Ítem de / Trabajo"), breaking at spaces (css/shared/filter-bar.css).
 * Both lines start at the column's left edge, like every other header. */
#modal-metric-detail .lm-colfilter__col {
    text-align: start;
}

#modal-metric-detail .lm-colfilter,
#modal-metric-detail .lm-colfilter__toggle {
    max-width: none;
}