/* ========================================
   RESPONSIVE - MOBILE (< 768px)
   ======================================== */
@media (max-width: 767px) {

    /* Toolbar wrapping */
    .grid-panel>div:first-child {
        flex-wrap: wrap !important;
        padding: 4px 8px !important;
        gap: 4px !important;
    }

    /* DataGrid horizontal scroll */
    .mud-table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Dialogs fullscreen on mobile */
    .mud-dialog {
        max-width: 100vw !important;
        width: 100vw !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .mud-dialog .mud-dialog-content {
        max-height: calc(100vh - 130px) !important;
    }
}

/* ========================================
   RESPONSIVE - TABLET (768px - 1024px)
   ======================================== */
@media (min-width: 768px) and (max-width: 1024px) {

    /* DataGrid horizontal scroll */
    .mud-table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* ========================================
   APPBAR ALIGNMENT - TABLET/MOBILE (<= 1024px)
   MudBlazor gives the toolbar 16px gutters by default plus the icon-buttons their own
   padding, which puts the hamburger icon ~24px from the left edge — reads as "too far to
   the right" and asymmetric against the trailing (notification/avatar) side. Smaller, equal
   side margins + equal button padding line up the leading and trailing elements consistently,
   closer to the edges. Applies to mobile (<768) and tablet (768-1024) — both share this
   header. Global (not AppBar.razor.css): .mud-toolbar is MudAppBar's own internally-rendered
   element, so a scoped rule targeting it never receives the component's b-xxxx scope
   attribute and would silently fail to match (see AppBar.razor's hide-on-mobile wrapper-div
   comment for the same root cause). Ported from the prototype (boxwiseportalprototype
   app.css, mobiel/tablet AppBar-uitlijning). */
@media (max-width: 1024px) {
    .mud-appbar .mud-toolbar {
        padding-left: 8px;
        padding-right: 8px;
        gap: 12px;
    }

    .mud-appbar .mobile-only .mud-icon-button {
        padding: 6px;
    }
}

/* ========================================
   COMPACT PAGER - TABLET/MOBILE (<= 1024px)
   Applies to every page grid. Below desktop we hide the "rows per page" block (page size then
   stays fixed at the default of 50) and the flex spacer, and group "1-50 of 200" + the nav
   arrows compactly on the right. Scoped to .grid-panel so it applies to every page grid; dialog
   grids (outside .grid-panel) keep their default pager. Ported from the prototype
   (boxwiseportalprototype app.css, commit 5a8cd42).
   ======================================== */
@media (max-width: 1024px) {
    /* .mud-table-pagination is a flex sibling of .mud-table-container inside .mud-data-grid
       (display: flex; overflow-x: auto). .mud-table-container opts out of flex-stretch via an
       inline width: max-content (its natural, wide, scrollable table width) — that, combined
       with the pager's default align-items: stretch cross-size, makes the pager's own box grow
       to match that same wide content width instead of the viewport. With
       justify-content: flex-end (below), its "1-50 of 200" + arrows then render right-aligned
       inside that oversized box — off-screen, reachable only via horizontal scroll. Explicit
       width overrides stretch (align-self here is redundant belt-and-braces), pinning the pager
       to .mud-data-grid's own (viewport-sized) width so it's always fully visible without
       scrolling. */
    .grid-panel .mud-table-pagination {
        align-self: flex-start;
        width: 100%;
        min-width: 0;
    }

    /* !important needed: MudBlazor has its own responsive pager rule below mobile width
       (flex-wrap: wrap + a visible spacer) that otherwise wins and grows the bar to ~100px. */
    .grid-panel .mud-table-pagination-toolbar {
        flex-wrap: nowrap !important;
        gap: 0 !important;
        justify-content: flex-end !important;
        align-items: center !important;
        min-height: 48px !important;
        padding: 0 8px !important;
    }

    /* Hide "rows per page" entirely (label + select) plus the flex spacer that causes the
       leftover space/height. Page size is then fixed at 50. */
    .grid-panel .mud-table-pagination-spacer,
    .grid-panel .mud-table-pagination-caption:first-of-type,
    .grid-panel .mud-table-pagination-select {
        display: none !important;
    }

    /* "1-50 of 200" more compact, right next to the arrows. */
    .grid-panel .mud-table-pagination-caption:last-of-type {
        font-size: 0.75rem;
        white-space: nowrap;
        margin: 0 4px 0 0 !important;
    }

    /* More compact nav buttons; override any margin-left: auto. */
    .grid-panel .mud-table-pagination-actions {
        margin: 0 !important;
    }

    .grid-panel .mud-table-pagination-actions .mud-icon-button {
        padding: 6px;
    }
}