/* APP BRAGA - final mobile sidebar contract */
@media screen and (max-width: 768px) {
  html,
  body {
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100% !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: auto !important;
  }

  body {
    display: block !important;
    background: var(--app-bg, #171717) !important;
  }

  .main,
  main,
  .main-content,
  .page-content,
  .dashboard-container,
  .content-area,
  .dashboard-shell,
  .content {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    min-height: 100svh !important;
    height: auto !important;
    max-height: none !important;
    margin-left: 0 !important;
    left: 0 !important;
    padding-top: calc(78px + env(safe-area-inset-top, 0px)) !important;
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: auto !important;
  }

  .app-menu-toggle {
    position: fixed !important;
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    left: calc(12px + env(safe-area-inset-left, 0px)) !important;
    z-index: 2147483647 !important;
    display: grid !important;
    place-items: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    border: 1px solid color-mix(in srgb, var(--theme-primary, #f15a24) 42%, rgba(255,255,255,.16)) !important;
    border-radius: 16px !important;
    color: #fff !important;
    background: linear-gradient(145deg, color-mix(in srgb, var(--theme-primary, #f15a24) 58%, #121212), rgba(255,255,255,.08)) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .34) !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
  }

  aside.sidebar,
  .sidebar,
  #sidebar,
  .enterprise-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 2147483645 !important;
    width: min(88vw, 340px) !important;
    min-width: min(88vw, 340px) !important;
    max-width: min(88vw, 340px) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: calc(76px + env(safe-area-inset-top, 0px)) 14px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    transform: translate3d(-112%, 0, 0) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform .22s ease, visibility .22s ease !important;
  }

  body.sidebar-open aside.sidebar,
  body.sidebar-open .sidebar,
  body.sidebar-open #sidebar,
  body.sidebar-open .enterprise-sidebar,
  aside.sidebar.app-open,
  .sidebar.app-open,
  #sidebar.app-open,
  .enterprise-sidebar.app-open {
    transform: translate3d(0, 0, 0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body:not(.sidebar-open) aside.sidebar,
  body:not(.sidebar-open) .sidebar,
  body:not(.sidebar-open) #sidebar,
  body:not(.sidebar-open) .enterprise-sidebar {
    transform: translate3d(-112%, 0, 0) !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.sidebar-open {
    overflow: hidden !important;
    touch-action: none !important;
  }

  body.sidebar-open .main,
  body.sidebar-open main,
  body.sidebar-open .main-content,
  body.sidebar-open .page-content,
  body.sidebar-open .dashboard-container,
  body.sidebar-open .content-area,
  body.sidebar-open .dashboard-shell,
  body.sidebar-open .content {
    filter: blur(3px) !important;
  }

  .app-sidebar-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483644 !important;
    display: none !important;
    background: rgba(0, 0, 0, .58) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    pointer-events: none !important;
  }

  body.sidebar-open .app-sidebar-overlay.show {
    display: block !important;
    pointer-events: auto !important;
  }

  aside.sidebar a,
  .sidebar a,
  #sidebar a,
  .enterprise-sidebar a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 46px !important;
    margin: 2px 0 !important;
    padding: 11px 13px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    color: rgba(255,255,255,.88) !important;
    text-decoration: none !important;
    white-space: normal !important;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .sidebar-link-text,
  aside.sidebar a span,
  .sidebar a span {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    max-width: calc(100% - 44px) !important;
    overflow: visible !important;
    color: inherit !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  .sidebar .brand,
  .sidebar .premium-brand {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 18px !important;
  }
}