/* Nam Phuong ERP Stable 1.37.2
   - Correct mobile application shell (sidebar must never occupy document flow)
   - Product image UI and upload controls
*/

/* ===== Definitive mobile shell repair ===== */
@media (max-width:900px){
  html,body{width:100%;height:100%;overflow:hidden}
  body.np137-modern #appView.app:not(.hidden){
    position:relative!important;
    display:block!important;
    width:100%!important;
    height:100dvh!important;
    min-height:100dvh!important;
    overflow:hidden!important;
  }
  body.np137-modern #sidebar.sidebar{
    position:fixed!important;
    left:0!important;
    top:0!important;
    bottom:0!important;
    width:min(316px,87vw)!important;
    height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    z-index:120!important;
    transform:translateX(-106%)!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
  }
  body.np137-modern.menu-open #sidebar.sidebar{transform:translateX(0)!important}
  body.np137-modern #appView.app>main{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    height:100dvh!important;
    min-height:0!important;
    margin:0!important;
    padding:0 0 calc(72px + env(safe-area-inset-bottom))!important;
    overflow:hidden!important;
  }
  body.np137-modern #appView.app>main>header{
    flex:0 0 62px!important;
    width:100%!important;
  }
  body.np137-modern #content{
    position:relative!important;
    display:block!important;
    flex:1 1 auto!important;
    width:100%!important;
    min-height:0!important;
    margin:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
    visibility:visible!important;
    opacity:1!important;
  }
}

/* ===== Product images ===== */
.np1372-product-thumb{
  display:block;
  width:54px;
  height:54px;
  flex:0 0 54px;
  object-fit:contain;
  border:1px solid #dce9ef;
  border-radius:13px;
  background:#fff;
  box-shadow:0 4px 12px rgba(11,75,104,.07);
}
.np1372-product-thumb.small{width:38px;height:38px;flex-basis:38px;border-radius:10px}
.np1372-product-name{display:flex;align-items:center;gap:10px;min-width:0}
.np1372-product-name>span{min-width:0}
.np1372-product-name b,.np1372-product-name small{display:block}
.np1372-product-name small{margin-top:3px;color:var(--muted);font-size:10px}

.np1372-product-shortcut{
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr)!important;
  align-items:center!important;
  gap:8px!important;
}
.np1372-product-shortcut img{
  width:42px;height:42px;object-fit:contain;border-radius:11px;background:#fff;border:1px solid #dce8ee;
}
.np1372-product-shortcut span{min-width:0;overflow:hidden;text-overflow:ellipsis}

.np1372-request-thumb{
  width:44px;height:44px;object-fit:contain;border-radius:11px;border:1px solid #dce8ee;background:#fff;
}
.request-item-row.np1372-has-image{grid-template-columns:44px minmax(0,1fr) 100px 44px;align-items:center}

.np1372-image-editor{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:16px;
  align-items:start;
  padding:14px;
  border:1px solid #dbe8ee;
  border-radius:17px;
  background:linear-gradient(145deg,#fbfeff,#f4fafc);
}
.np1372-image-preview{
  width:150px;height:150px;display:grid;place-items:center;overflow:hidden;border:1px solid #d8e6ed;border-radius:18px;background:#fff;box-shadow:0 8px 22px rgba(10,65,91,.08)
}
.np1372-image-preview img{width:100%;height:100%;object-fit:contain}
.np1372-image-controls{display:grid;gap:9px;min-width:0}
.np1372-image-controls h4{margin:0;color:#153f58}
.np1372-image-controls p{margin:0;color:#6b818e;font-size:11px;line-height:1.5}
.np1372-image-actions{display:flex;gap:8px;flex-wrap:wrap}
.np1372-upload-button{display:inline-flex!important;align-items:center;justify-content:center;gap:7px;margin:0!important;padding:9px 12px;border-radius:11px;background:#e9f5fa;color:#0b6b94;font-weight:750;cursor:pointer}
.np1372-upload-button input{display:none}
.np1372-image-status{padding:8px 10px;border-radius:10px;background:#fff;border:1px dashed #cfe0e8;color:#5e7583;font-size:11px}
.np1372-image-status.custom{border-style:solid;border-color:#a9ddc2;background:#f0fbf5;color:#147447}

@media(max-width:900px){
  .np1372-product-thumb{width:48px;height:48px;flex-basis:48px}
  .request-item-row.np1372-has-image{grid-template-columns:40px minmax(0,1fr) 78px 42px}
  .np1372-request-thumb{width:40px;height:40px}
}
@media(max-width:560px){
  .np1372-image-editor{grid-template-columns:96px minmax(0,1fr);gap:11px;padding:11px}
  .np1372-image-preview{width:96px;height:96px;border-radius:14px}
  .np1372-image-actions{display:grid;grid-template-columns:1fr}
  .np1372-image-actions>*{width:100%}
  body.np-sales-compact .np1372-product-shortcut{grid-template-columns:24px minmax(0,1fr)!important;gap:5px!important}
  body.np-sales-compact .np1372-product-shortcut img{width:24px;height:24px;border-radius:7px}
}