/* PM SHOP FINAL SAFE FIX
   Fokus: sidebar bisa scroll + menu/submenu buka tutup + konten tidak terlalu ke tengah.
   Tidak menyentuh fitur pembayaran/QRIS/VIP/MofarPay. */

@media (min-width: 901px){
  html, body{min-height:100%; overflow-x:hidden!important;}
  body{min-width:0!important;}

  .layout{
    display:grid!important;
    grid-template-columns:282px minmax(0,1fr)!important;
    min-height:100vh!important;
    align-items:start!important;
  }

  .layout > .sidebar,
  .layout > aside.sidebar,
  aside.sidebar.sidebar,
  .sidebar{
    position:sticky!important;
    top:0!important;
    height:100vh!important;
    max-height:100vh!important;
    min-height:100vh!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    box-sizing:border-box!important;
    padding:24px!important;
    align-self:start!important;
  }

  .sidebar .brand,
  .sidebar .side-brand,
  .sidebar .admin-brand{
    flex:0 0 auto!important;
    margin-bottom:18px!important;
  }

  .sidebar .menu,
  .sidebar .side-menu,
  .sidebar nav.menu,
  .sidebar nav.side-menu{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    display:grid!important;
    align-content:start!important;
    gap:9px!important;
    padding-right:8px!important;
    margin-right:-8px!important;
    scrollbar-width:thin!important;
    scrollbar-color:var(--p,#6d4cff) rgba(255,255,255,.055)!important;
  }

  .sidebar .menu::-webkit-scrollbar,
  .sidebar .side-menu::-webkit-scrollbar,
  .sidebar nav.menu::-webkit-scrollbar,
  .sidebar nav.side-menu::-webkit-scrollbar{
    width:8px!important;
    display:block!important;
  }
  .sidebar .menu::-webkit-scrollbar-track,
  .sidebar .side-menu::-webkit-scrollbar-track,
  .sidebar nav.menu::-webkit-scrollbar-track,
  .sidebar nav.side-menu::-webkit-scrollbar-track{
    background:rgba(255,255,255,.055)!important;
    border-radius:999px!important;
  }
  .sidebar .menu::-webkit-scrollbar-thumb,
  .sidebar .side-menu::-webkit-scrollbar-thumb,
  .sidebar nav.menu::-webkit-scrollbar-thumb,
  .sidebar nav.side-menu::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,var(--p,#6d4cff),var(--b,#29a8ff))!important;
    border-radius:999px!important;
  }

  .sidebar .sidebar-bottom{
    flex:0 0 auto!important;
    position:relative!important;
    bottom:auto!important;
    margin-top:12px!important;
    padding-top:12px!important;
    background:rgba(11,16,32,.96)!important;
    z-index:3!important;
  }

  .main{min-width:0!important; width:100%!important; padding:0!important; overflow:visible!important;}
  .main > .wrap,
  .main .wrap{
    max-width:none!important;
    width:100%!important;
    margin:0!important;
    padding:28px 28px 48px!important;
  }

  .nav{width:100%!important; max-width:none!important; margin-left:0!important; margin-right:0!important;}
  .card,.box{max-width:100%!important;}
}

/* Submenu: default tertutup, aktif terbuka. */
.sidebar .menu-section > .submenu{
  max-height:0!important;
  overflow:hidden!important;
  opacity:0!important;
  padding:0 7px!important;
  display:grid!important;
  gap:4px!important;
  transition:max-height .22s ease,opacity .18s ease,padding .18s ease!important;
}
.sidebar .menu-section.open > .submenu,
.sidebar .menu-section.has-active > .submenu{
  max-height:900px!important;
  opacity:1!important;
  padding:7px!important;
}
.sidebar .menu-section.open .menu-caret,
.sidebar .menu-section.has-active .menu-caret{
  transform:rotate(180deg)!important;
}
.sidebar .menu-head{cursor:pointer!important; user-select:none!important;}

@media (max-width: 900px){
  .layout{display:block!important; min-height:100vh!important;}
  .sidebar{
    position:relative!important;
    height:auto!important;
    min-height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    display:block!important;
    padding:18px!important;
  }
  .sidebar .menu,
  .sidebar .side-menu,
  .sidebar nav.menu,
  .sidebar nav.side-menu{
    max-height:none!important;
    overflow:visible!important;
    display:grid!important;
    gap:9px!important;
    padding-right:0!important;
    margin-right:0!important;
  }
  .sidebar .sidebar-bottom{margin-top:18px!important; position:relative!important;}
  .main{padding:0!important; width:100%!important; min-width:0!important;}
  .main > .wrap,
  .main .wrap{max-width:none!important; width:100%!important; margin:0!important; padding:18px 14px 32px!important;}
  .nav{display:grid!important; grid-template-columns:1fr!important; gap:12px!important; width:100%!important;}
  .brand-divider{display:none!important;}
  .nav-actions{justify-content:flex-start!important; width:100%!important;}
  .nav-actions .btn,.nav-actions button,.nav-actions a{flex:1 1 auto!important; min-width:max-content!important;}
  .grid,.formgrid,.withdraw-row{grid-template-columns:1fr!important;}
}