/* Shared small-screen behavior for application pages. Print layouts are deliberately excluded. */
@media screen {
    .ui-responsive-table {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .ui-responsive-table > table {
        width: 100%;
        min-width: 100%;
        margin-bottom: 0;
    }

    .table-responsive {
        min-width: 0;
        max-width: 100%;
    }

    main :is(video, iframe, object, embed, canvas) {
        max-width: 100%;
    }

    .ui-responsive-table:focus-visible {
        outline: 2px solid rgba(13, 110, 253, .45);
        outline-offset: 2px;
    }

    main img,
    main svg,
    .modal img,
    .modal svg {
        max-width: 100%;
        height: auto;
    }
}

@media screen and (max-width: 991.98px) {
    #appHeader .navbar {
        padding: .55rem .75rem !important;
    }

    #appHeader .navbar .container-fluid {
        padding-inline: 0;
    }

    #appHeader .navbar-brand {
        min-width: 0;
        max-width: calc(100% - 4rem);
        margin-right: .5rem;
        gap: .35rem !important;
    }

    #appHeader .navbar-brand img {
        width: auto;
        height: clamp(28px, 8vw, 40px) !important;
        flex: 0 0 auto;
    }

    #appHeader .navbar-brand > div:last-child {
        min-width: 0;
    }

    #appHeader .navbar-brand .fw-bold {
        font-size: clamp(1.05rem, 4.5vw, 1.35rem) !important;
        line-height: 1.05;
        white-space: nowrap;
    }

    #appHeader .navbar-brand .dept-subtitle,
    #appHeader .navbar-brand > div > .fw-normal {
        display: block;
        max-width: 18rem;
        font-size: .7rem !important;
        line-height: 1.1;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    #appHeader .quickmenu .qm-stack {
        gap: .3rem;
        padding-inline: .25rem;
        font-size: clamp(.75rem, 2.8vw, 1rem);
        white-space: normal;
        text-align: center;
    }

    /* Dialogs loaded asynchronously can carry legacy fixed widths. Cap their
       box, not their content or controls, and scroll only when height requires. */
    body .modal .modal-dialog {
        width: auto !important;
        min-width: 0 !important;
        max-width: min(var(--bs-modal-width, 500px), calc(100% - 1rem)) !important;
        margin: .5rem auto !important;
        height: auto;
    }

    body .modal .modal-content {
        min-width: 0;
        max-width: 100%;
        max-height: calc(100dvh - 1rem) !important;
    }

    body .modal .modal-body {
        min-width: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    #mainNavbar {
        max-height: calc(100dvh - 5rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    #mainNavbar > #iicon {
        width: 100%;
        align-items: stretch !important;
        padding: .35rem 0;
        text-align: left !important;
    }

    #mainNavbar > #iicon .nav-link {
        flex-direction: row !important;
        justify-content: flex-start;
        align-items: center !important;
        gap: .65rem;
        padding: .55rem .75rem !important;
    }

    #mainNavbar > #iicon .nav-link i {
        min-width: 1.5rem;
        margin-bottom: 0 !important;
        text-align: center;
    }

    .quickmenu {
        max-width: 100vw;
        overflow: visible;
    }

    .quickmenu > ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        max-width: 100vw;
        gap: 0 !important;
        overflow: visible !important;
    }

    .quickmenu > ul::-webkit-scrollbar {
        display: none;
    }

    .quickmenu > ul > li {
        flex: 1 1 0 !important;
        min-width: 0;
    }

    .quickmenu > ul > li.ms-4 {
        margin-left: 0 !important;
    }

    .quickmenu > ul > li > .qm-stack {
        width: 100%;
        min-width: 0;
        justify-content: center;
    }

    .quickmenu ul ul {
        min-width: min(18rem, calc(100vw - 1rem)) !important;
        max-width: calc(100vw - 1rem) !important;
        max-height: min(70dvh, 34rem) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    body > .container,
    body > .container-fluid {
        max-width: 100%;
    }
}

@media screen and (max-width: 991.98px) {
    /* Only screen presentation changes. No fields, action nodes or values are
       removed; desktop and official print dimensions retain their own rules. */
    body.app-page-shell .app-content-main,
    body.app-page-shell .app-content-frame,
    .modal :is(.row, form, .card, .card-body) {
        min-width: 0;
        max-width: 100%;
    }

    body.app-page-shell:not(.app-public-page) .app-content-main > .printable-area {
        left: auto !important;
        transform: none !important;
    }

    .app-content-main .card-body,
    .app-content-main :is(.p-4, .p-5) {
        padding: 1rem !important;
    }

    .app-content-main :is(.row, .card, .card-body, .list-group, .list-group-item, .app-page-heading) {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .app-content-main .d-flex:not(table *):not(.input-group):not(.item-avatar),
    .modal .d-flex:not(table *):not(.input-group):not(.item-avatar),
    .app-content-main :is(.app-page-heading, .app-title-group, .pagination, .nav-tabs, .btn-group) {
        flex-wrap: wrap !important;
    }

    .app-content-main .d-flex > :not(.item-avatar),
    .modal .d-flex > :not(.item-avatar) {
        min-width: 0 !important;
        max-width: 100%;
    }

    .app-content-main :is(.btn, .badge, .text-nowrap),
    .modal :is(.btn, .badge, .text-nowrap) {
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .app-content-main :is(.form-control, .form-select, .input-group),
    .modal :is(.form-control, .form-select, .input-group) {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .app-content-main :is(.ac-search, .search-field, .inventory-search,
        .ic-search-field, .im-search-field, .pa-search-field, .ir-search-field,
        .id-search-field, .search-controls, .search-toolbar) {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .app-content-main :is(.ac-search, .search-field, .ic-search-field, .im-search-field) {
        flex-basis: 100%;
        width: 100%;
    }

    .app-content-main :is(.ac-document, .transaction-record-item-summary) {
        min-width: 0 !important;
    }

    .app-content-main .ac-search input {
        min-width: 0;
        width: 100%;
        flex-basis: 100%;
    }

    .app-content-main :is(.transaction-record-sheet, .ic-doc, .pa-doc, .ir-doc, .id-doc) {
        width: 100%;
        min-width: 0;
        padding: 1rem;
        margin-inline: 0;
    }

    /* Saved document metadata keeps every existing label/value in order. Its
       native colspans resume unchanged for desktop and printing. */
    .app-content-main .transaction-record-meta {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100%;
    }

    .app-content-main .transaction-record-meta > colgroup { display: none; }
    .app-content-main .transaction-record-meta > tbody { display: block; }
    .app-content-main .transaction-record-meta > tbody > tr {
        display: grid;
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    }

    .app-content-main .transaction-record-meta > tbody > tr > :is(th, td) {
        width: auto !important;
        min-width: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        padding: .45rem;
    }

    .app-content-main .result-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: .5rem;
        padding: .65rem .5rem;
    }

    .app-content-main .result-main { gap: .5rem; }
    .app-content-main .result-content { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
    .app-content-main .result-content > * { grid-column: 1 / -1; }
    .app-content-main .result-side { flex-direction: column; gap: .4rem; max-width: 5.5rem; }
    .app-content-main :is(.result-icon, .result-image) { width: 32px; height: 32px; flex-basis: 32px; }

    .app-content-main .cart-page .cart-price-summary {
        min-width: 0 !important;
        width: 100%;
        justify-content: flex-start !important;
    }

    .app-content-main .cart-page .cart-price-values {
        display: grid !important;
        grid-template-columns: minmax(3.5rem, .8fr) auto minmax(0, 1fr);
        width: 100%;
        gap: .4rem;
    }

    .app-content-main .cart-page .cart-price-values > div {
        width: auto !important;
        max-width: 100%;
    }

    .app-content-main .cart-page .cart-price-values > div:last-child {
        grid-column: 1 / -1;
        margin-left: 0 !important;
    }

    .app-content-main .cart-page .cart-item-description { width: 100% !important; }

    body > .container {
        padding-inline: .75rem;
    }

    main h1,
    main .h1 {
        font-size: clamp(1.65rem, 7vw, 2.25rem);
    }

    main h2,
    main .h2 {
        font-size: clamp(1.35rem, 5.5vw, 1.8rem);
    }

    main h3,
    main .h3 {
        font-size: clamp(1.15rem, 4.5vw, 1.45rem);
    }

    .card,
    .help-topic-card,
    .help-handout-card {
        max-width: 100%;
    }

    .card-body {
        padding: 1rem;
    }

    .modal-dialog {
        width: calc(100% - 1rem);
        max-width: none;
        margin: .5rem auto;
    }

    .modal-content {
        max-height: calc(100dvh - 1rem);
    }

    .modal-body {
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .modal-footer,
    .btn-toolbar,
    .button-group,
    .form-actions,
    .card-footer,
    main .d-flex:has(> .btn) {
        flex-wrap: wrap !important;
        justify-content: flex-start;
        gap: .5rem;
    }

    .modal-footer > *,
    .btn-toolbar > *,
    .button-group > *,
    .form-actions > * {
        margin: 0 !important;
    }

    .form-control,
    .form-select,
    .input-group,
    textarea,
    select {
        max-width: 100%;
    }

}

@media screen and (max-width: 767.98px) {
    .ui-responsive-table > table {
        min-width: 0;
    }

    /* Simple lists become compact labeled records. Complex matrices retain a
       local scroll region instead of losing their column relationships. Hidden
       bindings/collapses stay hidden: do not force display on individual cells. */
    .ui-list-table-wrap { width: 100%; min-width: 0; max-width: 100%; }
    table[data-ui-list-responsive]:not([hidden]):not(.d-none):not(.collapse:not(.show)) {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    table[data-ui-list-responsive] > colgroup { display: none; }
    table[data-ui-list-responsive] > :is(tbody, tfoot):not([hidden]):not(.d-none):not(.collapse:not(.show)) { display: block; }
    table[data-ui-list-responsive] > tbody > :is([data-ui-list-row], [data-ui-list-wide]):not([hidden]):not(.d-none):not(.collapse:not(.show)) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        min-width: 0;
        margin-bottom: .65rem;
        border: 1px solid #dbe3ef;
    }

    table[data-ui-list-responsive] > tbody > tr > :is(th, td) {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100%;
        padding: .45rem .5rem !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        text-align: left;
    }

    table[data-ui-list-responsive] > tbody > tr > [data-ui-list-primary],
    table[data-ui-list-responsive] > tbody > [data-ui-list-wide] > * {
        grid-column: 1 / -1;
    }

    table[data-ui-list-responsive] > tbody > tr > [data-ui-list-label]::before {
        content: attr(data-ui-list-label);
        display: block;
        margin-bottom: .15rem;
        color: #64748b;
        font-size: .72rem;
        font-weight: 400;
        text-align: left;
    }

    table[data-ui-list-responsive] > tfoot > tr:not([hidden]):not(.d-none):not(.collapse:not(.show)) {
        display: flex;
        flex-wrap: wrap;
        gap: .25rem;
    }

    table[data-ui-list-responsive] > tfoot > tr > :is(th, td) {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100%;
        padding: .45rem .5rem;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    table[data-ui-list-responsive] > thead:not([hidden]):not(.d-none),
    table[data-ui-list-responsive][data-ui-list-header-actions] > thead > tr > :not([data-ui-list-header-action]):not([hidden]):not(.d-none) {
        position: absolute;
        display: block;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    table[data-ui-list-responsive][data-ui-list-header-actions] > thead:not([hidden]):not(.d-none) {
        position: static;
        display: block;
        width: 100% !important;
        height: auto !important;
        margin: 0 0 .5rem;
        overflow: visible;
        clip-path: none;
    }

    table[data-ui-list-responsive][data-ui-list-header-actions] > thead > tr {
        display: flex;
        flex-wrap: wrap;
        gap: .25rem;
    }

    table[data-ui-list-responsive][data-ui-list-header-actions] > thead > tr > [data-ui-list-header-action] {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100%;
        padding: .35rem .5rem;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

@media print {
    .ui-responsive-table {
        overflow: visible !important;
    }

    .ui-responsive-table > table {
        min-width: 0 !important;
    }
}