/* Phase28 mobile responsiveness hardening */
:root {
  --bnc-mobile-header-height: 4.5rem;
  --bnc-mobile-sidebar-width: min(86vw, 18.5rem);
}

@media (max-width: 991.98px) {
  html, body {
    overflow-x: clip;
  }

  body {
    -webkit-text-size-adjust: 100%;
  }

  .page,
  .main-content,
  .app-content,
  .container-fluid {
    min-width: 0;
  }

  .app-header,
  .bnc-smart-header {
    position: sticky;
    top: 0;
    z-index: 4100 !important;
  }

  .bnc-smart-header .main-header-container {
    padding-inline: .6rem !important;
  }

  .bnc-header-shell {
    gap: .55rem !important;
  }

  .bnc-header-main {
    min-width: 0;
    gap: .45rem !important;
  }

  .bnc-header-end {
    gap: .35rem !important;
  }

  .bnc-header-copy {
    min-width: 0;
    max-width: 9.75rem;
  }

  .bnc-header-page-title {
    font-size: .9rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .bnc-header-page-subtitle {
    display: none !important;
  }

  .bnc-header-profile-copy,
  .bnc-header-action-copy {
    display: none !important;
  }

  .bnc-header-profile-trigger,
  .bnc-header-theme-trigger,
  .bnc-smart-header .bnc-header-end .bnc-header-icon-btn {
    min-height: 2.55rem;
    padding: .4rem .7rem !important;
    border-radius: 14px !important;
  }

  .main-content {
    padding-block-start: calc(var(--bnc-mobile-header-height) + .6rem) !important;
    padding-inline: 0 !important;
  }

  .container-fluid {
    padding-inline: .7rem !important;
  }

  .card,
  .custom-card,
  .bnc-listing-surface,
  .bnc-filter-surface,
  .modal-content,
  .offcanvas,
  .swal2-popup {
    border-radius: 18px !important;
  }

  .page-header,
  .page-header-breadcrumb,
  .btn-list,
  .bnc-listing-toolbar,
  .bnc-listing-filters,
  .bnc-listing-actions,
  .bnc-sticky-submit-bar,
  .d-flex.gap-2,
  .d-flex.gap-3,
  .d-flex.gap-4 {
    flex-wrap: wrap !important;
  }

  .page-header,
  .page-title-box,
  .card-header,
  .bnc-listing-toolbar,
  .bnc-hotpage-toolbar {
    gap: .55rem !important;
  }

  .app-sidebar {
    width: var(--bnc-mobile-sidebar-width) !important;
    max-width: calc(100vw - .85rem) !important;
    inset-inline-start: auto !important;
    inset-inline-end: .45rem !important;
    inset-block-start: .45rem !important;
    inset-block-end: .45rem !important;
    height: auto !important;
    max-height: calc(100dvh - .9rem) !important;
    z-index: 4200 !important;
    transform: translateX(calc(var(--bnc-mobile-sidebar-width) + 1rem)) !important;
    border-radius: 24px 0 0 24px !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    box-shadow: 0 28px 72px rgba(15, 23, 42, .28) !important;
    overflow: hidden !important;
    backdrop-filter: blur(18px);
  }

  html[dir="ltr"] .app-sidebar {
    inset-inline-start: .45rem !important;
    inset-inline-end: auto !important;
    transform: translateX(calc(-1 * (var(--bnc-mobile-sidebar-width) + 1rem))) !important;
    border-radius: 0 24px 24px 0 !important;
  }

  html[data-toggled="open"] .app-sidebar {
    transform: translateX(0) !important;
  }

  html[data-toggled="close"] .app-sidebar,
  html:not([data-toggled]) .app-sidebar {
    transform: translateX(calc(var(--bnc-mobile-sidebar-width) + 1rem)) !important;
  }

  html[dir="ltr"][data-toggled="close"] .app-sidebar,
  html[dir="ltr"]:not([data-toggled]) .app-sidebar {
    transform: translateX(calc(-1 * (var(--bnc-mobile-sidebar-width) + 1rem))) !important;
  }

  .app-sidebar .main-sidebar-header {
    display: flex !important;
    position: sticky !important;
    top: 0 !important;
    inset-inline: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 4.1rem;
    padding: .9rem .9rem .65rem !important;
    justify-content: space-between !important;
    z-index: 3;
    backdrop-filter: blur(14px);
  }

  .app-sidebar .main-sidebar-header .header-logo img {
    height: 2.2rem !important;
  }

  .bnc-mobile-sidebar-close {
    inline-size: 2.4rem;
    block-size: 2.4rem;
    border: 0;
    border-radius: 14px;
    background: color-mix(in srgb, var(--bnc-accent, #3b82f6) 12%, rgba(255,255,255,.82));
    color: var(--bnc-text-strong, #0f172a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 22px rgba(15,23,42,.08);
  }

  html[data-theme-mode="dark"] .bnc-mobile-sidebar-close {
    background: rgba(15, 23, 42, .88);
    color: #e2e8f0;
  }

  .app-sidebar .main-sidebar {
    height: calc(100% - 4.1rem) !important;
    margin-block-start: 0 !important;
    padding: .25rem .18rem 1rem !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .app-sidebar .main-menu {
    padding-inline: 0 !important;
    margin: 0 !important;
  }

  .app-sidebar .slide {
    padding-inline: 0 !important;
  }

  .app-sidebar .slide__category {
    padding: .5rem .8rem !important;
  }

  .app-sidebar .main-menu > .slide > .side-menu__item,
  .app-sidebar .slide-menu .side-menu__item {
    padding: .78rem .88rem !important;
    min-height: 2.95rem;
  }

  .app-sidebar .slide-menu.child1 li {
    padding-inline-start: 1.7rem !important;
  }

  .app-sidebar .slide-menu.child2 li,
  .app-sidebar .slide-menu.child3 li {
    padding-inline-start: 1rem !important;
  }

  #responsive-overlay {
    z-index: 4180 !important;
    background: rgba(15, 23, 42, .42) !important;
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
  }

  #responsive-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  html[data-toggled="open"] body {
    overflow: hidden;
    touch-action: none;
  }

  html[data-toggled="open"] .main-content,
  html[data-toggled="open"] .app-content,
  html[data-toggled="open"] .footer,
  html[data-toggled="open"] .scrollToTop {
    pointer-events: none;
    user-select: none;
  }

  html[data-toggled="open"] .app-sidebar,
  html[data-toggled="open"] .app-sidebar *,
  html[data-toggled="open"] #responsive-overlay,
  html[data-toggled="open"] .app-header {
    pointer-events: auto;
  }

  .table-responsive,
  .bnc-scroll-x,
  .bnc-auto-table-scroll,
  [data-bnc-scroll="x"] {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 1rem;
  }

  .table-responsive table,
  .bnc-scroll-x table,
  .bnc-auto-table-scroll table,
  [data-bnc-scroll="x"] table {
    min-width: max(760px, 100%);
  }

  .modal-dialog {
    margin: .75rem auto !important;
    max-width: calc(100vw - 1rem) !important;
  }

  .dropdown-menu,
  .main-header-dropdown,
  .header-profile-dropdown {
    max-width: calc(100vw - 1rem) !important;
  }

  .form-control,
  .form-select,
  select,
  textarea {
    font-size: 16px !important;
  }

  .bnc-form-progress {
    top: calc(var(--bnc-mobile-header-height) + .2rem) !important;
  }

  .bnc-sticky-submit-bar {
    bottom: .55rem !important;
    inset-inline: .55rem !important;
  }
}