:root {
  --erp-shell-header-height: 58px;
  --erp-layer-sidebar-backdrop: 1025;
  --erp-layer-sidebar: 1032;
  --erp-layer-sidebar-toggle: 1034;
  --erp-layer-header: 1045;
  --erp-layer-header-menu: 1049;
}

body.showcase-page {
  --erp-shell-header-height: 104px;
}

.erp-navbar,
.showcase-topbar {
  z-index: var(--erp-layer-header) !important;
}

.erp-navbar .dropdown-menu,
.showcase-topbar .dropdown-menu,
.erp-profile-menu,
.erp-notification-menu {
  z-index: var(--erp-layer-header-menu) !important;
}

/*
 * Keep Bootstrap overlays above the application shell. Page headers and
 * sidebars must never intercept clicks while a dialog is open.
 */
.modal-backdrop {
  z-index: 1050 !important;
}

.modal {
  z-index: 1055 !important;
}

body.modal-open .erp-navbar,
body.modal-open .showcase-topbar,
body.modal-open .erp-side-panel,
body.modal-open .inv-sidebar,
body.modal-open .acc-sidebar,
body.modal-open .crm-sidebar,
body.modal-open .hrm-sidebar,
body.modal-open .pmc-sidebar,
body.modal-open .service-sidebar,
body.modal-open .academy-sidebar {
  pointer-events: none;
}

.erp-side-panel,
.inv-sidebar,
.acc-sidebar,
.crm-sidebar,
.hrm-sidebar,
.pmc-sidebar {
  flex: 0 0 auto;
  max-height: calc(100dvh - var(--erp-shell-header-height));
  min-height: calc(100dvh - var(--erp-shell-header-height));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.academy-sidebar {
  flex: 0 0 auto;
  max-height: calc(100dvh - var(--erp-shell-header-height));
  min-height: calc(100dvh - var(--erp-shell-header-height));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.acc-sidebar-body {
  height: calc(100% - 70px);
}

.pmc-sidebar {
  min-width: 280px;
}

.service-sidebar {
  max-height: calc(100dvh - var(--erp-shell-header-height));
  min-height: calc(100dvh - var(--erp-shell-header-height));
}

.pmc-mobile-menu-btn,
.pmc-sidebar-backdrop {
  display: none;
}

@media (max-width: 1024px) {
  .service-center-app .app-wrapper {
    flex-direction: column;
  }

  .service-sidebar {
    width: 100%;
    max-height: none;
    min-height: 0;
    flex-basis: auto;
  }

  .erp-side-panel,
  .inv-sidebar,
  .acc-sidebar,
  .crm-sidebar,
  .pmc-sidebar {
    position: fixed !important;
    z-index: var(--erp-layer-sidebar) !important;
    top: var(--erp-shell-header-height) !important;
    bottom: 0 !important;
    height: auto !important;
    max-height: calc(100dvh - var(--erp-shell-header-height)) !important;
    min-height: 0 !important;
  }

  .academy-sidebar {
    top: var(--erp-shell-header-height) !important;
    bottom: 0 !important;
    height: auto !important;
    max-height: calc(100dvh - var(--erp-shell-header-height)) !important;
    min-height: 0 !important;
  }

  .purchase-sidebar-backdrop,
  .inv-sidebar-backdrop,
  .acc-sidebar-backdrop,
  .crm-sidebar-backdrop,
  .pmc-sidebar-backdrop {
    z-index: var(--erp-layer-sidebar-backdrop) !important;
    top: var(--erp-shell-header-height) !important;
    bottom: 0 !important;
    height: auto !important;
  }

  .purchase-mobile-menu-btn,
  .crm-mobile-menu-toggle,
  .pmc-mobile-menu-btn {
    z-index: var(--erp-layer-sidebar-toggle) !important;
    top: calc(var(--erp-shell-header-height) + 10px) !important;
  }

  .acc-mobile-menu-btn,
  .inv-mobile-menu-btn {
    z-index: var(--erp-layer-sidebar-toggle) !important;
  }

  .pmc-mobile-menu-btn {
    position: fixed;
    inset-inline-start: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 13px;
    border: 0;
    border-radius: 13px;
    color: #fff;
    background: #101820;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .22);
    font-weight: 800;
  }

  .pmc-sidebar {
    inset-inline-start: 0;
    width: min(88vw, 320px);
    min-width: 0;
    transform: translateX(-105%);
    transition: transform .22s ease;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .3);
  }

  html[dir="rtl"] .pmc-sidebar {
    transform: translateX(105%);
  }

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

  .pmc-sidebar-backdrop {
    position: fixed;
    inset-inline: 0;
    display: block;
    background: rgba(15, 23, 42, .44);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }

  body.pmc-sidebar-open .pmc-sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (max-width: 992px) {
  .hrm-sidebar {
    z-index: var(--erp-layer-sidebar) !important;
    top: var(--erp-shell-header-height) !important;
    bottom: 0 !important;
    height: auto !important;
    max-height: calc(100dvh - var(--erp-shell-header-height)) !important;
    min-height: 0 !important;
  }

  .hrm-sidebar-backdrop {
    z-index: var(--erp-layer-sidebar-backdrop) !important;
    top: var(--erp-shell-header-height) !important;
    bottom: 0 !important;
    height: auto !important;
  }

  .hrm-mobile-menu-btn {
    z-index: var(--erp-layer-sidebar-toggle) !important;
  }
}

@media (max-width: 650px) {
  body.showcase-page {
    --erp-shell-header-height: 94px;
  }

  .erp-profile-menu {
    width: min(380px, calc(100vw - 20px));
    max-height: calc(100dvh - var(--erp-shell-header-height) - 8px);
  }
}