/* ==========================================================
   ASSAM MOTORS ERP — MOBILE APP UI V5.33
   Shared by Workshop ERP, Admin Panel and Configuration pages
   ========================================================== */
:root{
  --erp-mobile-nav-h:64px;
  --erp-mobile-top-h:58px;
  --erp-safe-bottom:env(safe-area-inset-bottom,0px);
  --erp-safe-top:env(safe-area-inset-top,0px);
}
html{
  width:100%;
  max-width:100%;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  width:100%;
  max-width:100%;
  overscroll-behavior-x:none;
}
button,a,input,select,textarea{touch-action:manipulation}
.erp-mobile-menu-btn,.erp-mobile-backdrop,.erp-mobile-bottom-nav{display:none}

/* Never let a wide module create whole-page horizontal overflow. */
.ws-main,.admin-main,.pm-main,.ws-content-area,.admin-content-area,.pm-content,
.ws-page,.admin-page,.ws-section-box,.admin-section-box{min-width:0;max-width:100%}
.ws-table-wrap,.admin-table-wrap,.pm-table-wrap,.ec-table-wrap,.purchase-lines-scroll,
.estimate-table-wrap,.purchase-register-wrap,.vendor-ledger-table-wrap{
  max-width:100%;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
}

/* Density preference */
body.erp-density-compact .ws-section-box,
body.erp-density-compact .admin-section-box{padding:12px!important;margin-bottom:10px!important}
body.erp-density-compact .ws-form-section{padding:12px!important;margin-bottom:10px!important}
body.erp-density-compact .ws-btn,
body.erp-density-compact .admin-refresh-btn{padding-top:7px!important;padding-bottom:7px!important}
body.erp-density-compact .ws-content-area,
body.erp-density-compact .admin-content-area{padding-top:12px!important}

/* Forced desktop view overrides older <=900px sidebar collapse when user explicitly asks for Desktop. */
body.erp-layout-desktop .ws-sidebar{width:250px!important;max-width:250px!important}
body.erp-layout-desktop .admin-sidebar{width:250px!important;max-width:250px!important}
body.erp-layout-desktop .ws-logo div,
body.erp-layout-desktop .ws-nav-text,
body.erp-layout-desktop .admin-sidebar-logo div,
body.erp-layout-desktop .nav-text{display:block!important}
body.erp-layout-desktop .ws-nav-item,
body.erp-layout-desktop .admin-nav-item{justify-content:flex-start!important}

/* ==========================================================
   MOBILE / TABLET APP SHELL
   JS adds .erp-mobile-active according to Auto/Mobile/Tablet.
   ========================================================== */
body.erp-mobile-active{
  overflow:hidden!important;
  background:#eef3f8;
}
body.erp-mobile-active .ws-app,
body.erp-mobile-active .admin-dashboard-screen,
body.erp-mobile-active .pm-app{
  width:100%!important;
  max-width:100vw!important;
  height:100vh!important;
  min-height:100vh!important;
  overflow:hidden!important;
}
@supports(height:100dvh){
  body.erp-mobile-active .ws-app,
  body.erp-mobile-active .admin-dashboard-screen,
  body.erp-mobile-active .pm-app{
    height:100dvh!important;
    min-height:100dvh!important;
  }
}

/* Drawer sidebar */
body.erp-mobile-active .ws-sidebar,
body.erp-mobile-active .admin-sidebar,
body.erp-mobile-active .pm-sidebar{
  display:flex!important;
  position:fixed!important;
  inset:0 auto 0 0!important;
  width:min(86vw,330px)!important;
  max-width:330px!important;
  height:100vh!important;
  z-index:6500!important;
  transform:translateX(-104%);
  transition:transform .22s cubic-bezier(.2,.8,.2,1)!important;
  box-shadow:18px 0 45px rgba(3,20,41,.28)!important;
  overflow:hidden!important;
}
@supports(height:100dvh){
  body.erp-mobile-active .ws-sidebar,
  body.erp-mobile-active .admin-sidebar,
  body.erp-mobile-active .pm-sidebar{height:100dvh!important}
}
body.erp-mobile-active.erp-mobile-drawer-open .ws-sidebar,
body.erp-mobile-active.erp-mobile-drawer-open .admin-sidebar,
body.erp-mobile-active.erp-mobile-drawer-open .pm-sidebar{transform:translateX(0)}
body.erp-mobile-active .ws-logo,
body.erp-mobile-active .admin-sidebar-logo,
body.erp-mobile-active .pm-logo{
  justify-content:flex-start!important;
  padding:18px 16px!important;
  min-height:70px!important;
}
body.erp-mobile-active .ws-logo div,
body.erp-mobile-active .ws-nav-text,
body.erp-mobile-active .admin-sidebar-logo div,
body.erp-mobile-active .nav-text,
body.erp-mobile-active .pm-logo div{display:block!important}
body.erp-mobile-active .ws-nav,
body.erp-mobile-active .admin-sidebar-nav,
body.erp-mobile-active .pm-nav{
  padding:10px!important;
  gap:5px!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch;
}
body.erp-mobile-active .ws-nav-item,
body.erp-mobile-active .admin-nav-item,
body.erp-mobile-active .pm-nav-item{
  justify-content:flex-start!important;
  min-height:46px!important;
  padding:10px 12px!important;
  font-size:13px!important;
  border-radius:10px!important;
}
body.erp-mobile-active .ws-nav-icon,
body.erp-mobile-active .nav-icon{font-size:18px!important;min-width:24px;text-align:center}
body.erp-mobile-active .ws-sidebar-footer,
body.erp-mobile-active .admin-sidebar-footer,
body.erp-mobile-active .pm-footer{
  padding:10px!important;
  padding-bottom:calc(10px + var(--erp-safe-bottom))!important;
}
body.erp-mobile-active .ws-footer-btn,
body.erp-mobile-active .admin-sidebar-btn,
body.erp-mobile-active .pm-footer-btn{
  justify-content:flex-start!important;
  min-height:44px!important;
  padding:9px 12px!important;
}

/* Drawer backdrop */
body.erp-mobile-active .erp-mobile-backdrop{
  display:block;
  position:fixed;
  inset:0;
  z-index:6400;
  background:rgba(3,18,36,.55);
  backdrop-filter:blur(2px);
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease,visibility .18s ease;
}
body.erp-mobile-active.erp-mobile-drawer-open .erp-mobile-backdrop{opacity:1;visibility:visible}

/* Main content owns full screen */
body.erp-mobile-active .ws-main,
body.erp-mobile-active .admin-main,
body.erp-mobile-active .pm-main{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  flex:1 1 100%!important;
}

/* App-like sticky top bar */
body.erp-mobile-active .ws-topbar,
body.erp-mobile-active .admin-topbar,
body.erp-mobile-active .pm-topbar{
  position:relative!important;
  z-index:120!important;
  min-height:var(--erp-mobile-top-h)!important;
  height:auto!important;
  padding:calc(8px + var(--erp-safe-top)) 10px 8px!important;
  gap:8px!important;
  flex-shrink:0!important;
  box-shadow:0 3px 14px rgba(14,38,68,.10)!important;
}
body.erp-mobile-active .ws-topbar,
body.erp-mobile-active .admin-topbar{
  background:linear-gradient(110deg,#0b315b,#21448a)!important;
  border:0!important;
}
body.erp-mobile-active .ws-topbar h2,
body.erp-mobile-active .admin-topbar h2,
body.erp-mobile-active .pm-topbar h2{
  flex:1;
  min-width:0;
  margin:0!important;
  font-size:15px!important;
  line-height:1.25!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#fff!important;
}
body.erp-mobile-active .ws-topbar>div:last-child,
body.erp-mobile-active .admin-topbar-right,
body.erp-mobile-active .pm-topbar-actions{gap:5px!important}
body.erp-mobile-active .ws-live-badge,
body.erp-mobile-active .admin-live-badge{
  padding:4px 7px!important;
  font-size:8px!important;
}
body.erp-mobile-active #wsCurrentDate,
body.erp-mobile-active .admin-topbar-date,
body.erp-mobile-active .admin-topbar-sep{display:none!important}
body.erp-mobile-active .admin-close-btn{width:34px!important;height:34px!important;color:#fff!important;background:rgba(255,255,255,.13)!important}

.erp-mobile-menu-btn{
  width:40px;
  height:40px;
  min-width:40px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:11px;
  background:rgba(255,255,255,.12);
  color:#fff;
  align-items:center;
  justify-content:center;
  font-size:19px;
  font-weight:900;
  box-shadow:none;
}
body.erp-mobile-active .erp-mobile-menu-btn{display:inline-flex}

/* Content area */
body.erp-mobile-active .ws-content-area,
body.erp-mobile-active .admin-content-area,
body.erp-mobile-active .pm-content{
  width:100%!important;
  max-width:100%!important;
  padding:10px 10px calc(var(--erp-mobile-nav-h) + 16px + var(--erp-safe-bottom))!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
}
body.erp-mobile-active .ws-page,
body.erp-mobile-active .admin-page{width:100%;min-width:0}
body.erp-mobile-active .ws-section-box,
body.erp-mobile-active .admin-section-box{
  border-radius:13px!important;
  padding:12px!important;
  margin-bottom:10px!important;
  box-shadow:0 2px 10px rgba(15,39,68,.045)!important;
}
body.erp-mobile-active .ws-box-head,
body.erp-mobile-active .admin-box-head{
  align-items:flex-start!important;
  gap:8px!important;
  margin-bottom:10px!important;
}
body.erp-mobile-active .ws-section-box h3,
body.erp-mobile-active .admin-section-box h3{font-size:14px!important}

/* Mobile stats */
body.erp-mobile-active .ws-stats,
body.erp-mobile-active .admin-stats{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  margin-bottom:10px!important;
  overflow:visible!important;
}
body.erp-mobile-active .ws-stat-card,
body.erp-mobile-active .admin-stat-card{
  min-width:0!important;
  min-height:76px!important;
  padding:11px 12px!important;
  border-radius:12px!important;
  transform:none!important;
}
body.erp-mobile-active .ws-stat-card .label,
body.erp-mobile-active .admin-stat-card .label{font-size:8px!important;margin-bottom:5px!important;white-space:normal!important}
body.erp-mobile-active .ws-stat-card .value,
body.erp-mobile-active .admin-stat-card .value{font-size:21px!important}

/* Forms / touch controls */
body.erp-mobile-active .ws-form-grid,
body.erp-mobile-active .ws-form-grid.col-3,
body.erp-mobile-active .admin-form-grid{
  grid-template-columns:1fr!important;
  gap:10px!important;
}
body.erp-mobile-active .ws-form-section{padding:12px!important;border-radius:12px!important;margin-bottom:10px!important}
body.erp-mobile-active .ws-form-section-title{font-size:12px!important;margin-bottom:10px!important}
body.erp-mobile-active input,
body.erp-mobile-active select,
body.erp-mobile-active textarea{
  max-width:100%;
  font-size:16px!important; /* prevents iOS auto-zoom */
}
body.erp-mobile-active .ws-form-group input,
body.erp-mobile-active .ws-form-group select,
body.erp-mobile-active .ws-form-group textarea,
body.erp-mobile-active .admin-form-group input,
body.erp-mobile-active .admin-form-group select,
body.erp-mobile-active .admin-form-group textarea{
  min-height:44px!important;
  padding:10px 11px!important;
}
body.erp-mobile-active .ws-btn,
body.erp-mobile-active .admin-refresh-btn,
body.erp-mobile-active .admin-form-submit{
  min-height:42px;
  font-size:11px!important;
  border-radius:9px!important;
}
body.erp-mobile-active .ws-search-input{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  min-height:44px;
}

/* Toolbar/action rows wrap cleanly */
body.erp-mobile-active .jc-list-actions,
body.erp-mobile-active .purchase-page-actions,
body.erp-mobile-active .estimate-actions,
body.erp-mobile-active .estimate-toolbar,
body.erp-mobile-active .admin-box-head,
body.erp-mobile-active .pm-topbar-actions{
  width:100%;
  flex-wrap:wrap!important;
}
body.erp-mobile-active .jc-list-actions .ws-btn,
body.erp-mobile-active .estimate-actions .ws-btn{
  flex:1 1 130px;
}

/* Modals become true app screens */
body.erp-mobile-active .ws-modal-overlay,
body.erp-mobile-active .admin-modal-overlay{
  padding:0!important;
  align-items:stretch!important;
  justify-content:stretch!important;
}
body.erp-mobile-active .ws-modal,
body.erp-mobile-active .admin-modal{
  width:100vw!important;
  max-width:none!important;
  height:100vh!important;
  max-height:none!important;
  border-radius:0!important;
  margin:0!important;
  overflow-y:auto!important;
}
@supports(height:100dvh){
  body.erp-mobile-active .ws-modal,
  body.erp-mobile-active .admin-modal{height:100dvh!important}
}
body.erp-mobile-active .ws-modal-view,
body.erp-mobile-active .admin-modal-view{padding:12px!important}
body.erp-mobile-active .ws-modal-close,
body.erp-mobile-active .admin-modal-close{
  position:fixed!important;
  top:calc(10px + var(--erp-safe-top))!important;
  right:10px!important;
  width:38px!important;
  height:38px!important;
  z-index:7000!important;
}
body.erp-mobile-active .ws-toast,
body.erp-mobile-active .admin-toast{
  left:10px!important;
  right:10px!important;
  bottom:calc(var(--erp-mobile-nav-h) + 10px + var(--erp-safe-bottom))!important;
  max-width:none!important;
  text-align:center;
}

/* Table -> mobile cards for tables marked by erp-mobile-ui.js */
body.erp-mobile-active table.erp-mobile-cards{
  width:100%!important;
  min-width:0!important;
  border-collapse:separate!important;
  border-spacing:0!important;
  display:block;
}
body.erp-mobile-active table.erp-mobile-cards thead{display:none!important}
body.erp-mobile-active table.erp-mobile-cards tbody{display:block;width:100%}
body.erp-mobile-active table.erp-mobile-cards tbody tr{
  display:block!important;
  width:100%!important;
  margin:0 0 9px!important;
  padding:6px 10px!important;
  border:1px solid #dce6f0!important;
  border-radius:12px!important;
  background:#fff!important;
  box-shadow:0 2px 8px rgba(15,39,68,.045)!important;
  filter:none!important;
  transform:none!important;
}
body.erp-mobile-active table.erp-mobile-cards tbody td{
  display:grid!important;
  grid-template-columns:minmax(92px,34%) minmax(0,1fr)!important;
  gap:9px!important;
  align-items:start!important;
  width:100%!important;
  min-height:0!important;
  padding:7px 0!important;
  border:0!important;
  border-bottom:1px solid #edf2f7!important;
  border-radius:0!important;
  background:transparent!important;
  font-size:11px!important;
  overflow-wrap:anywhere;
}
body.erp-mobile-active table.erp-mobile-cards tbody td:last-child{border-bottom:0!important}
body.erp-mobile-active table.erp-mobile-cards tbody td::before{
  content:attr(data-mobile-label);
  color:#71839a;
  font-size:8px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
  line-height:1.4;
}
body.erp-mobile-active table.erp-mobile-cards .jc-actions,
body.erp-mobile-active table.erp-mobile-cards .vendor-row-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:5px!important;
}
body.erp-mobile-active table.erp-mobile-cards .jc-actions .ws-btn{flex:1 1 auto}

/* Very wide grids stay inside their own horizontal scroller instead of widening the page */
body.erp-mobile-active .purchase-line-grid,
body.erp-mobile-active .purchase-register-table,
body.erp-mobile-active .estimate-line-grid,
body.erp-mobile-active .vendor-ledger-table,
body.erp-mobile-active .rot-report-table{max-width:none}
body.erp-mobile-active .purchase-lines-scroll,
body.erp-mobile-active .purchase-register-wrap,
body.erp-mobile-active .estimate-table-wrap,
body.erp-mobile-active .vendor-ledger-table-wrap,
body.erp-mobile-active .rot-table-shell{
  overflow-x:auto!important;
  -webkit-overflow-scrolling:touch;
}

/* Job Card Parts/Labour already carry mobile labels: make each row a clean card. */
body.erp-mobile-active .item-grid-head,
body.erp-mobile-active .parts-grid-head,
body.erp-mobile-active .labour-grid-head{display:none!important}
body.erp-mobile-active .item-row.parts-row,
body.erp-mobile-active .item-row.labour-row{
  grid-template-columns:1fr!important;
  gap:7px!important;
  padding:10px!important;
  border:1px solid #dbe5ef!important;
  border-radius:12px!important;
  background:#fff!important;
  margin-bottom:9px!important;
}
body.erp-mobile-active .mobile-field-label{display:block!important;margin:0 0 3px;font-size:8px!important}
body.erp-mobile-active .item-row input,
body.erp-mobile-active .item-row select{min-height:42px!important;font-size:16px!important}
body.erp-mobile-active .part-purpose-note,
body.erp-mobile-active .rot-purpose-note{grid-template-columns:1fr!important}
body.erp-mobile-active .item-remove{width:42px!important;height:42px!important;justify-self:end}

/* Settings becomes a mobile bottom sheet */
body.erp-mobile-active .erp-settings-panel{
  position:fixed!important;
  left:8px!important;
  right:8px!important;
  bottom:calc(var(--erp-mobile-nav-h) + 8px + var(--erp-safe-bottom))!important;
  max-height:min(72vh,620px)!important;
  z-index:7200!important;
  border-radius:16px!important;
  box-shadow:0 24px 70px rgba(3,18,36,.32)!important;
}
body.erp-mobile-active .erp-settings-title small,
body.erp-mobile-active .erp-settings-links span,
body.erp-mobile-active .erp-settings-hint{display:block!important}
body.erp-mobile-active .erp-settings-links button{
  justify-content:flex-start!important;
  min-height:42px!important;
}
body.erp-mobile-active .erp-scale-grid,
body.erp-mobile-active .erp-layout-grid,
body.erp-mobile-active .erp-density-grid{grid-template-columns:repeat(2,1fr)!important}

/* Bottom navigation */
body.erp-mobile-active .erp-mobile-bottom-nav{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  position:fixed;
  left:8px;
  right:8px;
  bottom:calc(6px + var(--erp-safe-bottom));
  height:var(--erp-mobile-nav-h);
  z-index:2600;
  padding:5px;
  border:1px solid rgba(197,211,228,.92);
  border-radius:18px;
  background:rgba(255,255,255,.96);
  box-shadow:0 12px 35px rgba(8,34,65,.20);
  backdrop-filter:blur(16px);
}
.erp-mobile-bottom-btn{
  border:0;
  border-radius:12px;
  background:transparent;
  color:#65778b;
  padding:4px 2px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  min-width:0;
}
.erp-mobile-bottom-btn .erp-mobile-bottom-icon{font-size:18px;line-height:1}
.erp-mobile-bottom-btn .erp-mobile-bottom-label{
  max-width:100%;
  font-size:8px;
  line-height:1.1;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.erp-mobile-bottom-btn.active{background:#eaf2ff;color:#154d91}
.erp-mobile-bottom-btn.menu{color:#0b315b}

/* Tablet mode keeps a little more information on screen. */
body.erp-mobile-active.erp-tablet-active .ws-content-area,
body.erp-mobile-active.erp-tablet-active .admin-content-area{padding-left:14px!important;padding-right:14px!important}
body.erp-mobile-active.erp-tablet-active .ws-form-grid,
body.erp-mobile-active.erp-tablet-active .ws-form-grid.col-3{grid-template-columns:repeat(2,minmax(0,1fr))!important}
body.erp-mobile-active.erp-tablet-active .ws-form-group.full{grid-column:1/-1!important}
body.erp-mobile-active.erp-tablet-active .ws-stats,
body.erp-mobile-active.erp-tablet-active .admin-stats{grid-template-columns:repeat(3,minmax(0,1fr))!important}

/* Tiny phones */
@media(max-width:420px){
  body.erp-mobile-active .ws-content-area,
  body.erp-mobile-active .admin-content-area{padding-left:7px!important;padding-right:7px!important}
  body.erp-mobile-active .ws-stats,
  body.erp-mobile-active .admin-stats{gap:6px!important}
  body.erp-mobile-active .ws-stat-card,
  body.erp-mobile-active .admin-stat-card{padding:9px!important}
  .erp-mobile-bottom-btn .erp-mobile-bottom-label{font-size:7px}
}

/* Print must always stay document-oriented, not mobile-card UI. */
@media print{
  .erp-mobile-menu-btn,.erp-mobile-backdrop,.erp-mobile-bottom-nav{display:none!important}
  body{overflow:visible!important}
  table.erp-mobile-cards{display:table!important}
  table.erp-mobile-cards thead{display:table-header-group!important}
  table.erp-mobile-cards tbody{display:table-row-group!important}
  table.erp-mobile-cards tbody tr{display:table-row!important;border:0!important;box-shadow:none!important;padding:0!important}
  table.erp-mobile-cards tbody td{display:table-cell!important}
  table.erp-mobile-cards tbody td::before{display:none!important}
}