/* =============================================================================
   Act Management page CSS
   Prefix: mw-acts-*
   ============================================================================= */

/* NOTE: Positioning context for the shared, floating control bar. The bar must
   sit OUTSIDE both tab panels (so it shows for both views and is never duplicated)
   yet visually land in the data-grid's toolbar / search row. We get that by making
   the shell the positioned ancestor and absolutely positioning the controls. */
.mw-acts-shell {
    position: relative;
}

/* NOTE: Shared action controls — pinned to the top-right of the grid's toolbar row.
   Absolute (not fixed) so it anchors to the page content, not the viewport, and does
   NOT scroll: the grid scrolls internally, the toolbar row is static, so the bar stays
   put. --mw-acts-controls-top aligns it with the search-field row, i.e. just below the
   MudTabs header. If the tab-header height ever changes, tune this one value. */
.mw-acts-controls {
    position: absolute;
    top: var(--mw-acts-controls-top, 50px);
    right: 16px;
    z-index: 6;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* NOTE: Keep the Cards-view search field narrow and left-aligned so the floating
   control bar on the right never overlaps it (mirrors the grid's own 200px search). */
.mw-acts-card-search {
    max-width: 460px;
}

/* NOTE: Scroll viewport for the virtualized Cards view. <Virtualize> needs an ancestor
   with a fixed height + overflow so it can measure the visible window and render only the
   cards in view. Without this every card (and every thumbnail) mounted at once. */
.mw-acts-card-scroll {
    height: calc(var(--mw-full-height) - 120px);
    overflow-y: auto;
}

/* NOTE: Single-line clipped cell content with an ellipsis. Pair with a title="" attribute so
   the full text shows on hover. Used for long free-text grid columns; keeps rows uniform-height
   (tall/variable rows break the grid's row virtualization).
   The cap MUST be a fixed px, not 100%: the grid table is table-layout:auto with width:max-content,
   so a column grows to fit its content — max-width:100% resolves against that content-driven width
   and never clips. A definite max-width on this block span caps the span's content width, which in
   turn caps the auto-layout column, so the text finally clips with an ellipsis. */
.mw-acts-clip {
    display: block;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}