/* Nam Phuong ERP Stable 1.36.1
   Detail hierarchy and approval review mobile reliability. */

/* ===== Shared detail hierarchy ===== */
.np-detail-view .np-detail-meta-legacy{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:12px 0;
  padding:12px;
  border:1px solid #d6e7ef;
  border-radius:13px;
  background:#f7fbfd;
  line-height:1.55;
}
.np-detail-view .np-detail-meta-legacy b{color:#0e496b;font-weight:900}
.np-detail-view .np-detail-table tbody td:first-child{font-weight:850;color:#123f5b}
.np-detail-view .np-detail-table tbody td:nth-child(2){font-weight:900;color:#0d668f}
.np-detail-view .np-detail-value{font-weight:900;color:#143f58}

/* ===== Approval detail ===== */
.np-approval-modal{
  display:flex;
  flex-direction:column;
  overflow:hidden!important;
  min-height:0;
}
.np-approval-head{flex:0 0 auto}
.np-approval-head>div{min-width:0}
.np-approval-head h3{margin:0}
.np-approval-head .muted{display:block;margin-top:3px;font-size:12px}
.np-approval-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:0 3px 14px;
  scroll-behavior:smooth;
}
.np-approval-modal .approval-detail-state{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  margin:0 0 10px;
  padding:10px 13px;
  border-width:1px;
  border-radius:12px;
  font-size:14px;
}
.np-approval-modal .approval-detail-state span{font-size:17px}
.np-approval-customer{
  display:grid;
  grid-template-columns:minmax(260px,1.15fr) minmax(320px,.85fr);
  gap:12px;
  padding:15px;
  border:1px solid #cfe4ed;
  border-left:5px solid #0a85b9;
  border-radius:15px;
  background:linear-gradient(135deg,#eefaff,#fff 68%);
  box-shadow:0 5px 16px rgba(20,93,125,.07);
}
.np-approval-customer small,.np-approval-section-title small,.np-approval-product small,.np-approval-summary-grid small{
  display:block;
  color:#698294;
  font-size:10px;
  font-weight:850;
  letter-spacing:.055em;
}
.np-approval-customer>div>strong{
  display:block;
  margin-top:4px;
  color:#0b3f5e;
  font-size:24px;
  line-height:1.2;
  overflow-wrap:anywhere;
}
.np-approval-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.np-approval-meta span{padding:10px;border:1px solid #dbe9ef;border-radius:11px;background:rgba(255,255,255,.82)}
.np-approval-meta b{display:block;margin-top:4px;color:#173f59;font-size:14px;overflow-wrap:anywhere}
.np-approval-section{margin-top:12px}
.np-approval-section-title{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:7px;padding:0 2px}
.np-approval-section-title h4{margin:2px 0 0;color:#143e56;font-size:16px}
.np-approval-section-title>span{padding:5px 9px;border-radius:999px;background:#e8f5fb;color:#0b6d9c;font-size:12px;font-weight:850}
.np-approval-products{display:grid;gap:7px}
.np-approval-product{
  display:grid;
  grid-template-columns:34px minmax(220px,1.7fr) minmax(90px,.45fr) minmax(120px,.65fr) minmax(135px,.7fr);
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border:1px solid #dbe7ec;
  border-radius:12px;
  background:#fff;
}
.np-approval-product:nth-child(even){background:#f8fbfd}
.np-approval-product-index{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:#e8f5fb;color:#0b6d9c;font-weight:900}
.np-approval-product strong{display:block;margin-top:3px;color:#143e56;font-size:14px;line-height:1.25;overflow-wrap:anywhere}
.np-approval-product-name strong{font-size:16px;color:#0b4161}
.np-approval-product-name span{display:block;margin-top:2px;color:#718593;font-size:11px}
.np-approval-product-qty strong{display:inline-grid;place-items:center;min-width:44px;min-height:34px;padding:5px 10px;border-radius:10px;background:#eaf7fd;color:#0875a6;font-size:20px}
.np-approval-product-amount strong{color:#09623e;font-size:16px}
.np-approval-summary{margin-top:12px;padding:11px;border-radius:14px;background:#fbfdfe}
.np-approval-summary .payment-total-highlight{min-height:58px;padding:10px 13px;border:1.5px solid #16915d;border-radius:12px;background:linear-gradient(135deg,#eafaf1,#f4fff8)}
.np-approval-summary .payment-total-highlight span{font-weight:900;color:#125d3c}
.np-approval-summary .payment-total-highlight b{font-size:25px;color:#0d623d}
.np-approval-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:8px}
.np-approval-summary-grid>div{padding:9px 10px;border:1px solid #dce8ed;border-radius:10px;background:#fff}
.np-approval-summary-grid strong{display:block;margin-top:4px;color:#173f59;font-size:14px;overflow-wrap:anywhere}
.np-approval-summary-grid .metric-cash{border-color:#bfe6cf;background:#f2fcf6}
.np-approval-summary-grid .metric-bank{border-color:#bedcf2;background:#f2f9ff}
.np-approval-summary-grid .metric-debt{border-color:#f1c6cc;background:#fff6f7}
.np-approval-summary-grid .metric-debt strong{color:#b42335}
.np-approval-summary-grid .metric-bottle{border-color:#f1d7ac;background:#fffbf3}
.np-approval-rejection{display:grid;gap:4px;margin-top:10px}
.np-approval-actions{
  flex:0 0 auto;
  position:relative;
  bottom:auto;
  z-index:20;
  grid-template-columns:minmax(130px,.8fr) minmax(180px,1.25fr);
  gap:9px;
  margin:10px -18px -18px;
  padding:11px 18px calc(11px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.98);
  border-top:1px solid #dbe6eb;
  box-shadow:0 -8px 20px rgba(8,50,72,.10);
}
.np-approval-actions button{min-height:48px;font-size:15px;font-weight:900}

@media(max-width:900px){
  .np-detail-view .np-detail-meta-legacy{grid-template-columns:1fr;padding:10px}
  .np-approval-modal{
    width:100vw!important;
    height:100dvh!important;
    max-height:100dvh!important;
    padding:0!important;
    border-radius:0!important;
  }
  .np-approval-modal .np-approval-head{
    position:relative;
    top:0;
    margin:0;
    padding:10px 11px;
    min-height:59px;
    border-radius:0;
  }
  .np-approval-head .muted{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:72vw}
  .np-approval-scroll{padding:10px 10px 14px;touch-action:pan-y}
  .np-approval-customer{grid-template-columns:1fr;gap:8px;padding:12px}
  .np-approval-customer>div>strong{font-size:21px}
  .np-approval-meta{grid-template-columns:1fr 1fr}
  .np-approval-product{
    grid-template-columns:30px minmax(0,1fr) 68px;
    grid-template-areas:'idx name qty' 'idx price amount';
    gap:7px 8px;
    padding:10px;
  }
  .np-approval-product-index{grid-area:idx;align-self:stretch;height:auto;min-height:60px}
  .np-approval-product-name{grid-area:name}
  .np-approval-product-qty{grid-area:qty;text-align:right}
  .np-approval-product-price{grid-area:price}
  .np-approval-product-amount{grid-area:amount;text-align:right}
  .np-approval-product-name strong{font-size:15px}
  .np-approval-product-qty strong{min-width:40px;min-height:31px;font-size:18px}
  .np-approval-product-price strong,.np-approval-product-amount strong{font-size:13px}
  .np-approval-summary-grid{grid-template-columns:1fr 1fr}
  .np-approval-summary .payment-total-highlight b{font-size:23px}
  .np-approval-actions{
    grid-template-columns:minmax(105px,.72fr) minmax(165px,1.28fr)!important;
    margin:0;
    padding:9px 10px calc(9px + env(safe-area-inset-bottom));
  }
  .np-approval-actions .primary{order:initial!important}
  .np-approval-actions button{min-height:48px;padding:9px 10px;font-size:14px}
}

@media(max-width:420px){
  .np-approval-meta{grid-template-columns:1fr}
  .np-approval-section-title{align-items:center}
  .np-approval-summary-grid{grid-template-columns:1fr 1fr}
  .np-approval-summary-grid>div{padding:8px}
  .np-approval-actions{grid-template-columns:1fr 1.55fr!important}
}