/* Shared small-screen behavior for application pages. Print layouts are deliberately excluded. */
@media screen {
    .app-header-spacer {
        transition: margin-top .15s ease;
    }

    .ui-responsive-table {
        width: 100%;
        max-width: 100%;
        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;
    }

    .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: 44px !important;
        flex: 0 0 auto;
    }

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

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

    #appHeader .navbar-brand .dept-subtitle {
        display: block;
        max-width: 13rem;
        font-size: .7rem;
        line-height: 1.1;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    #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: 767.98px) {
    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%;
    }

    .ui-responsive-table > table {
        min-width: 42rem;
    }
}

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

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