/* BUILD 45.2.85 - FULL MOBILE ERP PHASE
   Responsive/app presentation only. No ERP business, posting, permission or database logic changes. */

@media screen and (max-width:1200px){
  html,body{max-width:100%;overflow-x:hidden}
  body{min-width:0!important;-webkit-text-size-adjust:100%;touch-action:manipulation}
  .app-shell,.main-column,.content{min-width:0!important;max-width:100%!important}
  .main-column{width:100%!important}

  /* App-safe spacing */
  body.erp-app-mode .topbar{padding-top:max(8px,env(safe-area-inset-top))!important}
  body.erp-app-mode .content{padding-bottom:max(24px,env(safe-area-inset-bottom))!important}
  body.erp-app-mode .sidebar{padding-top:max(22px,env(safe-area-inset-top))!important;padding-bottom:max(18px,env(safe-area-inset-bottom))!important}

  /* Keep the approved drawer geometry and make it reliable on every tablet/mobile page. */
  .sidebar{overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important}
  .nav-list,.nav-list>.nav-home,.nav-list>.nav-group,.nav-list>.nav-group>summary{box-sizing:border-box!important}
  .nav-list>.nav-home,.nav-list>.nav-group{flex-shrink:0!important}
  .nav-list>.nav-group[open]>.nav-dropdown{display:block!important}
  .nav-list>.nav-group>.nav-dropdown{max-height:none!important;overflow:visible!important}
  .nav-list>.nav-group>.nav-dropdown a{white-space:normal!important;line-height:1.25!important}

  /* Header / global controls */
  .topbar{box-sizing:border-box!important;width:100%!important;min-width:0!important}
  .menu-button{min-width:42px!important;width:42px!important;height:42px!important;min-height:42px!important;border-radius:9px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
  .topbar-title,.topbar-global-search,.user-menu,.topbar-tools,.user-dropdown{min-width:0!important}
  .topbar-global-search input{min-width:0!important;width:100%!important}
  .topbar-global-search button{min-height:40px!important;white-space:nowrap!important}
  .topbar-tools>a{position:relative!important}
  .user-dropdown>summary{min-height:42px!important;box-sizing:border-box!important}

  /* Generic responsive page architecture */
  .content{box-sizing:border-box!important}
  .page-actions,.panel-header,.document-form-title,.po-view-heading,.status-row{min-width:0!important;max-width:100%!important}
  .page-actions>* ,.panel-header>* ,.document-form-title>* ,.po-view-heading>*{min-width:0!important}
  .page-actions p,.panel-header p,.document-form-title p,.po-view-heading p{white-space:normal!important;overflow-wrap:anywhere!important}
  .action-row{max-width:100%!important}

  /* Tablet form layout: two columns where old grids are 3/4 columns. */
  .form-grid.three,.form-grid.four,.document-info-grid,.address-grid,.summary-grid,.quick-create-form{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .form-grid>label,.form-grid>div,.document-info-grid>div,.address-grid>div,.summary-grid>div{min-width:0!important}

  /* Controls sized for touch without changing submitted values. */
  .content input:not([type=checkbox]):not([type=radio]):not([type=file]),
  .content select,
  .content textarea,
  .content .choices__inner,
  .content .ts-control,
  .content .select2-container .select2-selection--single{max-width:100%!important;box-sizing:border-box!important}
  .content input:not([type=checkbox]):not([type=radio]):not([type=file]),
  .content select{min-height:40px!important}
  .content textarea{min-height:72px!important;resize:vertical!important}
  .content textarea[name*="description" i],
  .content textarea[name*="remarks" i],
  .content textarea[id*="description" i],
  .content textarea[id*="remarks" i]{min-height:88px!important;line-height:1.42!important}
  .content input[type=file]{max-width:100%!important}
  .button,.btn,button{touch-action:manipulation}

  /* All tab strips / process strips remain usable without changing their links. */
  .erp-process-flow,.module-tabs,.phase38-module-tabs,.phase39-flow-tabs,.phase40-flow-tabs,.phase41-functional-tabs,.party-activity-tabs,.phase434-tabs{
    overflow-x:auto!important;overflow-y:hidden!important;flex-wrap:nowrap!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:thin!important;max-width:100%!important
  }
  .erp-process-flow>a,.module-tabs>a,.module-tabs>button,.phase38-module-tabs>a,.phase39-flow-tabs>a,.phase40-flow-tabs>a,.phase41-functional-tabs>a,.party-activity-tabs>a,.phase434-tabs>a{flex:0 0 auto!important;white-space:nowrap!important}

  /* Wide ERP grids stay functional through horizontal touch scrolling. */
  .table-wrap,.po-lines-wrap{max-width:100%!important;overflow:auto!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-x:contain!important}
  .table-wrap table,.po-lines{max-width:none!important}
  .po-lines-wrap{scrollbar-gutter:stable both-edges}
  .item-combobox-menu,.universal-select-menu,#bom-lines .bom-component-menu{max-width:calc(100vw - 24px)!important}

  /* Dashboard / KPI areas */
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .dashboard-grid,.smart45-main-grid,.smart45-chart-grid{grid-template-columns:1fr!important}
  .module-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .smart45-module-flow{grid-template-columns:none!important;display:flex!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  .smart45-module{flex:0 0 168px!important;min-width:168px!important}

  /* Alerts and notifications must wrap instead of widening the page. */
  .alert,.phase37-notice-bar,.entry-running-number{max-width:100%!important;box-sizing:border-box!important}
  .alert{overflow-wrap:anywhere!important}
  .phase37-notice-scroll{min-width:0!important}
}

@media screen and (max-width:760px){
  :root{--mobile-edge:8px}
  body{font-size:14px}
  .main-column{min-height:100dvh!important}

  /* Compact app header: title + account tools + full-width search. */
  .topbar{
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr) auto!important;
    grid-template-areas:"menu title user" "search search search"!important;
    align-items:center!important;
    gap:7px!important;
    padding:7px var(--mobile-edge)!important;
  }
  .menu-button{grid-area:menu!important;margin:0!important}
  .topbar-title{grid-area:title!important;margin:0!important;padding:0!important}
  .topbar-title .eyebrow{font-size:8px!important;line-height:1.2!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .topbar-title h1{font-size:16px!important;line-height:1.18!important;margin:2px 0 0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .topbar-context-links{display:none!important}
  .topbar-global-search{grid-area:search!important;width:100%!important;min-width:0!important;margin:0!important;display:grid!important;grid-template-columns:26px minmax(0,1fr) auto!important}
  .topbar-global-search input{height:42px!important;min-height:42px!important;font-size:16px!important}
  .topbar-global-search button{height:42px!important;min-height:42px!important;padding:0 12px!important}
  .user-menu{grid-area:user!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:4px!important}
  .topbar-tools{display:flex!important;gap:3px!important}
  .topbar-tools>a{width:36px!important;min-width:36px!important;height:38px!important;min-height:38px!important;padding:0!important;display:grid!important;place-items:center!important;border-radius:8px!important}
  .topbar-tools>a small{display:none!important}
  .topbar-tools>a em{position:absolute!important;top:-3px!important;right:-3px!important;min-width:16px!important;height:16px!important;font-size:8px!important}
  .user-dropdown>summary{width:42px!important;min-width:42px!important;height:42px!important;padding:0!important;display:grid!important;place-items:center!important;border-radius:10px!important;overflow:visible!important}
  .user-dropdown>summary>.avatar{margin:0!important}
  .user-dropdown>summary>span:nth-child(2),.user-dropdown>summary>b{display:none!important}
  .user-dropdown>div{position:fixed!important;z-index:500!important;top:58px!important;right:8px!important;left:auto!important;width:min(300px,calc(100vw - 16px))!important;max-height:calc(100dvh - 74px)!important;overflow:auto!important}

  .content{padding:8px var(--mobile-edge) 24px!important}
  .content>.card,.content>.panel,.content>.table-card,.content>.form-card,.content>.document-form-card{max-width:100%!important}

  /* Mobile page actions */
  .page-actions{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important;padding:8px!important;margin-bottom:10px!important}
  .page-actions>.action-row,.page-actions>form.action-row,.panel-header>.action-row{display:flex!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;flex-wrap:nowrap!important;gap:6px!important;padding-bottom:2px!important;-webkit-overflow-scrolling:touch!important}
  .page-actions .button,.page-actions button,.panel-header .button,.panel-header button{flex:0 0 auto!important;min-height:40px!important}

  /* One-column data entry outside line-item tables. */
  .form-grid,.form-grid.two,.form-grid.three,.form-grid.four,.document-info-grid,.address-grid,.view-bottom-grid,.summary-grid,.quick-create-form,.phase41-activity-grid,.phase43-serial-entry,.phase43-inline-master-wrap{
    grid-template-columns:1fr!important
  }
  .form-grid .span-2,.form-grid .span-3,.form-grid .span-4{grid-column:auto!important}
  .content label{min-width:0!important}
  .content input:not([type=checkbox]):not([type=radio]):not([type=file]),.content select,.content textarea{width:100%!important;min-width:0!important;font-size:16px!important}
  .content input:not([type=checkbox]):not([type=radio]):not([type=file]),.content select{height:44px!important;min-height:44px!important}
  .content textarea{min-height:82px!important}
  .content textarea[name*="description" i],.content textarea[name*="remarks" i],.content textarea[id*="description" i],.content textarea[id*="remarks" i]{min-height:104px!important}
  .check-line{min-height:42px!important;display:flex!important;align-items:center!important;gap:8px!important}
  .check-line input[type=checkbox],.content input[type=checkbox],.content input[type=radio]{width:20px!important;height:20px!important;min-width:20px!important}

  /* Full-width cards with compact internal padding. */
  .card,.panel,.form-card,.table-card,.document-form-card{border-radius:10px!important}
  .document-form-card,.form-card,.table-card{padding:9px!important}
  .panel-header,.document-form-title,.po-view-heading{gap:8px!important;flex-wrap:wrap!important;align-items:flex-start!important}
  .panel-header h2,.document-form-title h2,.po-view-heading h2{font-size:16px!important;overflow-wrap:anywhere!important}

  /* Dashboard reads cleanly one card per row on phone. */
  .metric-grid,.module-grid,.smart45-work-grid,.smart45-attention-list{grid-template-columns:1fr!important}
  .metric{min-height:82px!important;padding:11px!important}
  .metric>strong,.metric strong{font-size:20px!important}

  /* Registers and voucher line grids: preserve columns, scroll rather than squeeze/break controls. */
  .table-wrap{position:relative!important;width:100%!important;border-radius:8px!important}
  .table-wrap table:not(.compact-table){min-width:720px!important}
  .document-table{min-width:760px!important}
  .po-lines{min-width:1080px!important}
  #bom-lines{min-width:1080px!important}
  .production-register-table{min-width:920px!important}
  .table-wrap th,.table-wrap td,.po-lines th,.po-lines td{white-space:normal!important}
  .table-wrap td:last-child,.po-lines td:last-child{white-space:nowrap!important}
  .table-wrap .button,.po-lines .button,.table-wrap button,.po-lines button{min-height:36px!important}

  /* Voucher actions remain at the top of the document and are touch-scrollable. */
  .voucher-all-actions-top,.document-form-actions.voucher-sticky-actions,.form-actions.voucher-sticky-actions,.voucher-top-entry-actions{
    position:relative!important;top:auto!important;display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:6px!important;margin-bottom:10px!important;padding:7px!important;-webkit-overflow-scrolling:touch!important
  }
  .voucher-all-actions-top .action-row,.voucher-all-actions-top .voucher-top-workflow-form{display:flex!important;flex-wrap:nowrap!important;flex:0 0 auto!important}
  .voucher-all-actions-top .button,.voucher-all-actions-top button,.document-form-actions.voucher-sticky-actions .button,.form-actions.voucher-sticky-actions .button,.voucher-top-entry-actions .button{height:40px!important;min-height:40px!important;flex:0 0 auto!important}

  /* Select/autocomplete menus stay within screen. */
  .item-combobox-menu,.universal-select-menu,#bom-lines .bom-component-menu,.phase42-serial-menu{left:8px!important;right:8px!important;width:auto!important;min-width:0!important;max-width:calc(100vw - 16px)!important;max-height:46dvh!important}
  .phase42-serial-picker{min-width:0!important;width:100%!important}

  /* ERP flow / tabs are horizontal, never page-wide overflow. */
  .erp-process-flow{padding:5px 8px!important;gap:4px!important}
  .erp-process-flow>a{min-height:36px!important;padding:0 9px!important}
  .erp-process-flow>i{flex:0 0 auto!important}

  /* Notification strip */
  .phase37-notice-bar{padding:6px 8px!important;gap:6px!important}
  .phase37-notice-scroll{overflow-x:auto!important}
  .phase37-notice-item{max-width:80vw!important}
  .phase37-notice-item a{display:block!important;overflow:hidden!important;text-overflow:ellipsis!important}

  /* Running number must not dominate the phone screen. */
  .entry-running-number{display:flex!important;gap:5px!important;overflow-x:auto!important;white-space:nowrap!important;padding:6px 8px!important}
  .entry-running-number small{display:none!important}
}

@media screen and (max-width:480px){
  :root{--mobile-edge:6px}
  .topbar{grid-template-columns:42px minmax(0,1fr) auto!important;padding-left:6px!important;padding-right:6px!important}
  .topbar-title h1{font-size:15px!important}
  .topbar-tools>a{width:33px!important;min-width:33px!important}
  .user-dropdown>summary{width:38px!important;min-width:38px!important}
  .content{padding-left:6px!important;padding-right:6px!important}
  .page-actions,.document-form-card,.form-card,.table-card{padding:7px!important}
  .button,.btn,button.button{min-height:38px!important}
}

/* Login/app start screen */
@media screen and (max-width:760px){
  .login-body{min-height:100dvh!important;overflow-x:hidden!important}
  .login-shell{min-height:100dvh!important;display:block!important;padding:0!important}
  .login-story{display:none!important}
  .login-panel{min-height:100dvh!important;width:100%!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:max(18px,env(safe-area-inset-top)) 12px max(18px,env(safe-area-inset-bottom))!important;box-sizing:border-box!important}
  .login-card{width:min(430px,100%)!important;max-width:430px!important;padding:20px 16px!important;border-radius:14px!important}
  .login-card-logo{max-width:210px!important;max-height:76px!important;object-fit:contain!important}
  .login-card input,.login-card select,.login-card button{width:100%!important;min-height:46px!important;font-size:16px!important;box-sizing:border-box!important}
}

@media print{
  body.erp-mobile-ui .table-wrap,body.erp-mobile-ui .po-lines-wrap{overflow:visible!important}
}