/*
 * dash_table DataTable dropdown cells: stopping the option list from being
 * clipped, especially in the LAST row (where a user is usually typing).
 *
 * The problem: DataTable renders a dropdown's option list inline, inside
 * the table's own scrolling container, rather than in a floating layer
 * over the page. The table needs `overflowX: auto` so a wide table can
 * scroll sideways -- and per the CSS overflow spec, once ONE axis is
 * `auto`, the other axis can no longer be `visible`; it is forced to a
 * scrolling value too. So the container unavoidably clips vertically as
 * well, and any option list that extends past the last row is cut off.
 * That is why simply setting `overflow: visible` on the inner containers
 * (what this file used to do) could never work, and why the earlier
 * `minHeight: 260px` on style_table only helped a nearly-empty table: with
 * enough rows, the container hugs its content and the last row is flush
 * against the clipping edge again.
 *
 * The fix: while a dropdown is actually open, temporarily reserve space
 * below the table INSIDE the clipping box, so the list has somewhere to
 * render. react-select (which DataTable uses) marks the open dropdown with
 * `.Select.is-open`, and `:has()` lets the ancestor react to it. The space
 * appears only while the list is open and collapses the moment it closes,
 * so there's no permanent gap under the table.
 *
 * .Select-menu's max-height is kept comfortably below the reserved padding
 * so a long list (Grade has nine options) always fits in the space made
 * for it, scrolling internally rather than overflowing the container.
 */
.Select-menu-outer {
    display: block !important;
    z-index: 9999 !important;
    overflow: visible !important;
}
.Select-menu {
    max-height: 200px !important;
    overflow-y: auto !important;
}
.Select-option {
    display: block !important;
}

/* Leave exactly one clipping box in the chain. The outer container is the
   one that has to clip (it carries style_table's overflowX), so the inner
   wrapper is told not to -- otherwise it would cut the list off before the
   reserved space below ever came into play. */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner {
    overflow: visible;
}

/* Only the container that actually clips gets the padding -- adding it to
   the inner element as well would double the reserved space and leave a
   large empty gap under the open list. */
.dash-table-container:has(.Select.is-open) .dash-spreadsheet-container {
    padding-bottom: 215px !important;
}

/* Fallback for browsers without :has() -- the option list opens upward
   from the last row instead, which works whenever there are enough rows
   above it to hold the list. Browsers that DO support :has() never reach
   this, because the rule above has already made room below. */
@supports not selector(:has(*)) {
    .dash-spreadsheet tbody tr:last-child .Select-menu-outer {
        top: auto;
        bottom: 100%;
    }
}

/* Site-wide navigation, page frame and card styles live in theme.css. */