/* ===========================================================================
   NamPhuongERP 1.62.0 — Mobile Sale Compact
   Route-sale only. Desktop remains unchanged.
   Goal: one-screen daily sale flow, flat rows, minimal framing, existing core logic.
   =========================================================================== */

@media (max-width:900px){
  /* Overall density */
  html.np-ui-reference body.np162-mobile-sale-compact #content{
    padding-left:6px!important;
    padding-right:6px!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np-sale-wizard-shell{
    width:100%!important;
    max-width:none!important;
  }

  /* One route/customer context only; customer is the visual focus. */
  html.np-ui-reference body.np162-mobile-sale-compact .np1480-sale-context{
    display:grid!important;
    grid-template-columns:36px minmax(0,1fr)!important;
    align-items:center!important;
    gap:5px 8px!important;
    margin:0 0 5px!important;
    padding:6px 7px!important;
    border-radius:10px!important;
    box-shadow:none!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np1480-sale-context>button{
    grid-row:1/3!important;
    width:36px!important;
    min-width:36px!important;
    height:36px!important;
    min-height:36px!important;
    padding:0!important;
    overflow:hidden!important;
    color:transparent!important;
    font-size:0!important;
    border-radius:9px!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np1480-sale-context>button::before{
    content:'‹';
    color:var(--npui-text)!important;
    font-size:26px!important;
    line-height:1!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np1480-sale-context>div:not(.np158-context-metrics){
    min-width:0!important;
    display:grid!important;
    gap:0!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np1480-sale-context small{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:8.5px!important;
    color:var(--npui-text-3)!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np1480-sale-context b{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:14px!important;
    line-height:1.2!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np1480-sale-context>div:not(.np158-context-metrics)>span{display:none!important}
  html.np-ui-reference body.np162-mobile-sale-compact .np158-context-metrics{
    grid-column:2!important;
    gap:4px!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np158-context-metrics>span{
    min-height:19px!important;
    padding:2px 6px!important;
    font-size:8.5px!important;
  }

  /* Flatten step/card structure on the daily product screen. */
  html.np-ui-reference body.np162-mobile-sale-compact .np-sale-step[data-step="2"]>.np-step-card,
  html.np-ui-reference body.np162-mobile-sale-compact .np-sale-step[data-step="3"]>.np-step-card{
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np-sale-step[data-step="2"]>.np-step-card>.np-step-copy,
  html.np-ui-reference body.np162-mobile-sale-compact .np-sale-step[data-step="2"]>.np-step-card>.np-step-icon{
    display:none!important;
  }

  /* Quick products and customer habits remain available but no longer dominate. */
  html.np-ui-reference body.np162-mobile-sale-compact .np160-habits{margin:0 0 5px!important}
  html.np-ui-reference body.np162-mobile-sale-compact .np160-head{display:none!important}
  html.np-ui-reference body.np162-mobile-sale-compact .np160-row{
    display:flex!important;
    flex-direction:row!important;
    gap:5px!important;
    overflow-x:auto!important;
    scrollbar-width:none;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np160-row::-webkit-scrollbar{display:none}
  html.np-ui-reference body.np162-mobile-sale-compact .np160-chip{
    flex:0 0 auto!important;
    width:auto!important;
    max-width:175px!important;
    min-height:32px!important;
    padding:5px 8px!important;
    border-left-width:2px!important;
    border-radius:8px!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np160-chip b{font-size:11.5px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:155px}
  html.np-ui-reference body.np162-mobile-sale-compact .np160-chip small{font-size:8.5px!important}

  html.np-ui-reference body.np162-mobile-sale-compact .np-quick-products{
    margin:0 0 5px!important;
    border:0!important;
    border-radius:9px!important;
    background:var(--npui-surface-2)!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np-quick-products>summary{
    min-height:32px!important;
    padding:5px 8px!important;
    font-size:10.5px!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np-quick-products>summary small{font-size:8.5px!important}
  html.np-ui-reference body.np162-mobile-sale-compact .np-product-shortcuts{
    grid-auto-columns:minmax(116px,140px)!important;
    gap:5px!important;
    margin:0!important;
    padding:5px!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np-product-shortcuts button{
    min-height:36px!important;
    padding:4px 7px!important;
    border-radius:8px!important;
    font-size:10.5px!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np1372-product-shortcut img{display:none!important}
  html.np-ui-reference body.np162-mobile-sale-compact .np1372-product-shortcut{grid-template-columns:minmax(0,1fr)!important}

  /* Product list = flat compact rows. */
  html.np-ui-reference body.np162-mobile-sale-compact .np-sale-items{
    display:grid!important;
    gap:0!important;
    border-top:1px solid var(--npui-border)!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np-mobile-sale-wizard .item-row{
    display:grid!important;
    grid-template-columns:minmax(118px,1.35fr) minmax(66px,.68fr) minmax(86px,.82fr) 28px!important;
    gap:4px 6px!important;
    align-items:end!important;
    margin:0!important;
    padding:7px 1px!important;
    border:0!important;
    border-bottom:1px solid var(--npui-border)!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np-mobile-sale-wizard .item-row>label{
    min-width:0!important;
    margin:0!important;
    gap:2px!important;
    font-size:0!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np-mobile-sale-wizard .item-row>label:first-of-type{
    grid-column:1/-1!important;
    display:block!important;
    position:relative!important;
    padding-right:0!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np1372-product-thumb.small{display:none!important}
  html.np-ui-reference body.np162-mobile-sale-compact .item-product{
    width:100%!important;
    height:34px!important;
    min-height:34px!important;
    padding:3px 28px 3px 2px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:var(--npui-text)!important;
    font-size:14px!important;
    font-weight:800!important;
    box-shadow:none!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .item-row>label:nth-child(2){grid-column:1!important}
  html.np-ui-reference body.np162-mobile-sale-compact .item-row>label:nth-child(3){grid-column:2!important}
  html.np-ui-reference body.np162-mobile-sale-compact .item-row>label:nth-child(4){grid-column:3!important}
  html.np-ui-reference body.np162-mobile-sale-compact .item-row>.danger{
    grid-column:4!important;
    width:28px!important;
    min-width:28px!important;
    height:34px!important;
    min-height:34px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    font-size:16px!important;
  }

  /* Quantity is primary; direct number input still opens numeric keyboard. */
  html.np-ui-reference body.np162-mobile-sale-compact .qty-control{
    width:100%!important;
    grid-template-columns:34px minmax(38px,1fr) 34px!important;
    border-radius:8px!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .qty-control button,
  html.np-ui-reference body.np162-mobile-sale-compact .qty-control input{
    height:34px!important;
    min-height:34px!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .qty-control button{font-size:18px!important}
  html.np-ui-reference body.np162-mobile-sale-compact .qty-control input{font-size:15px!important}
  /* 5/10/20 were useful experimentally, but the selected mock-up is cleaner and
     the core numeric input is directly tappable. Keep chips in DOM, hide only here. */
  html.np-ui-reference body.np162-mobile-sale-compact .np159-chips{display:none!important}

  /* Price remains editable, total remains visible, but both read as secondary info. */
  html.np-ui-reference body.np162-mobile-sale-compact .item-row>label:nth-child(3)::before{
    content:'Giá';display:block;margin-bottom:2px;color:var(--npui-text-3);font-size:8px;font-weight:800
  }
  html.np-ui-reference body.np162-mobile-sale-compact .item-row>label:nth-child(4)::before{
    content:'Thành tiền';display:block;margin-bottom:2px;color:var(--npui-text-3);font-size:8px;font-weight:800
  }
  html.np-ui-reference body.np162-mobile-sale-compact .item-price,
  html.np-ui-reference body.np162-mobile-sale-compact .item-total{
    height:34px!important;
    min-height:34px!important;
    padding:4px 5px!important;
    border:0!important;
    border-radius:7px!important;
    background:var(--npui-surface-2)!important;
    font-size:11.5px!important;
    font-weight:800!important;
    box-shadow:none!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .item-total{color:var(--npui-text)!important}
  html.np-ui-reference body.np162-mobile-sale-compact .add-product-row{
    width:100%!important;
    min-height:32px!important;
    height:32px!important;
    margin:5px 0!important;
    padding:4px 8px!important;
    border:1px dashed var(--npui-border-strong)!important;
    border-radius:8px!important;
    background:transparent!important;
    font-size:10.5px!important;
  }

  /* Bottle return becomes a compact operational strip, not another large card. */
  html.np-ui-reference body.np162-mobile-sale-compact .np-delivery-payment-card{
    margin:2px 0 0!important;
    padding:7px 1px!important;
    border:0!important;
    border-top:1px solid var(--npui-border)!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np-delivery-payment-card .np-step-copy{
    display:block!important;
    margin:0 0 4px!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np-delivery-payment-card .np-step-copy b{
    font-size:11.5px!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np-delivery-payment-card .np-step-copy span{display:none!important}
  html.np-ui-reference body.np162-mobile-sale-compact .np-delivery-payment-card .mobile-two-fields{
    grid-template-columns:1fr 1fr!important;
    gap:6px!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np-delivery-payment-card label{
    margin:0!important;
    gap:2px!important;
    font-size:8.5px!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np-delivery-payment-card input{
    height:36px!important;
    min-height:36px!important;
    padding:5px 8px!important;
    border-radius:8px!important;
    font-size:14px!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .bottle-auto-help{display:none!important}
  html.np-ui-reference body.np162-mobile-sale-compact .bottle-auto-button{
    min-height:24px!important;
    height:24px!important;
    margin-top:2px!important;
    padding:2px 6px!important;
    font-size:8.5px!important;
  }

  /* Exactly one compact advanced-options door. */
  html.np-ui-reference body.np162-mobile-sale-compact .np158-more-options{
    margin:4px 0 0!important;
    border:1px solid var(--npui-border)!important;
    border-radius:8px!important;
    background:transparent!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np158-more-options>summary{
    min-height:32px!important;
    padding:5px 8px!important;
    font-size:10.5px!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np158-more-options>summary small{font-size:8px!important}
  html.np-ui-reference body.np162-mobile-sale-compact .np161-grid-body{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:5px!important;
    padding:5px 0!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np161-grid-body button{
    min-height:54px!important;
    padding:5px 2px!important;
    gap:3px!important;
    border-radius:8px!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np161-grid-body button i{font-size:17px!important}
  html.np-ui-reference body.np162-mobile-sale-compact .np161-grid-body button span{font-size:8.5px!important}

  /* Payment screen: same logic, half the visual noise. */
  html.np-ui-reference body.np162-mobile-sale-compact .np-payment-card>.np-step-copy,
  html.np-ui-reference body.np162-mobile-sale-compact .np-payment-card>.np-step-icon{display:none!important}
  html.np-ui-reference body.np162-mobile-sale-compact .np-payment-card{
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np158-payment-hero{
    margin:0 0 6px!important;
    padding:7px 8px!important;
    border-radius:9px!important;
    grid-template-columns:92px minmax(0,1fr)!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np158-payment-hero strong{font-size:17px!important}
  html.np-ui-reference body.np162-mobile-sale-compact .np158-payment-hero small{font-size:8px!important}
  html.np-ui-reference body.np162-mobile-sale-compact .np158-payment-hero span{font-size:9px!important}
  html.np-ui-reference body.np162-mobile-sale-compact .np-payment-presets{
    gap:4px!important;
    margin:0 0 6px!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np-payment-presets button{
    min-height:36px!important;
    height:36px!important;
    padding:4px!important;
    border-radius:8px!important;
    font-size:10px!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np-payment-card>.mobile-two-fields{
    grid-template-columns:1fr 1fr!important;
    gap:6px!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np-payment-card>.mobile-two-fields label{
    margin:0!important;
    gap:2px!important;
    font-size:9px!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np-payment-card input{
    height:38px!important;
    min-height:38px!important;
    padding:5px 8px!important;
    border-radius:8px!important;
    font-size:14px!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np-old-debt-box{
    margin:6px 0!important;
    border-radius:8px!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np-old-debt-box summary{
    min-height:32px!important;
    padding:6px 8px!important;
    font-size:10px!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np159-breakdown{
    margin:6px 0!important;
    padding:7px 8px!important;
    border-radius:8px!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np159-row{padding:2px 0!important;font-size:10.5px!important}
  html.np-ui-reference body.np162-mobile-sale-compact .np159-row.main{font-size:11.5px!important}
  html.np-ui-reference body.np162-mobile-sale-compact .np159-verdict{margin-top:5px!important;padding:5px 7px!important;font-size:10.5px!important}
  html.np-ui-reference body.np162-mobile-sale-compact .np-payment-breakdown{margin-top:5px!important}
  html.np-ui-reference body.np162-mobile-sale-compact .np-payment-breakdown>summary{min-height:30px!important;padding:5px 7px!important;font-size:9.5px!important}

  /* Bottom action bar: less height, still large enough for one-thumb operation. */
  html.np-ui-reference body.np162-mobile-sale-compact .mobile-sale-bar{
    min-height:56px!important;
    padding-top:5px!important;
    padding-bottom:max(5px,env(safe-area-inset-bottom))!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .mobile-sale-bar small{font-size:8px!important}
  html.np-ui-reference body.np162-mobile-sale-compact .mobile-sale-bar strong{font-size:15px!important}
  html.np-ui-reference body.np162-mobile-sale-compact .mobile-sale-bar #mobileSaveSaleBtn{
    height:42px!important;
    min-height:42px!important;
    border-radius:9px!important;
    font-size:12px!important;
  }
}

@media (max-width:370px){
  html.np-ui-reference body.np162-mobile-sale-compact .np-mobile-sale-wizard .item-row{
    grid-template-columns:minmax(112px,1.25fr) 62px 78px 26px!important;
    gap:3px 4px!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .qty-control{grid-template-columns:31px minmax(34px,1fr) 31px!important}
  html.np-ui-reference body.np162-mobile-sale-compact .np161-grid-body{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}