@media (max-width: 1280px) {
    body.ams-app .form-grid > .field-group,
    body.ams-app .form-grid > .form-group,
    body.ams-app .form-grid > .input-group {
        grid-column: span 4;
    }

    body.ams-app .metrics {
        grid-template-columns: repeat(3, minmax(160px, 1fr)) !important;
    }

    body.ams-app .charts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .ams-action-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.ams-app.ams-asset-fullscreen .form-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1024px) {
    .ams-shell {
        display: block;
    }

    .ams-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(var(--ams-sidebar-width), calc(100vw - 56px));
        max-width: 320px;
        transform: translateX(-102%);
        transition: transform var(--ams-transition-base);
    }

    body.ams-nav-open {
        overflow: hidden !important;
    }

    body.ams-nav-open .ams-sidebar {
        transform: translateX(0);
    }

    .ams-sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: var(--ams-z-sidebar-overlay);
        display: block;
        border: 0;
        background: rgba(15, 23, 42, 0.42);
        cursor: pointer;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--ams-transition-base);
    }

    body.ams-nav-open .ams-sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    .ams-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .ams-account-copy {
        display: none;
    }

    .ams-content {
        padding: var(--ams-space-5);
    }

    body.ams-app .form-grid > .field-group,
    body.ams-app .form-grid > .form-group,
    body.ams-app .form-grid > .input-group {
        grid-column: span 6;
    }

    body.ams-app.ams-asset-fullscreen .ams-page-heading {
        max-width: min(760px, calc(100vw - 150px));
    }

    body.ams-app.ams-asset-fullscreen .form-grid {
        max-width: 900px;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.ams-app.ams-asset-fullscreen .form-grid > .field-group,
    body.ams-app.ams-asset-fullscreen .form-grid > .form-group,
    body.ams-app.ams-asset-fullscreen .form-grid > .input-group {
        grid-column: auto !important;
    }
}

@media (max-width: 768px) {
    :root {
        --ams-header-height: auto;
    }

    .ams-header {
        align-items: flex-start;
        flex-wrap: wrap;
        padding: var(--ams-space-3) var(--ams-space-4);
    }

    .ams-header-leading {
        width: 100%;
        align-items: flex-start;
    }

    .ams-header-aside {
        width: 100%;
        justify-content: flex-start;
    }

    .ams-header-actions {
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    body.ams-app .ams-header-actions .topbar-actions,
    body.ams-app .ams-header-actions .top-actions,
    body.ams-app .ams-header-actions .ams-inline-actions,
    body.ams-app .ams-header-actions .ams-header-action-group {
        width: max-content !important;
        justify-content: flex-start !important;
    }

    .ams-page-heading p {
        max-width: 66vw;
        white-space: normal;
    }

    .ams-account {
        align-self: center;
    }

    .ams-sign-out {
        padding: 0 var(--ams-space-3);
    }

    .ams-content {
        padding: var(--ams-space-4);
    }

    body.ams-app .panel-header,
    body.ams-app .card-header,
    body.ams-app .table-top,
    body.ams-app .results-header,
    body.ams-app .table-header,
    body.ams-app .section-header {
        padding: var(--ams-space-4);
    }

    body.ams-app .panel-body,
    body.ams-app .card-body,
    body.ams-app .section-body {
        padding: var(--ams-space-4);
    }

    body.ams-app .form-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.ams-app .form-grid > .field-group,
    body.ams-app .form-grid > .form-group,
    body.ams-app .form-grid > .input-group,
    body.ams-app .form-grid > * {
        grid-column: 1 / -1 !important;
    }

    body.ams-app .metrics,
    body.ams-app .charts-grid,
    body.ams-app .cards,
    body.ams-app .summary-grid,
    .ams-action-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.ams-app .asset-link-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.ams-app .topbar,
    body.ams-app .page-header,
    body.ams-app .results-header,
    body.ams-app .table-header,
    body.ams-app .section-header {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    body.ams-app .topbar-actions,
    body.ams-app .page-actions,
    body.ams-app .import-export-actions,
    body.ams-app .records-actions,
    body.ams-app .table-actions,
    body.ams-app .button-row {
        width: 100%;
    }

    body.ams-app .topbar-actions .btn,
    body.ams-app .page-actions .btn {
        flex: 1 1 auto;
    }

    body.ams-app .pagination-wrap {
        align-items: stretch;
        flex-direction: column;
    }

    body.ams-app .pagination-actions {
        justify-content: space-between;
    }

    body.ams-app.ams-asset-fullscreen .ams-page-heading {
        max-width: calc(100vw - 120px);
    }

    body.ams-app.ams-asset-fullscreen .form-grid {
        max-width: 760px;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.ams-app.ams-asset-fullscreen .form-grid > .field-group,
    body.ams-app.ams-asset-fullscreen .form-grid > .form-group,
    body.ams-app.ams-asset-fullscreen .form-grid > .input-group,
    body.ams-app.ams-asset-fullscreen .form-grid > * {
        grid-column: auto !important;
    }

    body.ams-app.ams-asset-fullscreen .form-grid > .form-section-title,
    body.ams-app.ams-asset-fullscreen .form-grid > .datacard-mobility-section-title,
    body.ams-app.ams-asset-fullscreen .form-grid > .section-title {
        grid-column: 1 / -1 !important;
    }

    body.ams-app.ams-asset-fullscreen .import-body-row {
        grid-template-columns: minmax(0, 280px) !important;
        grid-template-rows: none;
        justify-content: start;
    }

    body.ams-app.ams-asset-fullscreen .import-body-row > .ams-field-label,
    body.ams-app.ams-asset-fullscreen .import-body-row > input[type="file"] {
        grid-column: 1 !important;
        grid-row: auto !important;
        width: 100% !important;
        max-width: 280px !important;
    }

    body.ams-app.ams-asset-fullscreen .import-body-row > .btn,
    body.ams-app.ams-asset-fullscreen .import-body-row > button {
        grid-column: 1 !important;
        grid-row: auto !important;
        width: fit-content !important;
        max-width: 100% !important;
        justify-self: start;
    }

    body.ams-app.ams-asset-fullscreen .table-top {
        align-items: stretch !important;
    }

    body.ams-app.ams-asset-fullscreen .table-title-text,
    body.ams-app.ams-asset-fullscreen .records-actions {
        width: 100%;
        min-width: 0;
    }

    body.ams-app.ams-asset-fullscreen .records-actions > input:not([type="hidden"]) {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 480px) {
    .ams-breadcrumb {
        display: none;
    }

    .ams-page-heading h1 {
        font-size: 1.125rem !important;
    }

    .ams-page-heading p {
        display: none;
    }

    .ams-sign-out {
        min-height: 40px;
        font-size: 0;
    }

    .ams-sign-out::after {
        font-size: var(--ams-font-size-sm);
        content: "Sign Out";
    }

    body.ams-app .metrics,
    body.ams-app .charts-grid,
    body.ams-app .cards,
    body.ams-app .summary-grid,
    .ams-action-list {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.ams-app.ams-asset-fullscreen .form-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.ams-app.ams-asset-fullscreen .form-grid > * {
        grid-column: 1 / -1 !important;
    }

    body.ams-app .metric-card,
    body.ams-app .card-link .card,
    body.ams-app .summary-card {
        min-height: 106px !important;
    }

    body.ams-app .btn,
    body.ams-app .submit-btn,
    body.ams-app .search-btn,
    body.ams-app .export-toggle,
    body.ams-app .review-btn {
        min-height: 44px;
    }

    body.ams-app .button-row > *,
    body.ams-app .import-export-actions > *,
    body.ams-app .records-actions > * {
        flex: 1 1 100%;
    }

    body.ams-app .delete-modal,
    body.ams-app .feedback-modal,
    body.ams-app .custom-modal-overlay,
    body.ams-app .unlink-confirm-modal,
    body.ams-app .hrms-leave-alert-overlay,
    body.ams-app .login-security-alert-overlay {
        align-items: flex-end;
        padding: 0;
    }

    body.ams-app .delete-box,
    body.ams-app .feedback-box,
    body.ams-app .custom-modal,
    body.ams-app .unlink-confirm-box,
    body.ams-app .hrms-leave-alert-dialog,
    body.ams-app .login-security-alert-dialog {
        width: 100% !important;
        max-height: 92vh;
        border-radius: var(--ams-radius-lg) var(--ams-radius-lg) 0 0 !important;
    }

    body.ams-app #toast,
    body.ams-app .toast,
    body.ams-app .notification {
        right: auto !important;
        bottom: var(--ams-space-4) !important;
        left: 50% !important;
        width: calc(100% - (2 * var(--ams-space-4))) !important;
        max-width: 420px;
        transform: translateX(-50%) !important;
    }
}