/* V290
   Lên đơn hàng mới + Sửa đơn hàng dùng chung CreateOrderDialog.
   Dưới 1100px: ép toàn bộ về giao diện mobile hiện có.
   Từ 1100px: giữ nguyên desktop của hệ thống. */

@media (max-width:1099px){

  /* Modal full screen như mobile */
  .order-dialog-content{
    width:100vw!important;
    max-width:100vw!important;
    height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    padding:0 0 max(1.5rem,env(safe-area-inset-bottom))!important;
    border:0!important;
    border-radius:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:contain!important;
  }

  /* Header dùng kiểu mobile */
  .order-dialog-content .order-dialog-header{
    position:relative!important;
    width:100%!important;
    min-width:0!important;
    padding:16px 48px 12px 16px!important;
    border-bottom:1px solid var(--border)!important;
  }

  /* Workflow 3 bước phải xuất hiện dưới 1100px */
  .order-dialog-content .order-mobile-workflow{
    display:block!important;
    position:sticky!important;
    top:0!important;
    z-index:20!important;
    width:100%!important;
  }

  /* Nội dung chính luôn 1 cột */
  .order-dialog-content .order-dialog-body{
    width:auto!important;
    min-width:0!important;
    margin:20px 16px 0!important;
    padding-bottom:32px!important;
    grid-template-columns:minmax(0,1fr)!important;
    column-gap:0!important;
    row-gap:18px!important;
  }

  /* Những section có hidden dành cho mobile không được sm:grid bật lại */
  .order-dialog-content .order-dialog-body.hidden{
    display:none!important;
  }

  /* Desktop-only utility controls giữ ẩn trong mobile */
  .order-dialog-content .sm\:inline-flex{
    display:none!important;
  }

  /* Các grid con 2/3/4 cột của form chuyển 1 cột */
  .order-dialog-content [class*="grid-cols-2"],
  .order-dialog-content [class*="grid-cols-3"],
  .order-dialog-content [class*="grid-cols-4"],
  .order-dialog-content [class*="grid-cols-5"]{
    grid-template-columns:minmax(0,1fr)!important;
  }

  /* Riêng thanh workflow 3 bước vẫn giữ 3 cột */
  .order-dialog-content .order-mobile-workflow [class*="grid-cols-3"]{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  /* Field full-width */
  .order-dialog-content input,
  .order-dialog-content textarea,
  .order-dialog-content select,
  .order-dialog-content [data-slot="select-trigger"]{
    max-width:100%!important;
    min-width:0!important;
  }

  /* Hủy các chiều rộng desktop cố định thường gặp */
  .order-dialog-content .sm\:w-24,
  .order-dialog-content .sm\:w-44,
  .order-dialog-content .sm\:w-72,
  .order-dialog-content .sm\:w-80{
    width:100%!important;
  }

  /* Product rows / action rows không tràn ngang */
  .order-dialog-content [class*="overflow-x-auto"]{
    max-width:100%!important;
    overflow-x:auto!important;
  }

  .order-dialog-content button{
    max-width:100%;
  }

  .order-dialog-content table{
    max-width:100%!important;
  }
}

/* Điện thoại nhỏ */
@media (max-width:560px){
  .order-dialog-content .order-dialog-body{
    margin-left:12px!important;
    margin-right:12px!important;
  }
  .order-dialog-content .order-dialog-header{
    padding-left:12px!important;
  }
}