/* V609 - Mobile Create Order UX
   Scoped only to CreateOrderDialog on phones <= 639px. */
@media (max-width:639px){
  .order-dialog-content{
    background:#f4f7f9!important;
    color:#172033!important;
    gap:0!important;
    padding-bottom:calc(88px + env(safe-area-inset-bottom))!important;
    overscroll-behavior-y:contain!important;
    scroll-behavior:smooth!important;
  }

  /* Compact title bar */
  .order-dialog-header{
    background:#fff!important;
    padding:13px 48px 11px 14px!important;
    border-bottom:1px solid #e7ebf0!important;
    min-height:49px!important;
  }
  .order-dialog-header [data-slot="dialog-title"]{
    font-size:18px!important;
    line-height:24px!important;
    font-weight:800!important;
    letter-spacing:-.015em!important;
  }

  /* 3-step workflow */
  .order-mobile-workflow{
    top:0!important;
    z-index:35!important;
    padding:8px 10px 9px!important;
    background:rgba(255,255,255,.98)!important;
    border-bottom:1px solid #dfe5eb!important;
    box-shadow:0 5px 14px rgba(15,23,42,.07)!important;
    backdrop-filter:blur(12px)!important;
  }
  .order-mobile-workflow>div:first-child{
    margin-bottom:7px!important;
  }
  .order-mobile-workflow>div:first-child button{
    height:36px!important;
    min-width:92px!important;
    border-radius:9px!important;
    font-size:12px!important;
    padding:0 11px!important;
    background:#fff!important;
  }
  .order-mobile-workflow>div:first-child span:last-child{
    font-size:10.5px!important;
    padding:5px 9px!important;
    background:#f1f5f9!important;
    color:#475569!important;
  }
  .order-mobile-workflow>div:last-child{
    gap:3px!important;
    padding:4px!important;
    border-radius:12px!important;
    background:#eef2f6!important;
  }
  .order-mobile-workflow>div:last-child button{
    min-height:42px!important;
    border-radius:9px!important;
    padding:5px 3px!important;
    font-size:11.5px!important;
    line-height:14px!important;
  }
  .order-mobile-workflow>div:last-child button.bg-background{
    background:#fff!important;
    color:#0f5132!important;
    box-shadow:0 2px 6px rgba(15,23,42,.08)!important;
  }
  .order-mobile-workflow>div:last-child button span:first-child{
    width:21px!important;
    height:21px!important;
    font-size:10px!important;
    font-weight:800!important;
  }

  /* Each workflow section is a clean card */
  .order-dialog-body,
  .v306-order-products-section,
  .v306-order-summary-section{
    margin:12px 10px 0!important;
    padding:14px!important;
    border:1px solid #e1e7ed!important;
    border-radius:14px!important;
    background:#fff!important;
    box-shadow:0 2px 10px rgba(15,23,42,.035)!important;
  }
  .order-dialog-body{
    gap:14px!important;
    padding-bottom:14px!important;
  }
  .order-dialog-body .ledger-cell,
  .v306-order-products-section .ledger-cell,
  .v306-order-summary-section .ledger-cell{
    border-radius:11px!important;
  }

  /* Readability and touch targets */
  .order-dialog-content label,
  .order-dialog-content [data-slot="label"]{
    font-size:13px!important;
    line-height:18px!important;
    font-weight:700!important;
    color:#344054!important;
  }
  .order-dialog-content input:not([type="checkbox"]):not([type="radio"]),
  .order-dialog-content select,
  .order-dialog-content textarea,
  .order-dialog-content [data-slot="select-trigger"]{
    min-height:44px!important;
    height:44px!important;
    border-radius:10px!important;
    border-color:#d7dee6!important;
    background:#fff!important;
    font-size:16px!important; /* avoids iOS zoom */
    line-height:20px!important;
    padding-left:12px!important;
    padding-right:12px!important;
    box-shadow:0 1px 2px rgba(15,23,42,.02)!important;
  }
  .order-dialog-content input:focus,
  .order-dialog-content select:focus,
  .order-dialog-content textarea:focus,
  .order-dialog-content [data-slot="select-trigger"]:focus{
    border-color:#198754!important;
    box-shadow:0 0 0 3px rgba(25,135,84,.10)!important;
    outline:none!important;
  }
  .order-dialog-content p.text-muted-foreground{
    font-size:11.5px!important;
    line-height:17px!important;
    color:#718096!important;
  }

  /* Customer step */
  .v609-customer-mobile-next{
    margin:12px 10px 0!important;
  }
  .v609-customer-mobile-next button{
    min-height:48px!important;
    border-radius:11px!important;
    font-size:13.5px!important;
    font-weight:800!important;
    box-shadow:0 5px 12px rgba(25,135,84,.16)!important;
  }

  /* Product step */
  .v305-order-products-toolbar{
    align-items:stretch!important;
    gap:8px!important;
    margin-bottom:11px!important;
  }
  .v305-order-products-toolbar>label{
    width:100%!important;
    font-size:14px!important;
  }
  .v305-order-products-toolbar>div{
    width:100%!important;
    justify-content:stretch!important;
  }
  .v305-order-products-toolbar button{
    min-height:42px!important;
    flex:1 1 auto!important;
    border-radius:9px!important;
    font-size:12.5px!important;
  }
  .v305-order-product-search-popover{
    width:calc(100vw - 20px)!important;
    max-width:none!important;
  }

  /* Product line items: stronger visual separation */
  .v306-order-products-section [class*="border-border"][class*="p-3"],
  .v306-order-products-section [class*="border-border"][class*="p-2"]{
    border-radius:12px!important;
    border-color:#e0e6ec!important;
    background:#fbfcfd!important;
  }
  .v306-order-products-section button[aria-label="Xóa dòng"]{
    min-height:42px!important;
    border:1px solid #fecaca!important;
    border-radius:9px!important;
    background:#fff5f5!important;
    font-weight:700!important;
  }
  .v609-products-mobile-actions{
    gap:8px!important;
    margin-top:14px!important;
  }
  .v609-products-mobile-actions button{
    min-height:46px!important;
    border-radius:10px!important;
    font-size:13px!important;
    font-weight:800!important;
  }

  /* Summary: dates + payment become compact cards */
  .v306-order-summary-section>div:first-child{
    gap:10px!important;
  }
  .v306-order-summary-section>div:first-child>div{
    padding:11px!important;
    border:1px solid #e5eaf0!important;
    border-radius:11px!important;
    background:#fbfcfd!important;
  }
  .v306-order-summary-section .stat-figure{
    font-size:22px!important;
    line-height:28px!important;
    max-width:58%!important;
  }

  /* VAT request becomes thumb-friendly */
  .v306-order-summary-section input[type="checkbox"]{
    width:20px!important;
    height:20px!important;
    margin-top:1px!important;
  }

  /* Remove duplicate Create button inside summary; keep the sticky footer only. */
  .v609-summary-mobile-actions{
    display:none!important;
  }

  /* Authoritative bottom action bar */
  .v609-order-footer{
    position:sticky!important;
    bottom:0!important;
    z-index:40!important;
    margin:14px -14px -14px!important;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom))!important;
    border-top:1px solid #dde4ea!important;
    background:rgba(255,255,255,.98)!important;
    box-shadow:0 -6px 18px rgba(15,23,42,.08)!important;
    backdrop-filter:blur(10px)!important;
  }
  .v609-order-footer>p{
    display:none!important;
  }
  .v609-order-footer [data-slot="dialog-footer"]{
    display:grid!important;
    grid-template-columns:34% 66%!important;
    gap:8px!important;
    width:100%!important;
  }
  .v609-order-footer [data-slot="dialog-footer"]>button{
    width:100%!important;
    min-height:48px!important;
    height:48px!important;
    border-radius:11px!important;
    font-size:13.5px!important;
    font-weight:800!important;
  }
  .v609-order-footer [data-slot="dialog-footer"]>button:last-child{
    box-shadow:0 5px 12px rgba(217,119,6,.18)!important;
  }

  /* Keep dialogs opened from Create Order usable on small screens */
  .order-dialog-content [role="dialog"]{
    max-width:calc(100vw - 16px)!important;
  }
}

/* Extra narrow phones */
@media (max-width:380px){
  .order-dialog-body,
  .v306-order-products-section,
  .v306-order-summary-section{
    margin-left:7px!important;
    margin-right:7px!important;
    padding:12px!important;
  }
  .order-mobile-workflow{
    padding-left:7px!important;
    padding-right:7px!important;
  }
  .order-mobile-workflow>div:last-child button{
    font-size:10.5px!important;
  }
  .v609-order-footer [data-slot="dialog-footer"]{
    grid-template-columns:31% 69%!important;
  }
}