/* ============================================================
   recent-horses-modal.css

   GLOBAL stylesheet for the Blazorise modal shell that hosts
   the <RecentHorses> component on desktop. The modal shell
   renders outside Blazor's scoped CSS tree (modal portal
   rendering), so these rules must live in a global file.

   Scope: applied via :has(.recent-horses) on the modal shell
   elements, so it only affects modals containing this component.

   Breakpoint: aligned to BlazorPro.SmallDown (Bootstrap md ≥768px),
   which is what the parent pages use to decide flyout vs modal.
   ============================================================ */

@media (min-width: 768px) {

    /* Constrain modal vertical span so it never runs off the top or bottom of the screen */
    .modal-dialog:has(.recent-horses) {
        max-height: calc(100vh - 3.5rem);
        margin-top: 1.75rem;
        margin-bottom: 1.75rem;
        display: flex;
        align-items: stretch;
    }

    /* Make modal-content fill the dialog and clip rounded corners.
       overflow: hidden here is essential — it forces .modal-body to size to the
       remaining space, which lets .recent-horses-body inside become the scroll
       container instead of the page. */
    .modal-content:has(.recent-horses) {
        max-height: calc(100vh - 3.5rem);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    /* Strip default modal body padding — the component owns its own padding.
       min-height: 0 + flex: 1 1 auto are critical for the scroll chain to work. */
    .modal-body:has(.recent-horses) {
        padding: 0;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    /* The component root must fill the modal body and not introduce its own
       scrollbar — the actual scrolling happens on .recent-horses-body inside. */
    .modal-body .recent-horses {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
    }
}