/* Shared responsive layer. No data, pricing or site-linking behavior lives here. */
.main,.content,.pg,.gc,.gc-sm,.stl,.stp,.fr2,.fr3,.cr,.ai-split,
.pos-left,.pos-cart-box,.filterbar,.fsearch{min-width:0}
.content{min-height:0;overscroll-behavior-y:contain}
.tw,.tbl-wrap{max-width:100%;overscroll-behavior-x:contain}
.fr2,.fr3,.cr,.sg,.pnlgrid{grid-auto-columns:minmax(0,1fr)}
.fr2>*,.fr3>*,.cr>*,.sg>*,.stl>*,.ai-split>*{min-width:0}
.ocr-field{display:contents}
.ocr-field-label{display:none}
.notifpanel{max-width:calc(100vw - 24px)}
.pta>div{min-width:0;max-width:100%;flex-wrap:wrap}

@media screen and (max-width:1100px){
  /* A fixed 360px rail leaves an unusably narrow editor beside the sidebar. */
  .ai-split{grid-template-columns:minmax(0,1fr)!important}
  .repgrid{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
  .recgrid,.insgrid,.wgrid{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
}

@media screen and (max-width:800px){
  .app,.main,.sidebar{height:100dvh}
  .main{width:100%;min-width:0}
  .content{padding:14px}
  .stnav{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:6px;max-width:100%;overscroll-behavior-x:contain}
  .stni{flex:0 0 auto;white-space:nowrap;min-height:44px}
  .stp{padding:16px;min-width:0}
  .sidebar .ni,.sb-close{min-height:44px}
  .mclose,.sb-close,#ocr-manual-area>div>button{min-width:44px;min-height:44px}
  .chip{min-height:44px;display:inline-flex;align-items:center}
  .hdr .bic{width:44px;height:44px}
  .srch{height:44px}
  .srch input{font-size:16px;min-width:0}
  .fc,.auth-inp{font-size:16px!important;min-height:44px;max-width:100%}
  .btn,.btn-sm,.btn-ico,.topbar-out{min-height:44px;max-width:100%;white-space:normal}
  .btn .mi{flex-shrink:0}
  .modal-bg{padding:12px}
  .modal{width:100%!important;max-width:min(720px,calc(100vw - 24px))!important;max-height:calc(100dvh - 24px)}
  .mfoot{flex-wrap:wrap;gap:8px}
  .mfoot .btn{flex:1 1 auto;justify-content:center}
  .permhead,.permrow{min-width:460px}
  .pta>div{min-width:0;max-width:100%;flex-wrap:wrap}
  .filterbar .fc{max-width:none}
  .warehouse-actions{flex-wrap:wrap}
  .warehouse-actions .btn{min-width:44px}
  .catrow{flex-wrap:wrap;padding-inline-start:min(var(--category-indent,10px),32px)!important}
  .catrow .catname{min-width:0;flex:1 1 calc(100% - 44px);overflow-wrap:anywhere}
  .catrow .btn{min-width:44px;justify-content:center}
  .pos-close{padding-bottom:max(10px,env(safe-area-inset-bottom))}
  #pos-mini-bar{bottom:max(12px,env(safe-area-inset-bottom))}
  /* Invoice item fields remain readable instead of squeezing the name to 60px. */
  .ocr-items-head{display:none!important}
  .ocr-item-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px!important;align-items:end!important;gap:10px!important;margin-bottom:12px}
  .ocr-item-row>:first-child{grid-column:1/-1}
  .ocr-field{display:flex;flex-direction:column;min-width:0;gap:4px}
  .ocr-field-label{display:block;font-size:11px;color:var(--txtm)}
  .ocr-item-row>button{min-width:44px;min-height:44px}
}

@media screen and (max-width:560px){
  .content{padding:12px}
  .pg [style*="grid-template-columns"]:not(.sg):not(.ocr-item-row):not(.ocr-items-head):not(#posProducts),
  .modal [style*="grid-template-columns"]:not(.check-row){grid-template-columns:minmax(0,1fr)!important}
  .check-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  .check-row>.btn{justify-self:end;min-width:44px}
  .stp{padding:14px}
  .akr{flex-wrap:wrap;align-items:flex-start}
  .akr>div[style*="flex:1"]{flex:1 1 calc(100% - 64px)!important;min-width:0;overflow-wrap:anywhere}
  .akr .ts{flex-shrink:0;align-self:center}
  .pg .filterbar .fsearch{flex-basis:100%}
  .filterbar select{flex:1 1 140px;min-width:0}
  .content [style*="display:flex"],.content [style*="display: flex"],
  .modal [style*="display:flex"],.modal [style*="display: flex"]{max-width:100%}
  .gc p,.gc-sm p,.stp p,.auth-hint,.banner,.la,.lm{overflow-wrap:anywhere}
  .sc{padding:14px}
  .sv{font-size:18px;overflow-wrap:anywhere}
  .pactions{flex-wrap:wrap}
  .pactions .btn{min-width:44px;min-height:44px}
  .pname{overflow-wrap:anywhere}
  .mhdr,.mbody{padding-left:14px;padding-right:14px}
  .mfoot .btn{flex:1 1 100%}
  .auth-card{padding:26px 18px}
  #auth-screen{min-height:100dvh;align-items:flex-start}
  .auth-card{margin:auto}
  .container,.card{min-width:0}
  .tbl-wrap table{min-width:640px}
  .card-tools .search-inp{min-width:0;flex-basis:100%;font-size:16px;min-height:44px}
}

@media screen and (max-width:480px){
  .pgrid{grid-template-columns:minmax(0,1fr)}
  .pimg{aspect-ratio:auto;height:180px}
  .pimg img{object-fit:contain}
  .hdr{gap:6px;padding-inline:8px}
  .srch{padding-inline:6px}
  .topbar-logo{flex-basis:100%}
  .card-tools .btn{flex:1 1 auto}
}

@media screen and (max-height:500px) and (max-width:800px){
  .modal{max-height:calc(100dvh - 16px)}
  .modal-bg{padding:8px}
  .pos-cart-box{max-height:94dvh}
}

/* Short desktop/landscape screens need the entire checkout to scroll. */
@media screen and (min-width:801px) and (max-height:700px){
  .pos-cart-box{min-height:0;overflow-y:auto;overscroll-behavior-y:contain}
  .pos-cart-box>.cart-items{flex:none;min-height:80px;overflow:visible}
  .pos-cart-box>div{flex-shrink:0}
}

@media (prefers-reduced-motion:reduce){
  .sidebar,.main,.modal,.pos-cart-box{transition:none}
}