/* Application-owned responsive overrides; loaded after the ABFAS/vendor styles. */
html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: inherit; }
body { min-width: 0; overflow-x: hidden; }
img { max-width: 100%; height: auto; }

.app-content-bounds {
    width: min(1180px, calc(100% - 40px)) !important;
    margin: 32px auto 50px !important;
}
#adminNav > ul { display: flex; justify-content: flex-end; flex-wrap: wrap; margin-right: 0 !important; }
#adminNav > ul > li { width: auto !important; min-width: 150px; }
.grid-content, .grayboxbody, .form-group, .row { min-width: 0; }
.form-control { max-width: 100%; }
input[type="file"] { display: block; max-width: 100%; min-height: 44px; padding: 8px 0; }
button, .btn, a.button--large { min-height: 44px; touch-action: manipulation; }
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-responsive table { min-width: 680px; }

@media (max-width: 767px) {
    .page-bounds { width: calc(100% - 32px) !important; max-width: none; }
    .app-content-bounds { width: calc(100% - 24px) !important; margin-top: 0 !important; margin-bottom: 32px !important; }
    .page-header .app-header-bounds { display: flex !important; flex-wrap: wrap; align-items: center; width: 100% !important; padding: 12px 16px !important; }
    .page-header .header-logo { position: relative !important; inset: auto !important; display: flex !important; align-items: center; justify-content: space-between; float: none !important; width: 100% !important; min-height: 64px; margin: 0 !important; padding: 0 !important; }
    .page-header .header-logo > div { flex: 1 1 auto; min-width: 0; }
    .header-logo img, .footer-logo img { display: block; max-width: 220px; max-height: 64px; }
    .page-header .page-header__toggle { position: static !important; inset: auto !important; display: flex !important; align-items: center; gap: 10px; min-width: 88px; min-height: 48px; margin-left: 12px !important; padding: 8px !important; transform: none !important; }
    .page-header .mobile-navigation { position: static !important; display: block !important; float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: #fff; }
    .page-header .mobile-navigation > :not(.header-logo) { display: none !important; }
    .page-header .mobile-navigation.is-open > :not(.header-logo) { display: block !important; }
    .page-header .header-utility, .page-header .header-utility__list { position: static !important; display: block !important; float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
    .page-header .header-utility__item { display: block !important; width: 100% !important; margin: 0 !important; border-bottom: 1px solid #d8dee3; }
    .page-header .header-utility__item > a, .page-header .header-user__welcome { display: flex !important; align-items: center; width: 100% !important; min-height: 48px; padding: 10px 12px !important; overflow-wrap: anywhere; }
    #resNavbar .header-nav, #adminNavbar .header-nav { display: block; width: 100%; }
    #resNavbar .header-nav > ul, #adminNavbar .header-nav > ul { display: block; float: none !important; width: 100%; margin: 0 !important; padding: 8px 0; }
    #resNavbar .header-nav > ul > li, #adminNavbar .header-nav > ul > li { display: block; width: 100% !important; min-width: 0; }
    #resNavbar .header-nav > ul > li > ul { display: none !important; }
    #resNavbar .header-nav > ul > li > .header-nav__toggle { display: none !important; }
    #resNavbar .header-nav > ul > li > a, #adminNavbar .header-nav a { display: flex; align-items: center; min-height: 48px; padding: 10px 12px; }
    .content, .site-body { padding-top: 20px; }
    .grid-title { height: auto !important; min-height: 44px; padding: 10px 12px !important; }
    .grid-content { padding: 12px !important; }
    .row { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
    [class*="col-"] { float: none !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
    .form-group { margin: 0 0 18px !important; }
    .control-label { float: none !important; display: block; width: 100% !important; margin-bottom: 7px; text-align: left !important; }
    .form-control, select.form-control, input.form-control { width: 100% !important; display: block !important; min-height: 44px; font-size: 16px; }
    .grayboxfooter { display: flex; flex-wrap: wrap; gap: 10px; margin-left: 0 !important; }
    .grayboxfooter .btn { flex: 1 1 140px; }
    .table-responsive { margin-right: -12px; width: calc(100% + 12px); padding-bottom: 8px; }
    .table-responsive::after { content: "Swipe to view more"; display: block; padding-top: 6px; color: #58636d; font-size: 12px; }
    .page-footer__content { display: block; }
    .footer-contact, .footer-social, .footer-utility, .footer-utility__1, .footer-utility__2 { width: 100% !important; float: none !important; }
}

@media (min-width: 768px) {
    .page-header { position: relative !important; height: auto !important; overflow: visible !important; }
    .page-header .app-header-bounds { width: min(1760px, calc(100% - 64px)) !important; max-width: none !important; margin: 0 auto !important; }
    .page-header .page-header__toggle { display: none !important; }
    .page-header .mobile-navigation { display: block !important; }
    main.content, main.site-body { position: relative; clear: both; padding-top: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}
