/* Keep modal navigation visible while the phone scrolls the content. */
.mobile-primary{display:none}
@media screen and (max-width:800px){
  .login-card :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){font-size:16px}
  .shell>.ouke-toolbar,.shell>.ouke-status{display:none}
  .shell>.sidebar{top:110px;bottom:12px}
  .mobile-primary{display:flex;gap:5px;position:sticky;top:0;z-index:20;background:#fff;padding:8px 0}
  .mobile-primary button{flex:1;min-width:0;min-height:44px;padding:8px 4px;font-size:12px;white-space:normal}
  .topbar .mobile-menu,.topbar .crumb-home,.topbar .crumb-root,.topbar .top-right>.avatar{display:none}
  .workspace,.hub-mode .workspace{padding-top:10px}
  .page-head>.actions{min-width:0;max-width:100%;flex-wrap:wrap}
  .wholesale-window{min-width:0}
  .wholesale-title,.wholesale-heading>label,.wholesale-meta label:last-child{display:none}
  .wholesale-heading.panel-head{padding:12px;flex-wrap:wrap}
  .wholesale-heading h1{font-size:21px}
  .wholesale-tools button:is([data-action="wholesale-export"],[data-action="import-sales-orders"],[data-action="return-from-new"],[data-action="wholesale-batch-discount"],[data-action="wholesale-add"]){display:none}
  .wholesale-tools,.wholesale-meta,.wholesale-entry,.wholesale-footer{padding:10px;gap:8px;flex-wrap:wrap}
  .wholesale-entry label{flex-basis:100%}
  .wholesale-entry input{width:100%;min-width:0;flex:1 1 100%}
  .wholesale-entry .product-stock-entry{flex:1 1 100%;width:100%}
  .wholesale-entry .product-stock-entry>input{width:100%;flex:1 1 100%}
  .wholesale-entry button,.wholesale-tools button,.wholesale-bottom button{min-height:44px}
  .wholesale-entry-empty{display:none!important}
  .wholesale-bottom{gap:8px;flex-wrap:wrap}
  .wholesale-bottom textarea{min-width:0;flex-basis:100%}
  .wholesale-bottom [data-action="confirm-order"]{flex:1}
}
@media screen and (max-width:800px){
  :is(#modal,#temporary-sales-dialog)[open]{display:flex;flex-direction:column;width:calc(100% - 16px);max-width:calc(100% - 16px);max-height:calc(100dvh - 16px);overflow:hidden}
  :is(#modal,#temporary-sales-dialog) .modal-head{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;padding:12px;flex:none}
  :is(#modal,#temporary-sales-dialog) .modal-head h2{grid-column:1/-1;grid-row:2;overflow-wrap:anywhere;line-height:1.5}
  :is(#modal,#temporary-sales-dialog) .modal-head :is(.modal-back,[data-action="temporary-sale-close"]:first-child){grid-column:1;grid-row:1;flex-basis:auto;justify-content:flex-start;padding:8px}
  :is(#modal,#temporary-sales-dialog) .modal-head .modal-language{grid-column:2;grid-row:1;width:108px;max-width:100%;margin:0}
  :is(#modal,#temporary-sales-dialog) .modal-head :is([data-action="close-modal"],[data-action="temporary-sale-close"]:last-child){grid-column:3;grid-row:1;padding:8px}
  #temporary-sales-dialog>.panel-body{flex:none;padding:10px 12px}
  :is(#modal,#temporary-sales-dialog) .modal-body{min-height:0;min-width:0;max-height:none;overflow:auto;overscroll-behavior:contain;padding:12px}
  :is(#modal,#temporary-sales-dialog) .modal-footer{flex:none;gap:8px;padding:10px 12px}
  :is(#modal,#temporary-sales-dialog) .field,:is(#modal,#temporary-sales-dialog) .form-grid>*{min-width:0}
  :is(#modal,#temporary-sales-dialog) input,:is(#modal,#temporary-sales-dialog) select,:is(#modal,#temporary-sales-dialog) textarea{min-width:0;max-width:100%}
  :is(#modal,#temporary-sales-dialog) .chain-card span,:is(#modal,#temporary-sales-dialog) .chain-card strong{white-space:normal;overflow-wrap:anywhere}
  :is(#modal,#temporary-sales-dialog) .chain-card strong{font-size:1rem}
  :is(#modal,#temporary-sales-dialog) .modal-head button,:is(#modal,#temporary-sales-dialog) .modal-footer button,#sale-checkout-form button,.wholesale-entry button,.wholesale-bottom button{min-height:44px}
  .wholesale-meta label{max-width:100%;flex-wrap:wrap}
  .wholesale-meta input,.wholesale-meta select{min-width:0;max-width:100%}
}
/* Phone sales rows keep warehouse, quantity and actions in the same card. */
@media screen and (max-width:600px){
  :is(#modal,#temporary-sales-dialog) .form-grid{grid-template-columns:minmax(0,1fr)}
  :is(#content,#temporary-sales-dialog) .wholesale-grid{min-height:0;max-height:none}
  :is(#content,#temporary-sales-dialog) .wholesale-grid table{min-width:0}
  :is(#content,#temporary-sales-dialog) .wholesale-grid thead,table:has([data-action="temporary-restore"]) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  :is(#content,#temporary-sales-dialog) .wholesale-grid tbody,:is(#content,#temporary-sales-dialog) .wholesale-grid tfoot,table:has([data-action="temporary-restore"]) tbody{display:block}
  :is(#content,#temporary-sales-dialog) .wholesale-grid tbody tr,table:has([data-action="temporary-restore"]) tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px;border-bottom:1px solid var(--line)}
  :is(#content,#temporary-sales-dialog) .wholesale-grid td,table:has([data-action="temporary-restore"]) td{display:block;min-width:0;padding:0;border:0;white-space:normal;overflow-wrap:anywhere}
  :is(#content,#temporary-sales-dialog) .wholesale-grid td:empty{display:none}
  :is(#content,#temporary-sales-dialog) .wholesale-grid td:nth-child(3),:is(#content,#temporary-sales-dialog) .wholesale-grid td:nth-child(4),:is(#content,#temporary-sales-dialog) .wholesale-grid td:nth-child(9),:is(#content,#temporary-sales-dialog) .wholesale-grid td:nth-child(10){grid-column:1/-1}
  :is(#content,#temporary-sales-dialog) .wholesale-grid td:nth-child(n+4):not(:last-child)::before{display:block;color:var(--muted);font-size:12px;margin-bottom:4px}
  :is(#content,#temporary-sales-dialog) .wholesale-grid td:nth-child(n+4):not(:last-child)::before{content:attr(data-mobile-label)}
  :is(#content,#temporary-sales-dialog) .wholesale-grid select{width:100%;min-width:0;max-width:100%}
  :is(#content,#temporary-sales-dialog) .wholesale-grid button:not(.chain-link){min-height:44px}
  :is(#content,#temporary-sales-dialog) .wholesale-grid .wholesale-quantity-entry input{height:44px}
  :is(#content,#temporary-sales-dialog) .wholesale-grid tfoot{position:static;padding:12px}
  :is(#content,#temporary-sales-dialog) .wholesale-grid tfoot tr{display:flex;flex-wrap:wrap;gap:8px}
  :is(#content,#temporary-sales-dialog) .wholesale-grid tfoot td::before{content:none}
  .wholesale-bottom textarea{flex-basis:100%;min-width:0}
  table:has([data-action="temporary-restore"]){min-width:0;width:100%}
  table:has([data-action="temporary-restore"]) td:nth-child(-n+2){grid-column:1/-1}
  table:has([data-action="temporary-restore"]) td:nth-child(2){display:flex;flex-wrap:wrap;gap:8px}
  table:has([data-action="temporary-restore"]) td:nth-child(2) button{min-height:44px}
}