/*
 | Mobile browser baseline
 | --------------------------------------------------------------------------
 | Keep wide application widgets contained inside the viewport while allowing
 | data-heavy components to scroll locally. Page-specific rules can still
 | override these defaults when a purpose-built mobile presentation exists.
 */

html,
body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
         text-size-adjust: 100%;
}

body.amore-layout,
body.amore-layout > .flex,
.content,
.content > *,
.content .grid > * {
    min-width: 0;
}

.content {
    width: 100%;
    max-width: 100%;
}

.content img,
.content video,
.content canvas,
.content iframe {
    max-width: 100%;
}

.content video {
    height: auto;
}

.content input,
.content select,
.content textarea,
.content .form-control,
.content .form-select,
.content .select2-container,
.content .ts-wrapper,
.content .dropify-wrapper {
    max-width: 100%;
}

/*
 | Tables opt into one horizontal viewport. DataTables keeps its controls
 | outside the plugin-owned scrolling body.
 */
.mobile-table-scroll {
    --mobile-table-min-width: 760px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.mobile-table-scroll--simple {
    --mobile-table-min-width: 640px;
}

.mobile-table-scroll--standard {
    --mobile-table-min-width: 760px;
}

.mobile-table-scroll--operational {
    --mobile-table-min-width: 1088px;
}

.mobile-table-scroll__viewport {
    width: 100%;
    max-width: 100%;
    overflow: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
}

.mobile-table-scroll__viewport > table {
    width: 100%;
    min-width: var(--mobile-table-min-width);
    max-width: none;
}

.mobile-table-scroll--simple .mobile-table-scroll__viewport > table {
    min-width: 640px;
}

.mobile-table-scroll--standard .mobile-table-scroll__viewport > table {
    min-width: 760px;
}

.mobile-table-scroll--operational .mobile-table-scroll__viewport > table {
    min-width: 1088px;
}

/* Wide reports remain usable without making the complete page scroll sideways. */
.table-responsive,
.content .overflow-x-auto,
.content .dataTables_scroll,
.content .dataTables_scrollBody {
    max-width: 100%;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.table-responsive,
.content .overflow-x-auto,
.content .dataTables_scrollBody {
    overflow-x: auto;
}

.content .dataTables_wrapper {
    width: 100%;
    max-width: 100%;
}

.content .dataTables_scrollBody {
    overflow: auto !important;
    touch-action: pan-x pan-y;
}

.content table {
    max-width: 100%;
}

.pagination,
.content .dataTables_paginate,
.content .dataTables_paginate .pagination {
    max-width: 100%;
}

/* Floating UI must never be wider than the visible mobile viewport. */
.dropdown-menu,
.search-result,
.notification-content,
.toastify,
.swal2-popup {
    max-width: calc(100vw - 24px) !important;
}

.modal:not(.modal-slide-over) .modal-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
}

.modal:not(.modal-slide-over) .modal-header,
.modal:not(.modal-slide-over) .modal-footer {
    flex: 0 0 auto;
}

.modal:not(.modal-slide-over) .modal-body {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {
    body.amore-layout {
        padding-top: max(0.75rem, env(safe-area-inset-top));
        padding-right: max(0.75rem, env(safe-area-inset-right));
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
        padding-left: max(0.75rem, env(safe-area-inset-left));
    }

    body.amore-layout > .flex {
        width: 100%;
    }

    .content {
        min-height: calc(100dvh - 1.5rem);
        padding-right: 0.75rem;
        padding-left: 0.75rem;
        border-radius: 1rem;
    }

    .mobile-menu {
        margin-bottom: 1rem;
    }

    .mobile-menu-bar a,
    .mobile-menu .menu,
    .topbar-icon-btn,
    .topbar-mobile-search,
    .topbar-profile {
        min-height: 44px;
    }

    /* A 16px input font prevents focus zoom in iOS Safari. */
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    .select2-search__field {
        font-size: 16px !important;
    }

    .content .select2-container,
    .content .ts-wrapper {
        width: 100% !important;
    }

    .modal:not(.modal-slide-over) .modal-dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin: max(12px, env(safe-area-inset-top)) auto max(12px, env(safe-area-inset-bottom)) !important;
    }

    .modal:not(.modal-slide-over) .modal-content {
        max-height: calc(100dvh - 24px);
    }

    .modal-header,
    .modal-footer {
        flex-wrap: wrap;
        padding: 0.875rem !important;
    }

    .modal-body {
        padding: 0.875rem !important;
    }

    .modal-footer .btn {
        flex: 1 1 auto;
        min-width: min(100%, 8rem);
    }

    .dropdown-menu,
    .search-result,
    .notification-content {
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
    }

    .content .dataTables_wrapper .dataTables_length,
    .content .dataTables_wrapper .dataTables_filter,
    .content .dataTables_wrapper .dataTables_info,
    .content .dataTables_wrapper .dataTables_paginate,
    .content .dataTables_wrapper .dt-buttons {
        float: none !important;
        width: 100%;
        max-width: 100%;
        margin: 0 0 0.75rem;
        text-align: left !important;
    }

    .content .dataTables_wrapper .dataTables_filter label,
    .content .dataTables_wrapper .dataTables_length label {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;
        width: 100%;
    }

    .content .dataTables_wrapper .dataTables_filter input {
        flex: 1 1 12rem;
        width: auto !important;
        min-width: 0;
        margin-left: 0 !important;
    }

    .content .dataTables_wrapper .dataTables_paginate,
    .content .dataTables_wrapper .dataTables_paginate .pagination,
    .content .pagination {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .content .dataTables_wrapper .dt-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 0.375rem;
    }

    .content .dataTables_wrapper .dt-buttons .dt-button {
        margin: 0;
    }

    .swal2-container {
        padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left)) !important;
    }
}

@media (max-width: 374.98px) {
    .content {
        padding-right: 0.625rem;
        padding-left: 0.625rem;
    }

    .topbar-wrap {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
    }

    .topbar-wrap .topbar-actions {
        gap: 0.375rem !important;
    }

    .topbar-wrap .topbar-icon-btn,
    .topbar-wrap .topbar-profile {
        min-width: 40px !important;
    }
}