/**
 * Sidebar — responsive: desktop panel vs mobile overlay drawer.
 */
:root {
  --pp-sidebar-mobile-w: 280px;
}

/* Desktop: optional narrow-sidebar text scaling */
@media (min-width: 992px) {
  body#app .main-sidebar,
  .pp-spa-wrapper .main-sidebar {
    container-type: inline-size;
    container-name: mk-sidebar;
  }

  @container mk-sidebar (max-width: 11.5rem) {
    body#app .nav-sidebar.mk-flat .nav-link p,
    .pp-spa-wrapper .nav-sidebar.mk-flat .nav-link p {
      font-size: 0.75rem;
    }

    body#app .nav-header,
    .pp-spa-wrapper .nav-header {
      font-size: 0.65rem;
    }

    body#app .profileBox strong,
    .pp-spa-wrapper .profileBox strong {
      font-size: 0.72rem;
    }

    body#app .profileBox .text-light,
    body#app .profileBox .text-muted,
    .pp-spa-wrapper .profileBox .text-light,
    .pp-spa-wrapper .profileBox .text-muted {
      font-size: 0.62rem;
    }
  }
}

/* Mobile — AdminLTE overlay drawer (not fixed desktop column) */
@media (max-width: 991.98px) {
  :root {
    --pp-sidebar-mobile-w: 280px;
  }

  body#app .main-sidebar,
  body#app .main-sidebar::before,
  .pp-spa-wrapper .main-sidebar,
  .pp-spa-wrapper .main-sidebar::before {
    width: var(--pp-sidebar-mobile-w) !important;
    z-index: 1040 !important;
    margin-left: 0 !important;
    transform: translateX(-105%);
  }

  body#app.sidebar-open .main-sidebar,
  body#app.sidebar-open .main-sidebar::before,
  .pp-spa-wrapper.sidebar-open .main-sidebar,
  .pp-spa-wrapper.sidebar-open .main-sidebar::before {
    transform: translateX(0);
  }

  body#app:not(.layout-top-nav) .content-wrapper,
  body#app:not(.layout-top-nav) .main-footer,
  body#app:not(.layout-top-nav) .main-header,
  .pp-spa-wrapper:not(.layout-top-nav) .content-wrapper,
  .pp-spa-wrapper:not(.layout-top-nav) .main-footer,
  .pp-spa-wrapper:not(.layout-top-nav) .main-header {
    margin-left: 0 !important;
  }

  body#app #sidebar-overlay,
  .pp-spa-wrapper #sidebar-overlay {
    z-index: 1037 !important;
    background: rgba(15, 23, 42, 0.45) !important;
  }

  body#app .main-sidebar,
  .pp-spa-wrapper .main-sidebar {
    display: flex;
    flex-direction: column;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden;
  }

  body#app .main-sidebar .sidebar,
  .pp-spa-wrapper .main-sidebar .sidebar {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    max-height: none;
    position: relative;
  }

  body#app .main-sidebar .mk-sb-body,
  .pp-spa-wrapper .main-sidebar .mk-sb-body {
    min-height: 0;
    padding-bottom: calc(var(--mk-sb-footer-h, 4.25rem) + 0.5rem);
  }

  body#app .main-sidebar .mk-sb-footer,
  .pp-spa-wrapper .main-sidebar .mk-sb-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin-top: 0;
    min-height: var(--mk-sb-footer-h, 4.25rem);
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  }

  /* Flat full-width rows — list layout uses default (desktop) sizing on mobile */
  body#app .mk-sb-nav-list .nav-sidebar.mk-flat > .nav-item > .nav-link,
  .pp-spa-wrapper .mk-sb-nav-list .nav-sidebar.mk-flat > .nav-item > .nav-link {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
    min-height: 44px;
    padding: 0.5rem 1rem !important;
  }

  body#app .mk-sb-nav-list .nav-sidebar.mk-flat > .nav-item > .nav-link,
  .pp-spa-wrapper .mk-sb-nav-list .nav-sidebar.mk-flat > .nav-item > .nav-link {
    min-width: 0;
    overflow: hidden;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  body#app .mk-sb-nav-list .nav-sidebar.mk-flat .nav-icon,
  .pp-spa-wrapper .mk-sb-nav-list .nav-sidebar.mk-flat .nav-icon {
    width: var(--mk-sb-icon-box) !important;
    height: var(--mk-sb-icon-box) !important;
    min-height: var(--mk-sb-icon-box) !important;
    flex: 0 0 var(--mk-sb-icon-box) !important;
    margin-right: 0.5rem !important;
  }

  body#app .mk-sb-nav-list .nav-sidebar.mk-flat .nav-icon ion-icon,
  .pp-spa-wrapper .mk-sb-nav-list .nav-sidebar.mk-flat .nav-icon ion-icon {
    font-size: var(--mk-sb-icon-md) !important;
    width: var(--mk-sb-icon-md) !important;
    height: var(--mk-sb-icon-md) !important;
  }

  body#app .mk-sb-nav-list .nav-sidebar.mk-flat .nav-link p,
  .pp-spa-wrapper .mk-sb-nav-list .nav-sidebar.mk-flat .nav-link p {
    font-size: var(--mk-sb-label-md) !important;
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
  }

  body#app .mk-sb-nav-list .nav-header,
  .pp-spa-wrapper .mk-sb-nav-list .nav-header {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.6875rem;
    font-weight: 700;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  body#app .mk-sb-nav-list .nav-sidebar.mk-flat > .nav-item > .nav-link.active,
  body#app .mk-sb-nav-list .nav-sidebar.mk-flat > .nav-item > .nav-link.active-menu,
  .pp-spa-wrapper .mk-sb-nav-list .nav-sidebar.mk-flat > .nav-item > .nav-link.active,
  .pp-spa-wrapper .mk-sb-nav-list .nav-sidebar.mk-flat > .nav-item > .nav-link.active-menu {
    font-weight: 600;
  }

  /* Drawer — grid menu layout */
  body#app .main-sidebar.mk-sb-layout-grid .mk-sb-body,
  .pp-spa-wrapper .main-sidebar.mk-sb-layout-grid .mk-sb-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  body#app .main-sidebar.mk-sb-layout-grid .mk-sb-nav-grid,
  .pp-spa-wrapper .main-sidebar.mk-sb-layout-grid .mk-sb-nav-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body#app .main-sidebar.mk-sb-layout-grid .mk-sb-nav-grid .mk-grid-item,
  .pp-spa-wrapper .main-sidebar.mk-sb-layout-grid .mk-sb-nav-grid .mk-grid-item {
    min-height: 6.25rem;
  }

  body#app .main-sidebar.mk-sb-layout-grid .mk-sb-nav-grid .mk-grid-item ion-icon,
  .pp-spa-wrapper .main-sidebar.mk-sb-layout-grid .mk-sb-nav-grid .mk-grid-item ion-icon {
    font-size: 2.25rem !important;
  }

  body#app .main-sidebar.mk-sb-layout-grid .mk-sb-nav-grid .mk-grid-item p,
  .pp-spa-wrapper .main-sidebar.mk-sb-layout-grid .mk-sb-nav-grid .mk-grid-item p {
    font-size: 0.9375rem !important;
  }
}