/* Final screen reflow layer. Keep accounting column widths and print styles. */
@media screen {
    body main, body .content, body .card, body .card-body,
    body .container-fluid, body .module-container, body .row > * {
        min-width: 0;
    }
    body main, body .content { max-width: 100%; }
    body .table-responsive, body .erp-table-scroll {
        max-width: 100%;
        min-width: 0;
        -webkit-overflow-scrolling: touch;
    }
    body .erp-table-scroll { overflow-x: auto; }
    body .erp-table-scroll:not(.is-overflowing) { overflow: visible; }
    body .erp-table-scroll:focus, body .table-responsive:focus {
        outline: 2px solid var(--bs-primary, #0d6efd);
        outline-offset: 2px;
    }
    body .modal-dialog:not([class*="modal-fullscreen"]) { max-width: min(var(--bs-modal-width, 500px), calc(100% - 1rem)); }
    body .modal-dialog.custom-modal { width: 600px; max-width: calc(100% - 1rem); }
    body .modal .modal-content { max-height: calc(100vh - 1rem) !important; }
    body .modal-body { overflow-y: auto; min-height: 0; }
    body .modal-header, body .modal-footer { flex-shrink: 0; }
    body .modal-content > form { display: flex; flex-direction: column; min-height: 0; max-height: inherit; }
    body .modal-title { overflow-wrap: break-word; min-width: 0; }
    body .modal-footer { flex-wrap: wrap; }
    body .modal-body iframe, body .modal-body object, body .modal-body embed {
        max-width: 100%;
        max-height: 65vh;
    }
    body .select2-container .select2-selection--multiple {
        height: auto !important;
    }
    body .select2-selection--multiple .select2-selection__rendered {
        white-space: normal;
    }
    body .select2-dropdown, body .swal2-popup, body .swal-modal {
        min-width: 0 !important;
        max-width: calc(100vw - 1rem) !important;
    }
    body .select2-results__option { overflow-wrap: break-word; }
    body .toast, body .toast-container { max-width: calc(100vw - 1rem); }
    body .toast-body, body .alert, body .invalid-feedback, body .form-text {
        overflow-wrap: break-word;
    }
    body main :is(h1, h2, h3, h4, h5, h6, .card-title, .form-label) { overflow-wrap: anywhere; }
    body input[type="file"] { max-width: 100%; }
    body .pagination { flex-wrap: wrap; }
    body .nav-tabs { flex-wrap: wrap; }
    body :is(button, a, input, select, textarea, [tabindex]):focus-visible {
        outline: 2px solid var(--bs-primary, #0d6efd) !important;
        outline-offset: 2px;
    }
    /* Native controls follow the selected application theme, not OS preference. */
    html[data-bs-theme="light"] { color-scheme: light; }
    html[data-bs-theme="dark"] { color-scheme: dark; }
    .auth-page {
        height: auto !important;
        min-height: 100vh;
        padding: 1rem;
        flex-direction: column;
    }
    .auth-page > form, .auth-page > .rounded { margin: auto; max-width: 400px; width: 100%; }
    .auth-page > .alert { flex-shrink: 0; width: 100%; }
    @supports (height: 100dvh) {
        .auth-page { min-height: 100dvh; }
        body .modal .modal-content { max-height: calc(100dvh - 1rem) !important; }
    }
    @media (max-width: 991.98px) {
        /* The shell's position:relative rule otherwise defeats Bootstrap offcanvas. */
        #offcanvasSidebar {
            position: fixed;
            top: 0;
            bottom: 0;
            height: 100vh;
            max-width: calc(100vw - 2rem);
        }
        #offcanvasSidebar.collapsed { width: 250px !important; }
        #offcanvasSidebar.collapsed .nav-link { text-align: left; font-size: inherit; }
        #offcanvasSidebar.collapsed h4 { font-size: 20px; }
        body .navbar { padding-left: .5rem !important; padding-right: .5rem !important; }
        body .navbar-brand { max-width: calc(100% - 4rem); white-space: normal; }
        body .navbar-brand span { overflow-wrap: break-word; }
        body .navbar-nav { align-items: stretch !important; }
        body .notification-dropdown { width: 100%; margin: 0; }
    }
    @media (max-width: 767.98px) {
        body main .d-flex:not(.input-group):not(.btn-group):not(.form-check) { flex-wrap: wrap !important; min-width: 0; }
        body main .d-flex > .flex-grow-1 { min-width: 0; }
        body main .btn-group { flex-wrap: wrap; gap: .25rem; }
        body main .btn { white-space: normal; max-width: 100%; }
        body :is(.form-control, .form-select) { max-width: 100%; }
        body input[type="week"] { min-width: 0; width: 100%; }
        body main canvas { max-width: 100%; }
        body .auth-page > form, body.auth-page > form,
        body.auth-page > .rounded { padding: 1.25rem !important; }
        body .modal-dialog { margin: .5rem auto; }
        body .modal-dialog-centered { min-height: calc(100% - 1rem); }
    }
    /* Do not shrink mobile input text: iOS otherwise zooms on field focus. */
    @media (max-width: 767.98px), (pointer: coarse) {
        :root { --alsc-control-height: 44px; --alsc-control-size: 16px; }
        body :is(.form-control-sm, .form-select-sm, .btn-sm,
                 .input-group-sm > .form-control, .input-group-sm > .form-select,
                 .input-group-sm > .input-group-text) {
            min-height: 44px !important;
            height: auto !important;
            font-size: 16px !important;
        }
        body :is(.btn, .nav-link, .dropdown-item, .page-link, .swal2-styled) { min-height: 44px !important; }
        body .select2-container .select2-selection--single .select2-selection__rendered { line-height: 42px !important; }
        body .select2-container .select2-selection--single .select2-selection__arrow { height: 42px !important; }
        body .btn-close, body .navbar-toggler { min-height: 44px; min-width: 44px; }
        body .select2-results__option { min-height: 44px; }
        body .select2-search__field { font-size: 16px !important; }
        body .form-check-input { width: 1.25rem; height: 1.25rem; }
        body .form-check { min-height: 44px; }
        body .form-check-label { min-height: 44px; display: inline-flex; align-items: center; padding: .35rem 0; }
        body .epc-range-day { min-height: 36px; }
    }
    @media (prefers-reduced-motion: reduce) {
        body .modal, body .offcanvas-lg, body .module-loading-overlay,
        body .sidebar-nav .nav-link { transition: none !important; animation: none !important; }
    }
}
@media print {
    /* Enhancement wrappers must not become clipped print viewports. */
    .erp-table-scroll { display: contents; overflow: visible !important; }
}
