/* KIRAN OMS Android V1 — WebView overlap safety layer
   Added 04-10-2026. Scoped to small-screen/responsive behavior only.
   Desktop/tablet layout is intentionally unchanged. */

html,body{width:100%;max-width:100%;overflow-x:hidden!important}
*,*::before,*::after{box-sizing:border-box}

/* Prevent flex/grid children from forcing their parent wider than the WebView. */
.header-brand,.header-context,.header-right,.header-system-actions,
.pro-command-bar,.pro-actions,.toolbar,.toolbar-left,.toolbar-center,.toolbar-right,
.filter-controls,.filter-group,.mo-action-wrap,.mo-filter-shell{min-width:0}

@media (max-width:560px){
  :root{--header-h:56px;--mo-sticky-gap:3px}

  header.app-header{
    height:var(--header-h)!important;
    min-height:var(--header-h)!important;
    width:100%!important;
    max-width:100vw!important;
    grid-template-columns:auto minmax(0,1fr) auto!important;
    gap:5px!important;
    padding:0 7px!important;
    overflow:hidden!important;
  }
  .header-brand{min-width:34px!important;overflow:hidden!important}
  .header-context{min-width:0!important;overflow:hidden!important;justify-content:flex-start!important}
  .header-page-line{min-width:0!important;max-width:100%!important;overflow:hidden!important}
  #app-page-title{max-width:100%!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:12px!important}
  .header-right{min-width:0!important;overflow:hidden!important;gap:3px!important}
  .header-system-actions{min-width:0!important;gap:3px!important}
  .header-system-actions .lan-pill,
  .header-system-actions #fs-btn,
  .header-system-actions .theme-toggle{display:none!important}
  .sys-pill{width:31px!important;min-width:31px!important;height:31px!important;padding:0!important;flex:0 0 31px!important}
  .sidebar-toggle{width:34px!important;height:34px!important;font-size:17px!important}

  main,body.sidebar-collapsed main{
    width:100%!important;max-width:100vw!important;
    margin-left:0!important;
    padding:10px 7px 22px!important;
    overflow-x:hidden!important;
  }
  .alert-bar,body.sidebar-collapsed .alert-bar{width:100%!important;max-width:100vw!important;margin-left:0!important}

  /* Never let command/filter controls overlap each other. */
  .pro-command-bar,#pg-dash>.pro-command-bar{display:flex!important;flex-direction:column!important;align-items:stretch!important;width:100%!important;max-width:100%!important}
  .pro-command-title,#pg-dash .pro-command-title{width:100%!important;min-width:0!important;flex:0 0 auto!important}
  .pro-actions,#pg-dash .pro-actions{width:100%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important}
  .pro-action{min-width:0!important;width:100%!important;justify-content:center!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .pro-global-search,#pg-dash .pro-global-search{width:100%!important;max-width:none!important;min-width:0!important;margin-left:0!important}

  .toolbar,.toolbar-left,.toolbar-center,.toolbar-right,.filter-controls,.filter-group{
    width:100%!important;max-width:100%!important;min-width:0!important;
  }
  .toolbar-center,.toolbar-right,.filter-controls,.filter-group{flex-wrap:wrap!important}
  .toolbar-right>*{max-width:100%!important}
  .btn,.sel,.inp,.msel-btn,.qs-btn{max-width:100%!important;min-width:0!important}

  /* Master Orders sticky shell: keep it inside viewport and allow rows to wrap. */
  #pg-orders .mo-filter-shell{
    width:100%!important;max-width:100%!important;min-width:0!important;
    overflow:visible!important;
    top:calc(var(--header-h) + var(--mo-sticky-gap))!important;
  }
  #pg-orders .mo-filter-shell>*,
  #pg-orders .mo-filter-row-1,
  #pg-orders .mo-filter-row-2{max-width:100%!important;min-width:0!important}
  #pg-orders .mo-filter-row-1,#pg-orders .mo-filter-row-2{flex-wrap:wrap!important}
  #pg-orders .mo-filter-row-1>* ,#pg-orders .mo-filter-row-2>*{min-width:0!important;max-width:100%!important}

  /* Tables scroll inside their own wrapper, never underneath neighbouring controls. */
  #ow,.twrap,.rpt-body,.sole-table-wrap,.p7-table-wrap,.p6-board-wrap{
    max-width:100%!important;
    min-width:0!important;
  }
  #ow{overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch!important}

  /* Modal/dialog safety for narrow Android WebView widths. */
  .mbox,.p7-modal-box,.tw-box{
    width:100%!important;max-width:100%!important;min-width:0!important;
    max-height:calc(100vh - 12px)!important;
  }
  .mo{padding:6px!important}
  .mbody,.p7-modal-body{min-width:0!important;overflow:auto!important;-webkit-overflow-scrolling:touch!important}
  .mfoot,.p7-modal-foot{flex-wrap:wrap!important}
  .mfoot>* ,.p7-modal-foot>*{max-width:100%!important}

  /* Inputs/selects must shrink instead of painting over adjacent labels/buttons. */
  input,select,textarea{max-width:100%!important;min-width:0!important}
  .filter-search{min-width:0!important;width:100%!important;flex:1 1 100%!important}
}

@media (max-width:390px){
  header.app-header{grid-template-columns:34px minmax(0,1fr) 31px!important;padding:0 5px!important}
  .header-brand{gap:0!important}
  .header-page-kicker{display:none!important}
  #app-page-title{font-size:11.5px!important}
  .pro-actions,#pg-dash .pro-actions{grid-template-columns:1fr 1fr!important}
  .pro-action{padding-left:5px!important;padding-right:5px!important;font-size:9.5px!important}
  .filter-card{padding:9px!important}
}

/* Android WebView can expose a display-cutout safe area on some devices. */
@supports (padding-top: env(safe-area-inset-top)){
  @media (max-width:560px){
    header.app-header{padding-left:max(7px,env(safe-area-inset-left))!important;padding-right:max(7px,env(safe-area-inset-right))!important}
  }
}