/* NamPhuongERP 1.65.0 C4 — UI Layout Cleanup
   Scope: presentation only. No business/data/database logic.
   Goal: prevent table/card/modal overlap on desktop + mobile without changing global th/td rules. */

/* ---------- Shared safety for dynamic UI content ---------- */
body.np-ui-reference #content .table-wrap,
body.np-ui-reference #content .table-wrap > table,
body.np-ui-reference #content .table-wrap tr,
body.np-ui-reference #content .table-wrap td,
body.np-ui-reference #content .table-wrap td > *,
body.np-ui-reference #modalRoot .modal,
body.np-ui-reference #modalRoot .modal > *{
  min-width:0;
}

body.np-ui-reference #modalRoot .modal-head{
  gap:10px;
}
body.np-ui-reference #modalRoot .modal-head > div:first-child,
body.np-ui-reference #modalRoot .modal-head h3{
  min-width:0;
  max-width:100%;
}

/* ---------- Desktop/tablet landscape: complex transaction tables ---------- */
@media (min-width:901px){
  /* The 11-column sales table must scroll inside its wrapper rather than squeeze
     the sale code into the customer cell. */
  body.np-ui-reference #saleTable .np-finance-table{
    overflow:auto!important;
  }
  body.np-ui-reference #saleTable .np-finance-table table{
    min-width:1480px;
    table-layout:auto;
  }
  body.np-ui-reference #saleTable .np-finance-table th:nth-child(1),
  body.np-ui-reference #saleTable .np-finance-table td:nth-child(1){
    min-width:150px;
    width:150px;
    white-space:nowrap;
  }
  body.np-ui-reference #saleTable .np-finance-table th:nth-child(2),
  body.np-ui-reference #saleTable .np-finance-table td:nth-child(2){
    min-width:245px;
    width:270px;
    white-space:normal!important;
    vertical-align:middle;
  }
  body.np-ui-reference #saleTable .np-finance-table td:nth-child(2)>b,
  body.np-ui-reference #saleTable .np-finance-table td:nth-child(2)>small{
    display:block;
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:normal;
  }
  body.np-ui-reference #saleTable .np-finance-table td:nth-child(2)>b{
    line-height:1.3;
  }
  body.np-ui-reference #saleTable .np-finance-table td:nth-child(2)>small{
    margin-top:3px;
    line-height:1.35;
  }
  body.np-ui-reference #saleTable .np-finance-table .np1483-row-vehicle{
    max-width:100%;
    margin-top:5px!important;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  body.np-ui-reference #saleTable .np-finance-table th:nth-child(3),
  body.np-ui-reference #saleTable .np-finance-table td:nth-child(3){min-width:105px}
  body.np-ui-reference #saleTable .np-finance-table th:nth-child(4),
  body.np-ui-reference #saleTable .np-finance-table td:nth-child(4){min-width:105px}
  body.np-ui-reference #saleTable .np-finance-table th:nth-child(5),
  body.np-ui-reference #saleTable .np-finance-table td:nth-child(5){min-width:115px}
  body.np-ui-reference #saleTable .np-finance-table th:nth-child(6),
  body.np-ui-reference #saleTable .np-finance-table td:nth-child(6),
  body.np-ui-reference #saleTable .np-finance-table th:nth-child(7),
  body.np-ui-reference #saleTable .np-finance-table td:nth-child(7){min-width:95px}
  body.np-ui-reference #saleTable .np-finance-table th:nth-child(8),
  body.np-ui-reference #saleTable .np-finance-table td:nth-child(8){min-width:125px}
  body.np-ui-reference #saleTable .np-finance-table th:nth-child(9),
  body.np-ui-reference #saleTable .np-finance-table td:nth-child(9){min-width:125px}
  body.np-ui-reference #saleTable .np-finance-table th:nth-child(10),
  body.np-ui-reference #saleTable .np-finance-table td:nth-child(10){min-width:95px}
  body.np-ui-reference #saleTable .np-finance-table th:nth-child(11),
  body.np-ui-reference #saleTable .np-finance-table td:nth-child(11){min-width:90px}

  /* Other data tables with dynamic names/routes: wrap only the text-bearing cells. */
  body.np-ui-reference #approvalTable .approval-table{min-width:900px}
  body.np-ui-reference #approvalTable .approval-table th:nth-child(2),
  body.np-ui-reference #approvalTable .approval-table td:nth-child(2),
  body.np-ui-reference #debtTable table th:nth-child(2),
  body.np-ui-reference #debtTable table td:nth-child(2),
  body.np-ui-reference #bottleTable table th:nth-child(2),
  body.np-ui-reference #bottleTable table td:nth-child(2){
    min-width:220px;
    white-space:normal!important;
  }
  body.np-ui-reference #customerTable table th:nth-child(2),
  body.np-ui-reference #customerTable table td:nth-child(2),
  body.np-ui-reference #customerTable table th:nth-child(4),
  body.np-ui-reference #customerTable table td:nth-child(4){
    min-width:170px;
    white-space:normal!important;
    overflow-wrap:anywhere;
  }
  body.np-ui-reference #approvalTable td:nth-child(2)>b,
  body.np-ui-reference #approvalTable td:nth-child(2)>small,
  body.np-ui-reference #debtTable td:nth-child(2)>b,
  body.np-ui-reference #debtTable td:nth-child(2)>small,
  body.np-ui-reference #bottleTable td:nth-child(2)>b,
  body.np-ui-reference #bottleTable td:nth-child(2)>small{
    display:block;
    max-width:100%;
    overflow-wrap:anywhere;
  }
  body.np-ui-reference #approvalTable .np13719-row-vehicle{
    display:inline-flex!important;
    max-width:100%;
    margin-top:5px!important;
    white-space:normal!important;
  }
}

/* ---------- Mobile/tablet portrait: card-table containment ---------- */
@media (max-width:900px){
  body.np-ui-reference #content .np-mobile-card-table td{
    min-width:0!important;
    height:auto!important;
    white-space:normal!important;
    overflow:visible;
  }
  body.np-ui-reference #content .np-mobile-card-table td > *{
    min-width:0;
    max-width:100%;
  }
  body.np-ui-reference #content .np-mobile-card-table td b,
  body.np-ui-reference #content .np-mobile-card-table td small{
    white-space:normal!important;
    overflow-wrap:anywhere;
    word-break:normal;
  }
  body.np-ui-reference #content .np-mobile-card-table td button{
    max-width:100%;
    min-width:0;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  body.np-ui-reference #content .np-mobile-card-table .np-alert-chip,
  body.np-ui-reference #content .np-mobile-card-table .approval-state,
  body.np-ui-reference #content .np-mobile-card-table .pill,
  body.np-ui-reference #content .np-mobile-card-table .np1483-row-vehicle,
  body.np-ui-reference #content .np-mobile-card-table .np13719-row-vehicle{
    max-width:100%;
    min-width:0;
  }
  body.np-ui-reference #content .np-mobile-card-table .np-alert-chip small,
  body.np-ui-reference #content .np-mobile-card-table .np-alert-chip strong{
    white-space:normal!important;
    overflow-wrap:anywhere;
  }
  body.np-ui-reference #content .np-mobile-card-table .np1483-row-vehicle,
  body.np-ui-reference #content .np-mobile-card-table .np13719-row-vehicle{
    justify-self:end;
    white-space:normal!important;
    line-height:1.3;
  }

  /* Grid/flex children with dynamic text must be allowed to shrink. */
  body.np-ui-reference #content .route-customer-card > *,
  body.np-ui-reference #content .route-board > *,
  body.np-ui-reference #content .np-review-customer > *,
  body.np-ui-reference #content .np-review-item > *,
  body.np-ui-reference #modalRoot .form-grid > *,
  body.np-ui-reference #modalRoot .grid-2 > *,
  body.np-ui-reference #modalRoot .np1484-round-card > *,
  body.np-ui-reference #modalRoot .np1484-order-list article > *{
    min-width:0;
  }
  body.np-ui-reference #modalRoot .np1484-round-card > header > div,
  body.np-ui-reference #modalRoot .np1484-order-list article header > div,
  body.np-ui-reference #modalRoot .np1483-sale-vehicle > div{
    min-width:0;
  }
  body.np-ui-reference #modalRoot .np1484-round-card header b,
  body.np-ui-reference #modalRoot .np1484-round-card header small,
  body.np-ui-reference #modalRoot .np1484-order-list article header b,
  body.np-ui-reference #modalRoot .np1484-order-list article header small,
  body.np-ui-reference #modalRoot .np1483-sale-vehicle b,
  body.np-ui-reference #modalRoot .np1483-sale-vehicle span{
    overflow-wrap:anywhere;
  }
}

@media (max-width:430px){
  body.np-ui-reference #content .np-mobile-card-table td{
    grid-template-columns:minmax(78px,31%) minmax(0,1fr)!important;
    column-gap:8px;
  }
  body.np-ui-reference #content .np-mobile-card-table td:before{
    overflow-wrap:anywhere;
  }
  body.np-ui-reference #modalRoot .modal{
    max-width:100vw;
  }
}