/* Responsive safety overrides — modals, forms, mobile overflow */

:root {
    --z-tooltip: 1200;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-signature-backdrop: 1050;
    --z-signature-popup: 1060;
    --z-dropdown: 1100;
    --z-recovery-banner: 1300;
    --z-recovery-overlay: 1290;
}

#cr-banner { z-index: var(--z-recovery-banner) !important; }
#cr-overlay { z-index: var(--z-recovery-overlay) !important; }

.popup-background {
    z-index: var(--z-signature-backdrop) !important;
}

.form-600 .signature,
.form-800 .signature,
.form-1000 .signature,
.form-1200 .signature,
.form-1400 .signature,
#popup.signature,
#customer-signature-popup.signature,
.signature.signature-popup {
    z-index: var(--z-signature-popup) !important;
}

.modal .modal-body {
    max-height: min(85dvh, calc(100dvh - 8rem));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 991.98px) {
    .modal .form-1200,
    .modal .form-1000,
    .modal .form-800,
    .modal .form-600 {
        width: 100% !important;
        max-width: 100%;
        left: 0 !important;
        margin-left: 0 !important;
        position: relative !important;
    }
}

@media (max-width: 800px) {
    .wrapper {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .wrapper.collapseSideBar .sidebar {
        width: min(300px, 100vw);
        max-width: 100%;
    }
}

@media (max-width: 767.98px) {
    .scroll-tabel,
    .scroll-tabel1 {
        max-height: min(50dvh, 400px);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .filters input,
    .filters select {
        width: 100% !important;
        max-width: 100%;
    }

    .salesinfo iframe {
        width: 100% !important;
        max-width: 100%;
    }

    [class*="width"] {
        max-width: 100% !important;
        box-sizing: border-box;
    }
}

.wrapper .top_navbar {
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

.wrapper .main-Content {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.overflowscroll {
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}