/* P57 — final responsive/mobile audit shared layer. */
html,body{max-width:100%}
body{overflow-x:clip}
img,video,canvas,svg{max-width:100%}
main,section,article,header,footer,nav,form,fieldset{min-width:0}
h1,h2,h3,h4,p,label,.muted,.hint,.meta,.status{overflow-wrap:anywhere}

/* Keep genuinely wide data grids inside their own scroll surface instead of widening the page. */
.table-wrap,.table-scroll,.stock-results,.dashboard-table-wrap,.finance-table-wrap,.settlement-table-wrap,
.fbs-preview,.analytics-table-wrap,.price-table-wrap,.list-table-wrap,.history-table-wrap{
  max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain
}

@media(max-width:900px){
  .stock-page,.page,.wrap,.container,.content,.main,.analytics-page,.finance-page,.settlement-page{
    width:100%;max-width:100%!important;margin-left:auto;margin-right:auto
  }
  .stock-page header,.page-head,.head,.toolbar,.stock-toolbar,.filters,.filter-row,.actions,.inline-actions{
    min-width:0;max-width:100%
  }
  .stock-toolbar>*,.toolbar>*,.filters>*,.filter-row>*{min-width:0;max-width:100%}
  table{max-width:100%}
  /* Large administrative/reporting tables are intentionally scrollable on tablet/mobile. */
  .dashboard-table,.finance-pl-table,.finance-account-table,.settlement-table,.settlement-payment-table,
  .analytics-table,.fbs-preview table,.admin-table{display:table}
  .dashboard-table-wrap,.finance-table-wrap,.settlement-table-wrap,.analytics-table-wrap,.fbs-preview,
  main>table:not(.stock-table):not(.items-table),section>table:not(.stock-table):not(.items-table){
    overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%
  }
  dialog,.record-modal,.modal,.invoice-dialog,.product-dialog,.client-dialog,.settlement-dialog,.settlement-payment-dialog{
    max-width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px)!important
  }
  .modal-body,.dialog-body,.record-modal main{min-height:0;max-width:100%;overflow:auto}
  .modal-footer,.dialog-actions,.record-modal footer,.bottomactions{
    position:sticky;bottom:0;z-index:4;max-width:100%
  }
  .tabs,.subtabs,.price-tabs,.platform-tabs,#platforms{
    max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain
  }
  pre{max-width:100%;overflow:auto}
}

@media(max-width:700px){
  button,.btn,[role="button"],summary{min-height:44px}
  input:not([type="checkbox"]):not([type="radio"]),select,textarea{min-height:44px}
  input[type="checkbox"],input[type="radio"]{min-width:20px;min-height:20px}
  .stock-page,.page,.wrap,.container,.content,.main{padding-left:10px!important;padding-right:10px!important}
  h1{font-size:clamp(22px,7vw,28px);line-height:1.15}
  .page-head,.head,.stock-page>header{gap:10px}
  .toolbar,.stock-toolbar,.filters,.filter-row,.actions,.inline-actions{gap:8px}
  .toolbar button,.stock-toolbar button,.actions button,.inline-actions button{white-space:normal}
  .dialog-actions,.modal-footer,.record-modal footer>div,.bottomactions{gap:8px;flex-wrap:wrap}
  .dialog-actions button,.modal-footer button,.record-modal footer button,.bottomactions button{
    min-width:min(150px,100%);flex:1 1 140px
  }
  /* Any table that does not have a dedicated card layout remains usable through local horizontal scroll. */
  table:not(.stock-table):not(.items-table):not(.autoprice-table){
    max-width:100%
  }
  .paper{max-width:100%!important}
  .paper .items{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

@media(max-width:430px){
  .record-modal main{grid-template-columns:1fr!important}
  .record-modal .shipment-lines tr{grid-template-columns:1fr!important}
  .record-modal .shipment-lines td:first-child{grid-column:auto!important}
  .twocol,.form-grid,.grid.two,.settlement-form-grid,.price-fields{grid-template-columns:1fr!important}
  .stock-list-row{grid-template-columns:1fr!important}
  .warehouse-stats,.stock-summary-grid{grid-template-columns:1fr!important}
  .tabs,.price-tabs{scroll-snap-type:x proximity}
  .tabs>*,.price-tabs>*{scroll-snap-align:start}
}

@media(max-width:430px){
  .info,.add-form,.create-grid{grid-template-columns:1fr!important}
  #savePurchaseBtn,#saveBtn,#postBtn{width:100%;max-width:100%}
}
@media(max-width:700px){
  .paper .items{min-width:680px}
  .modal-footer,.dialog-actions,.record-modal footer,.bottomactions{padding-bottom:max(10px,env(safe-area-inset-bottom))}
}
@media print{body{overflow:visible!important}}

/* Mobile review: preserve the viewport, not merely hide overflowing content. */
@media(max-width:900px){
  .stock-page,.page,.wrap,.container,.content,.main,.analytics-page,.finance-page,.settlement-page{
    box-sizing:border-box;
  }
  dialog,.record-modal,.modal,.mp-profile-popover,#mpAiPanel,#mpSidebar,.mp-filter-grid{box-sizing:border-box}
}
@media(max-width:700px){
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important}
  .order-actions{flex-wrap:wrap}
  .catalog-heading{flex-wrap:wrap;align-items:flex-start}
  .catalog-actions{display:flex;flex-wrap:wrap;gap:8px;max-width:100%}
  .catalog-actions button{flex:1 1 140px;white-space:normal}
  .paper .items{min-width:0}
  .record-modal .record-row{flex-wrap:wrap}
  .record-modal .record-row>span{flex-basis:100%;min-width:0;overflow-wrap:anywhere}
  .record-modal .record-row input{max-width:100%}
  body .mp-profile-popover{top:136px;max-height:calc(100dvh - 148px)}
  #mpAiPanel{padding-bottom:env(safe-area-inset-bottom)}
  #mpAiPanel textarea{font-size:16px}
}