/* Nam Phuong ERP Stable 1.37.3
   Mobile readability and fixed navigation repair.
   - Removes hidden 680px table width that pushed values outside the viewport.
   - Keeps header, bottom navigation and slide menu anchored to the visual viewport.
   - Makes customer and transaction cards compact and readable on phones.
*/

@media (max-width:900px){
  html,
  body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
    overscroll-behavior-x:none;
  }

  body.np137-modern,
  body.np137-modern #appView,
  body.np137-modern #appView>main,
  body.np137-modern #content{
    min-width:0!important;
    max-width:100vw!important;
  }

  body.np137-modern #appView.app:not(.hidden){
    width:100vw!important;
    max-width:100vw!important;
  }

  body.np137-modern #appView.app>main{
    width:100vw!important;
    max-width:100vw!important;
  }

  body.np137-modern #appView.app>main>header{
    position:relative!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    max-width:100vw!important;
    min-width:0!important;
    transform:none!important;
  }

  body.np137-modern #content{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
    touch-action:pan-y;
  }

  body.np137-modern #content>*{
    min-width:0!important;
    max-width:100%!important;
  }

  /* The old rule .table-wrap table{min-width:680px} was still active on mobile. */
  body.np137-modern #content .table-wrap,
  body.np137-modern #content .table-wrap.np-mobile-card-wrap{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:visible!important;
  }

  body.np137-modern #content .table-wrap table,
  body.np137-modern #content .np-mobile-card-table{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    table-layout:fixed!important;
  }

  body.np137-modern #content .np-mobile-card-table thead,
  body.np137-modern #content .np-mobile-card-table tbody,
  body.np137-modern #content .np-mobile-card-table tr{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  body.np137-modern #content .np-mobile-card-table tbody{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
  }

  body.np137-modern #content .np-mobile-card-table tr{
    box-sizing:border-box!important;
    overflow:hidden!important;
  }

  body.np137-modern #content .np-mobile-card-table td{
    width:auto!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
  }

  body.np137-modern #content .np-mobile-card-table td:before{
    min-width:0!important;
  }

  body.np137-modern #content .np-mobile-card-table td>*{
    max-width:100%!important;
    min-width:0!important;
  }

  body.np137-modern #content .np-mobile-card-table td b,
  body.np137-modern #content .np-mobile-card-table td strong,
  body.np137-modern #content .np-mobile-card-table td span,
  body.np137-modern #content .np-mobile-card-table td small{
    overflow-wrap:anywhere;
  }

  body.np137-modern #content .np-mobile-card-table .np-alert-chip{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    justify-self:stretch!important;
    justify-content:flex-start!important;
    text-align:left!important;
  }

  body.np137-modern #content .np-mobile-card-table .np-sale-creator-cell{
    white-space:normal!important;
    max-width:100%!important;
  }

  body.np137-modern #content .np-mobile-empty-cell{
    display:none!important;
  }

  /* Bottom navigation is tied to the viewport, never to a wide table. */
  body.np137-modern .mobile-bottom-nav{
    position:fixed!important;
    left:8px!important;
    right:auto!important;
    bottom:7px!important;
    width:calc(100vw - 16px)!important;
    max-width:calc(100vw - 16px)!important;
    min-width:0!important;
    margin:0!important;
    transform:none!important;
    contain:layout paint;
    touch-action:manipulation;
  }

  body.np137-modern .mobile-bottom-nav button{
    min-width:0!important;
    max-width:none!important;
    overflow:hidden!important;
    touch-action:manipulation;
  }

  body.np137-modern .mobile-bottom-nav button>span:last-child{
    display:block;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  body.np137-modern #sidebar.sidebar{
    position:fixed!important;
    inset:0 auto 0 0!important;
    margin:0!important;
    transform:translate3d(-106%,0,0)!important;
    will-change:transform;
    touch-action:pan-y;
  }

  body.np137-modern.menu-open #sidebar.sidebar{
    transform:translate3d(0,0,0)!important;
  }

  body.np137-modern #mobileMenuBackdrop{
    position:fixed!important;
    inset:0!important;
  }

  /* Customer list: show the important identity first, then balances. */
  body.np137-modern #customerTable .np-mobile-card-table tr{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:5px 9px!important;
    padding:11px!important;
  }

  body.np137-modern #customerTable .np-mobile-card-table td{
    display:grid!important;
    grid-template-columns:82px minmax(0,1fr)!important;
    gap:7px!important;
    align-items:center!important;
    min-height:34px!important;
    padding:6px 0!important;
    border-bottom:1px dashed #e5eef2!important;
    text-align:left!important;
  }

  body.np137-modern #customerTable .np-mobile-card-table td:nth-child(1){
    grid-column:2!important;
    grid-row:1!important;
    display:block!important;
    padding:2px 0!important;
    border:0!important;
    color:#708796;
    font-size:11px;
    text-align:right!important;
    white-space:nowrap!important;
  }

  body.np137-modern #customerTable .np-mobile-card-table td:nth-child(1):before{
    content:'Mã ';display:inline!important;font-size:9px;
  }

  body.np137-modern #customerTable .np-mobile-card-table td:nth-child(2){
    grid-column:1!important;
    grid-row:1!important;
    display:block!important;
    padding:0!important;
    border:0!important;
    color:#153e55;
    font-size:16px;
    text-align:left!important;
  }

  body.np137-modern #customerTable .np-mobile-card-table td:nth-child(2):before{display:none!important}
  body.np137-modern #customerTable .np-mobile-card-table td:nth-child(n+3){grid-column:1/-1!important}
  body.np137-modern #customerTable .np-mobile-card-table td:last-child{border-bottom:0!important;padding-bottom:0!important}
  body.np137-modern #customerTable .np-mobile-card-table td:last-child button{width:100%!important;justify-self:stretch!important}

  /* Transactions: two-column financial summary without horizontal movement. */
  body.np137-modern #saleTable .np-mobile-card-table tr{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:0 9px!important;
    padding:11px!important;
  }

  body.np137-modern #saleTable .np-mobile-card-table td{
    display:block!important;
    min-height:0!important;
    padding:7px 0!important;
    border-bottom:1px dashed #e5eef2!important;
    text-align:left!important;
  }

  body.np137-modern #saleTable .np-mobile-card-table td:before{
    display:block!important;
    margin-bottom:3px;
    font-size:8.5px!important;
    text-align:left!important;
  }

  body.np137-modern #saleTable .np-mobile-card-table td:nth-child(1){grid-column:1!important;font-weight:800;color:#0a6f99}
  body.np137-modern #saleTable .np-mobile-card-table td:nth-child(4){grid-column:2!important;text-align:right!important}
  body.np137-modern #saleTable .np-mobile-card-table td:nth-child(4):before{text-align:right!important}
  body.np137-modern #saleTable .np-mobile-card-table td:nth-child(2),
  body.np137-modern #saleTable .np-mobile-card-table td:nth-child(3),
  body.np137-modern #saleTable .np-mobile-card-table td:nth-child(5),
  body.np137-modern #saleTable .np-mobile-card-table td:nth-child(8),
  body.np137-modern #saleTable .np-mobile-card-table td:nth-child(9){grid-column:1/-1!important}

  body.np137-modern #saleTable .np-mobile-card-table td:nth-child(2){font-size:15px;color:#153e55}
  body.np137-modern #saleTable .np-mobile-card-table td:nth-child(5){
    margin-top:2px;
    padding:9px 10px!important;
    border:1px solid #bae2ef!important;
    border-radius:11px;
    background:#effaff;
    color:#075f86;
    font-size:16px;
    font-weight:900;
  }
  body.np137-modern #saleTable .np-mobile-card-table td:nth-child(10){border-bottom:0!important}
  body.np137-modern #saleTable .np-mobile-card-table td:nth-child(11){border-bottom:0!important;text-align:right!important}
  body.np137-modern #saleTable .np-mobile-card-table td:nth-child(11) button{width:100%!important}

  /* Generic list pages remain compact and values stay inside each card. */
  body.np137-modern #debtTable .np-mobile-card-table td,
  body.np137-modern #bottleTable .np-mobile-card-table td,
  body.np137-modern #approvalTable .np-mobile-card-table td,
  body.np137-modern #productTable .np-mobile-card-table td{
    grid-template-columns:86px minmax(0,1fr)!important;
    text-align:left!important;
  }

  body.np137-modern #productTable .np-mobile-card-table td:first-child img{
    margin-left:auto;
  }
}

@media (max-width:390px){
  body.np137-modern .mobile-bottom-nav{
    left:5px!important;
    width:calc(100vw - 10px)!important;
    max-width:calc(100vw - 10px)!important;
  }
  body.np137-modern #customerTable .np-mobile-card-table td,
  body.np137-modern #debtTable .np-mobile-card-table td,
  body.np137-modern #bottleTable .np-mobile-card-table td,
  body.np137-modern #approvalTable .np-mobile-card-table td,
  body.np137-modern #productTable .np-mobile-card-table td{
    grid-template-columns:74px minmax(0,1fr)!important;
  }
}