.main,
.content {
    min-width: 0;
}

.content > *,
.content form,
.content fieldset,
.content [class*="-grid"],
.content [class*="-row"],
.content [class*="-card"],
.content [class*="-panel"] {
    min-width: 0;
}

:is(
    [class*="table-wrap"],
    [class*="table-container"],
    .table-responsive,
    .table-scroll
) {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

/* Safety limits shared by the app's dialog implementations. Page-specific
   widths remain intact until the viewport becomes smaller than the dialog. */
:is([class$="-modal"], [class~="modal-box"], [class~="report-modal"]):not(
        [class*="overlay"]
    ):not(.camera-modal) {
    max-width: calc(100vw - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ── Header height (desktop) ───────────────────────────────
   Every .topbar already uses `padding: 18px 32px`, but the bar is only as
   tall as its content: pages with the search pill measured 78px while the
   seven pages without one measured 74px. A min-height pins the whole app to
   the 78px majority without touching pages that already reach it. */
.topbar {
    min-height: 78px;
}

/* Shared server-rendered paginator. Page-specific paginators are normalized
   to the same visual language in the mobile rules below. */
.app-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin-top: 18px;
    padding: 16px 20px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 14px;
    background: var(--bg-card, #fff);
    box-sizing: border-box;
}

.app-pagination__info {
    color: var(--text-muted, #64748b);
    font-size: 0.82rem;
    font-weight: 500;
}

.app-pagination__pages {
    display: flex;
    align-items: center;
    gap: 4px;
}

.app-pagination__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    background: #fff;
    color: var(--text-muted, #64748b);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    box-sizing: border-box;
}

.app-pagination__button:hover:not(.disabled):not(.active) {
    background: var(--blue-light, #dbeafe);
    color: var(--navy, #0f2044);
}

.app-pagination__button.active {
    border-color: var(--navy, #0f2044);
    background: var(--navy, #0f2044);
    color: #fff;
}

.app-pagination__button.disabled {
    opacity: 0.35;
    pointer-events: none;
}

.app-pagination__button.ellipsis {
    min-width: 18px;
    padding: 0;
    border-color: transparent;
    background: transparent;
}

.app-pagination__button svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

@media (max-width: 900px) {
    /* ── Mobile header — one canonical box ──
     53 page stylesheets declared `padding:16px 20px; gap:14px`, 11 drifted to
     `14px 18px; gap:12px` (rendering 72–73px instead of 76px), and the
     staff/admin notification pages never styled the bar at all — once the
     shell switch below revealed it, it came out unstyled at 44px. Declaring
     the canonical box here (loaded last) converges all three cases; the 53
     already-correct pages resolve to identical values, so they don't move. */
    .mobile-topbar {
        align-items: center;
        gap: 14px;
        padding: 16px 20px;
        background: var(--bg);
        min-height: 76px;
        width: 100%;
        max-width: 100%;
        /* 3 of 51 pages drew a hairline under the header and 48 did not. base.css
       already fades in a scroll shadow on every sticky header, so separation is
       handled app-wide; dropping the odd border makes all 51 identical. */
        border-bottom: none;
    }

    /* ── Mobile shell switch — single source of truth ──
     Collapse to one column, swap the desktop sidebar + top bar for the
     mobile top bar. Previously duplicated in ~80 page stylesheets;
     pages that already declare these keep identical values, so the
     cascade result is unchanged for them. Selectors only match the
     shell, so the standalone centered pages (suspended / complete-pickup),
     which have no .app/.sidebar/.topbar, are untouched. */
    .app {
        grid-template-columns: minmax(0, 1fr);
    }
    .sidebar {
        display: none;
    }
    .topbar {
        display: none;
    }
    .mobile-topbar {
        display: flex;
    }

    .mobile-topbar > * {
        min-width: 0;
    }
    .mobile-topbar > .app-logo,
    .mobile-topbar > .back-btn,
    .mobile-topbar > .mobile-back,
    .mobile-topbar > .icon-btn {
        flex: 0 0 auto;
    }
    .mobile-logo-text {
        flex: 1 1 auto;
    }
    .mobile-topbar-icons,
    .mobile-topbar .topbar-icons,
    .mobile-topbar .acct-actions {
        flex: 0 0 auto;
        margin-left: auto;
    }

    /* Student mobile header component: these dimensions are intentionally
     scoped to its component marker and therefore outrank legacy page-level
     .mobile-topbar rules. No Student screen can resize the shared header. */
    header.student-mobile-header {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        width: 100%;
        height: 76px;
        min-height: 76px;
        max-height: 76px;
        padding: 16px;
        gap: 10px;
        background: var(--bg);
        border: 0;
    }

    header.student-mobile-header > .app-logo {
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
        gap: 0;
    }

    header.student-mobile-header > .app-logo > img {
        width: 38px;
        height: 38px;
        max-width: 38px;
        max-height: 38px;
    }

    header.student-mobile-header > .mobile-logo-text {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
        gap: 0;
        line-height: 1.2;
    }

    header.student-mobile-header > a:first-child {
        display: inline-flex;
        flex: 0 0 44px;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        max-width: 44px;
        max-height: 44px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: var(--navy);
    }

    header.student-mobile-header .mobile-logo-text .title {
        display: block;
        margin: 0;
        color: var(--navy);
        font-family: "Poppins", sans-serif;
        font-size: 1.1rem;
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: normal;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    header.student-mobile-header .mobile-logo-text .subtitle {
        display: block;
        margin: 0;
        color: var(--text-muted);
        font-family: "DM Sans", sans-serif;
        font-size: 0.75rem;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: normal;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    header.student-mobile-header > .mobile-topbar-icons,
    header.student-mobile-header .acct-actions {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        margin-left: auto;
        gap: 8px;
    }

    header.student-mobile-header .icon-btn,
    header.student-mobile-header .profile-trigger-avatar {
        display: inline-flex;
        flex: 0 0 44px;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        max-width: 44px;
        max-height: 44px;
        margin: 0;
        padding: 0;
    }

    header.student-mobile-header .icon-btn > svg {
        width: 22px;
        height: 22px;
    }

    header.student-mobile-header .profile-trigger-avatar {
        overflow: hidden;
        border: 0;
        border-radius: 50%;
        background: var(--blue-light);
        color: var(--blue-accent);
    }

    /* Page content with a shared heading gets the same top and side gutters,
     regardless of the shorthand padding used by its legacy page stylesheet. */
    main.content:has(> .student-page-heading:first-child),
    main.content:has(> .page-heading-row:first-child > .student-page-heading) {
        padding-top: 20px;
        padding-left: 20px;
        padding-right: 20px;
    }

    /* ── Touch targets ──
     ≥44px hit area on every primary control (WCAG 2.5.8 / platform
     guidance). min-* only grows the hit area — padding, radius and flex
     centering are preserved, so the visual design is unchanged. */
    .icon-btn,
    .back-btn,
    .mobile-back,
    .mobile-topbar .back-btn,
    .profile-trigger-avatar,
    :is(
        .btn,
        [class^="btn-"],
        [class*=" btn-"],
        [class$="-btn"],
        [class*="-btn "]
    ) {
        min-width: 44px;
        min-height: 44px;
    }

    /* Keep the mobile footer and its controls at an explicit 35px while
       overriding the shared 44px touch target. */
    .menu-variant-options .variant-pill {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .menu-footer {
        box-sizing: border-box;
        height: auto;
        min-height: 0;
        padding-top: 20px;
        padding-bottom: 20px;
        align-items: center;
    }

    /* Let the footer provide both vertical gaps so the parent's bottom
       padding does not make the lower space larger than the upper space. */
    .menu-body:has(> .menu-footer) {
        padding-bottom: 0;
    }

    .menu-footer .qty-stepper,
    .order-item .qty-stepper,
    .menu-footer .btn-add {
        height: 44px;
        min-height: 44px;
        align-self: center;
    }

    .menu-footer .qty-stepper,
    .order-item .qty-stepper {
        box-sizing: border-box;
        width: 120px;
        padding: 0 15px;
        gap: 10px;
        justify-content: space-between;
    }

    .menu-footer .qty-btn,
    .order-item .qty-btn {
        width: 25px;
        min-width: 16px;
        height: 100%;
        min-height: 0;
    }

    .menu-footer .btn-add {
        width: 120px;
        min-width: 0;
    }

    /* Headings and their actions reflow before text or controls clip. */
    :is(
        .page-header,
        .page-heading,
        .section-header,
        .panel-header,
        .card-header
    ) {
        max-width: 100%;
        flex-wrap: wrap;
    }
    :is(
            .page-header,
            .page-heading,
            .section-header,
            .panel-header,
            .card-header
        )
        > * {
        min-width: 0;
        max-width: 100%;
    }

    /* Pagination wraps onto a second line instead of forcing overflow. */
    :is(.pagination, .pagination-bar, .pagination-row, .pagination-btns) {
        max-width: 100%;
        flex-wrap: wrap;
    }
    .page-btn {
        min-width: 44px;
        height: 44px;
    }

    /* Single-line filters/tabs scroll inside their own region when needed. */
    :is(.filter-bar, .filter-tabs, .tabs-row, .tab-list) {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
    }

    /* One compact mobile pagination layout across student, booth, staff,
       server-rendered, and JavaScript-rendered lists. */
    :is(
        .app-pagination,
        .pagination-row,
        .pagination-bar,
        .activity-footer,
        .al-pagination,
        .rpt-pagination,
        .um-pagination,
        .ledger-pagination,
        .staff-pag,
        .uv-pag
    ) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        justify-items: center !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px;
        width: 100%;
        max-width: 100%;
        margin-top: 16px;
        padding: 14px 12px;
        border: 1px solid var(--border, #e2e8f0);
        border-radius: 14px;
        background: var(--bg-card, #fff);
        text-align: center;
        box-sizing: border-box;
    }

    :is(
        .app-pagination__info,
        .pagination-info,
        .activity-pagination-info,
        .al-pagination-info,
        .rpt-pagination-info,
        .um-pagination-info,
        .ledger-pagination-info,
        .staff-pag-info,
        .uv-pag-info
    ) {
        width: 100%;
        color: var(--text-muted, #64748b);
        font-size: 0.78rem;
        font-weight: 500;
        line-height: 1.35;
        text-align: center;
    }

    :is(
        .app-pagination__pages,
        .pagination-btns,
        .activity-page-btns,
        .al-pagination-pages,
        .rpt-pagination-pages,
        .um-pagination-pages,
        .ledger-page-btns,
        .staff-pag-btns,
        .uv-pag-btns
    ) {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 3px;
        width: auto;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        align-self: center !important;
        justify-self: center !important;
        place-self: center !important;
    }

    :is(
        .app-pagination__button,
        .page-btn,
        .activity-page-btn,
        .al-page-btn,
        .rpt-page-btn,
        .um-page-btn,
        .ledger-page-btn,
        .staff-page-btn,
        .uv-page-btn
    ) {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        min-width: 32px;
        width: 32px;
        height: 32px;
        padding: 0;
        border: 1px solid var(--border, #e2e8f0);
        border-radius: 7px;
        background: #fff;
        color: var(--text-muted, #64748b);
        font-family: inherit;
        font-size: 0.78rem;
        font-weight: 600;
        line-height: 1;
        text-decoration: none;
        box-sizing: border-box;
    }

    :is(
        .app-pagination__button,
        .page-btn,
        .activity-page-btn,
        .al-page-btn,
        .rpt-page-btn,
        .um-page-btn,
        .ledger-page-btn,
        .staff-page-btn,
        .uv-page-btn
    ).active {
        border-color: var(--navy, #0f2044);
        background: var(--navy, #0f2044);
        color: #fff;
    }

    :is(
        .app-pagination__button,
        .page-btn,
        .activity-page-btn,
        .al-page-btn,
        .rpt-page-btn,
        .um-page-btn,
        .ledger-page-btn,
        .staff-page-btn,
        .uv-page-btn
    ):is(.disabled, :disabled) {
        opacity: 0.35;
        pointer-events: none;
    }

    :is(
        .app-pagination__button,
        .page-btn,
        .activity-page-btn,
        .al-page-btn,
        .rpt-page-btn,
        .ledger-page-btn,
        .staff-page-btn,
        .uv-page-btn
    ).ellipsis,
    :is(.um-page-dots) {
        min-width: 14px;
        width: 14px;
        padding: 0;
        border-color: transparent;
        background: transparent;
        color: var(--text-muted, #64748b);
    }

    :is(
        .app-pagination__button,
        .page-btn,
        .activity-page-btn,
        .al-page-btn,
        .rpt-page-btn,
        .um-page-btn,
        .ledger-page-btn,
        .staff-page-btn,
        .uv-page-btn
    ) svg {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
    }
}

/* ── Small phones (≤480px) ────────────────────────────────
   The mobile top bar is a nowrap flex row: brand icon + brand text +
   action icons. Its min-content width (padding 40 + gaps 28 + children
   38/144/86 = 336px) exceeded a 320px viewport, which is what pushed
   every shell page 16px sideways at 320px.

   Two independent guards, so neither has to be exact:
   - trim the side gutters and the inter-item gap;
   - let the brand text shrink and ellipsis rather than act as a 144px
     floor. Together the bar fits 320px without truncating in practice. */
@media (max-width: 480px) {
    .mobile-topbar:not(.student-mobile-header) {
        padding-left: 16px;
        padding-right: 16px;
        gap: 10px;
    }

    .mobile-logo-text {
        min-width: 0;
    }
    .mobile-logo-text .title,
    .mobile-logo-text .subtitle {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Pagination bars add their own inner padding; trim so they don't
     compound with the page gutter. Longhand left/right only — vertical
     padding (which reserves space for the fixed bottom nav) is kept. */
    .pagination-bar,
    .pagination-row {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Multi-column form rows become fragile at 125-150% text zoom even when
     they fit at 100%. One column keeps native controls fully visible. */
    :is(.form-row, .form-grid, .field-row, .fields-row, .date-time-row) {
        grid-template-columns: minmax(0, 1fr);
        flex-direction: column;
    }

    :is(.form-row, .form-grid, .field-row, .fields-row, .date-time-row) > * {
        width: 100%;
        min-width: 0;
    }

    :is([class$="-modal"], [class~="modal-box"], [class~="report-modal"]):not(
            [class*="overlay"]
        ):not(.camera-modal) {
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
        max-height: calc(100dvh - 20px);
    }
}

@media (max-width: 360px) {
    .content {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* Short landscape phones and high browser zoom keep dialog controls
   reachable by scrolling the overlay and the dialog internally. */
@media (max-height: 700px) {
    :is([class*="modal-overlay"], [class$="-overlay"]):has(
        :is([class$="-modal"], [class~="modal-box"], [class~="report-modal"])
    ) {
        align-items: flex-start;
        padding: 8px;
        overflow-y: auto;
    }

    :is([class$="-modal"], [class~="modal-box"], [class~="report-modal"]):not(
            [class*="overlay"]
        ):not(.camera-modal) {
        max-height: calc(100dvh - 16px);
    }
}