/* Release 70 compact-viewport containment.
   Keep navigation and admin operations inside the viewport. Wide data tables
   remain usable through their own horizontal scroll containers. */

/* The village accent remains orange, but small uppercase catalogue labels need
   a darker tone to meet the 4.5:1 text contrast requirement on white cards. */
body.ash-body .gtile-village .gtile-area {
    color: #a8571f;
}

@media (max-width: 900px) {
    html,
    body.ash-body,
    body.ash-body .ash-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: clip;
    }

    body.ash-body .appnav {
        flex-wrap: wrap;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        box-sizing: border-box;
        contain: inline-size;
    }

    body.ash-body .appnav-menu {
        order: 3;
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        contain: inline-size;
    }

    body.ash-body .appnav-links {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        contain: inline-size;
    }

    body.ash-body .appnav-links > li {
        flex: 0 0 auto;
    }

    body.ash-body .adminx,
    body.ash-body .adminx-header,
    body.ash-body .adminx-search,
    body.ash-body .adminx-card,
    body.ash-body .admin-mobile-list,
    body.ash-body .support-table-scroll,
    body.ash-body .subscription-form-grid,
    body.ash-body .subscription-section,
    body.ash-body .subscription-table-wrap,
    body.ash-body .organisation-table-wrap {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    body.ash-body .adminx {
        overflow-x: clip;
    }

    body.ash-body .adminx-card {
        overflow-x: hidden;
    }

    body.ash-body .adminx *,
    body.ash-body .adminx *::before,
    body.ash-body .adminx *::after {
        box-sizing: border-box;
    }

    body.ash-body .adminx-header,
    body.ash-body .adminx-search {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    body.ash-body .adminx-header > div {
        flex: 1 1 220px;
        max-width: 100%;
        min-width: 0;
    }

    body.ash-body .adminx-title,
    body.ash-body .adminx-sub,
    body.ash-body .adminx-hint,
    body.ash-body .adminx-tag {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    body.ash-body .adminx-search .adminx-input,
    body.ash-body .organisation-filter .adminx-input {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    body.ash-body .subscription-form-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    body.ash-body .admin-mobile-list,
    body.ash-body .support-table-scroll,
    body.ash-body .subscription-table-wrap,
    body.ash-body .organisation-table-wrap {
        display: block;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        contain: layout inline-size;
    }

    body.ash-body .admin-mobile-list .adminx-table,
    body.ash-body .support-table-scroll .adminx-table,
    body.ash-body .subscription-table-wrap .adminx-table,
    body.ash-body .organisation-table-wrap .adminx-table {
        width: max-content;
        min-width: 680px;
        max-width: none;
    }
}