/* MOTRIX — estabilidade de interação e box model em telas móveis */

@media (max-width: 900px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        min-height: 100%;
        min-height: 100dvh;
        overflow-x: hidden;
        overscroll-behavior-x: none;
    }

    #app-view,
    #app-view.app-shell,
    #app-view .workspace {
        min-width: 0 !important;
        width: 100%;
        max-width: 100%;
    }

    #app-view.app-shell {
        min-height: 100dvh;
    }

    #app-view .page-content {
        min-width: 0;
        overflow-x: hidden;
        padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .v11-mobile-nav {
        left: 10px !important;
        right: 10px !important;
        bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
        z-index: 1200 !important;
        max-width: calc(100vw - 20px);
        touch-action: manipulation;
    }

    .v11-fab-wrap {
        right: 16px !important;
        bottom: calc(94px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 1250 !important;
    }

    .v11-fab,
    .v11-mobile-nav button,
    #app-view button {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    #app-view .sidebar {
        z-index: 6200 !important;
        width: min(86vw, 330px) !important;
        max-width: 330px;
        height: 100dvh !important;
        max-height: 100dvh;
        overflow: hidden;
        overscroll-behavior: contain;
        box-shadow: 24px 0 60px rgba(3, 10, 20, .28);
    }

    #app-view .sidebar .main-menu {
        min-height: 0;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .motrix-mobile-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 6100;
        background: rgba(4, 12, 23, .48);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        touch-action: none;
    }

    body.mobile-sidebar-open {
        overflow: hidden;
    }

    body.mobile-sidebar-open #app-view .workspace {
        pointer-events: none;
        user-select: none;
        -webkit-user-select: none;
    }

    body.mobile-sidebar-open .v11-mobile-nav,
    body.mobile-sidebar-open .v11-fab-wrap {
        opacity: 0;
        visibility: hidden;
        pointer-events: none !important;
    }

    body.mobile-modal-open {
        overflow: hidden;
    }

    body.mobile-modal-open #app-view {
        pointer-events: none;
        user-select: none;
        -webkit-user-select: none;
    }

    body.mobile-modal-open .v11-mobile-nav,
    body.mobile-modal-open .v11-fab-wrap {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body > .modal-backdrop,
    .modal-backdrop {
        z-index: 7000 !important;
        align-items: stretch !important;
        justify-items: stretch !important;
        place-items: stretch !important;
        padding: max(8px, env(safe-area-inset-top, 0px)) 8px max(8px, env(safe-area-inset-bottom, 0px)) !important;
        overflow: hidden;
        overscroll-behavior: contain;
    }

    body > .modal-backdrop.nested,
    .modal-backdrop.nested {
        z-index: 7200 !important;
    }

    .modal-backdrop .modal,
    .modal-backdrop .modal-card,
    .modal-backdrop .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: auto;
        max-height: calc(100dvh - max(16px, env(safe-area-inset-top, 0px)) - max(16px, env(safe-area-inset-bottom, 0px))) !important;
        margin: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    .modal-backdrop .modal-header {
        top: 0;
        z-index: 5 !important;
    }

    .modal-backdrop .modal-body {
        min-width: 0;
        padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)) !important;
    }

    #app-view input,
    #app-view select,
    #app-view textarea,
    .modal-backdrop input,
    .modal-backdrop select,
    .modal-backdrop textarea,
    .login-view input {
        font-size: 16px !important;
    }

    #app-view input,
    #app-view select,
    #app-view textarea,
    .modal-backdrop input,
    .modal-backdrop select,
    .modal-backdrop textarea {
        scroll-margin-top: 92px;
        scroll-margin-bottom: 150px;
    }

    #app-view .data-panel,
    #app-view .table-wrap,
    #app-view .report-table-wrap,
    #app-view .finance-card,
    #app-view .panel,
    #app-view .os-detail-section,
    #app-view .os-summary-card,
    #app-view .os-total-card {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    #app-view .table-wrap,
    #app-view .report-table-wrap,
    #app-view .data-panel {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    .toast-container {
        top: max(12px, env(safe-area-inset-top, 0px)) !important;
        right: 12px !important;
        left: 12px !important;
        z-index: 8500 !important;
        pointer-events: none;
    }

    .toast-container .toast {
        width: 100% !important;
        pointer-events: auto;
    }
}

@media (max-width: 560px) {
    #app-view .page-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .modal-backdrop .modal-header,
    .modal-backdrop .modal-body {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .modal-backdrop .form-grid {
        grid-template-columns: 1fr !important;
    }

    .modal-backdrop .field.full {
        grid-column: 1 !important;
    }

    .modal-backdrop .modal-actions {
        position: sticky;
        bottom: 0;
        z-index: 4;
        margin-left: -16px;
        margin-right: -16px;
        margin-bottom: calc(-30px - env(safe-area-inset-bottom, 0px));
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--v3-border, rgba(148,163,184,.14));
        background: var(--v3-card, #fff);
    }
}