/* Vault POS responsive layer
 * Keeps the legacy trade-counter desktop layout intact while adapting the
 * same workflow for tablets and phones. No tenant-specific values are baked in.
 */

html{min-width:0;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-width:0;min-height:100dvh}
button,input,select{font:inherit}
#MESSAGE_BOX:not(:empty){position:fixed;top:max(8px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:1000;max-width:min(92vw,680px);padding:10px 14px;background:#fff;border:1px solid #999;box-shadow:0 3px 14px #0004}
.body_container{max-width:1000px}
.tab,.sub_container_payment,.sub_container_order,.sub_container_refund,.container_paymentmethod{min-width:0}
.wrapper_order_table,.wrapper_table_td,.results{min-width:0}
pre{max-width:100%;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}

@media (max-width:760px){
  button,.btn_confirm{min-height:44px;touch-action:manipulation}
  input,select{min-height:44px;max-width:100%;font-size:16px}
  body{background:#eee;padding-bottom:env(safe-area-inset-bottom)}
  .body_container{width:100%;margin:0;border:0;min-height:100dvh;background:#f4f4f4}

  .container_header{height:auto;min-height:76px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"brand who cancel" "login login login";gap:8px 10px;align-items:center;padding:8px max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left))}
  .brandmark{grid-area:brand;width:auto;min-width:86px;max-width:128px;height:44px;margin:0;padding:0 10px;text-align:center}
  .container_who{grid-area:who;width:auto;min-width:0;margin:0;line-height:1.3;overflow-wrap:anywhere}
  .container_needhelp_cancelorder{grid-area:cancel;margin:0}
  .container_needhelp_cancelorder button{padding-inline:10px}
  .container_logindetails{grid-area:login;display:flex;align-items:center;gap:8px;flex-wrap:wrap;text-align:left;margin:0;font-size:12px}
  .container_logindetails br{display:none}
  .container_logindetails #logoutButton{margin-left:auto;min-height:36px;padding:6px 10px}

  .login_screen{width:auto;max-width:440px;margin:24px auto;padding:18px;border-radius:8px;box-shadow:0 2px 8px #0002}
  .login_screen button{width:100%}

  .body_subcontainer{display:flex;flex-direction:column;min-height:0}
  .container_leftnav{order:0;position:sticky;top:0;z-index:30;display:flex;width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;background:#555;border-bottom:1px solid #444;box-shadow:0 2px 7px #0002}
  .container_leftnav::-webkit-scrollbar{display:none}
  .container_leftnav li{flex:0 0 auto}
  .container_leftnav li a{display:flex;align-items:center;justify-content:center;min-width:82px;min-height:50px;padding:8px 10px;border:0;border-right:1px solid #444;white-space:nowrap;font-size:12px}
  .tab{order:1;width:100%;padding:12px max(12px,env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));overflow:visible}
  .tab h1{font-size:22px}

  .sub_container_payment,.sub_container_order,.sub_container_refund{min-height:0;padding:12px;border-radius:6px}
  .sub_container_who{display:flex;flex-direction:column;gap:10px}
  .container_formfields,.container_formfields_col2_searchCustomer{width:100%;grid-template-columns:minmax(95px,32%) minmax(0,1fr);gap:2px 6px}
  .container_formfields input,.container_formfields select,.container_formfields_col2_searchCustomer input,.container_formfields_col2_searchCustomer select{width:100%;margin:3px 0}
  .action_stack{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:8px}
  .action_stack button:last-child{grid-column:1/-1}
  .results{max-height:none}
  .result-row{min-height:48px;padding:10px}

  .product_entry{position:sticky;top:51px;z-index:20;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 -4px 10px;padding:8px 4px;background:#eee;box-shadow:0 4px 6px #0001}
  .product_entry input{grid-column:1/-1;width:100%;margin:0;font-size:16px}
  .product_entry button{width:100%}
  .containter_table_th{display:none}
  .wrapper_table_td{min-height:120px;border:0;background:transparent}
  .order-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 12px;margin:0 0 10px;padding:12px;border:1px solid #bbb;border-radius:7px;background:#fff;box-shadow:0 1px 3px #0001}
  .order-row:nth-child(even){background:#fff}
  .order-row span{display:block!important;min-width:0;overflow-wrap:anywhere}
  .order-row span::before{display:block;margin-bottom:2px;color:#666;font-size:10px;font-weight:bold;text-transform:uppercase;letter-spacing:.03em}
  .order-row span:nth-child(1)::before{content:"Part"}
  .order-row span:nth-child(2)::before{content:"Qty"}
  .order-row span:nth-child(3)::before{content:"Available"}
  .order-row span:nth-child(4){grid-column:1/-1;font-size:15px;font-weight:bold}
  .order-row span:nth-child(4)::before{content:"Description";font-weight:bold}
  .order-row span:nth-child(5)::before{content:"Store stock"}
  .order-row span:nth-child(6)::before{content:"Pack"}
  .order-row span:nth-child(7)::before{content:"Line total"}
  .order-row input[data-qty]{width:72px;min-height:40px;margin:0;font-size:16px}
  .order-row button{align-self:end;justify-self:end;min-width:48px}
  .container_total_item_price{position:sticky;bottom:0;z-index:10;gap:8px;padding:10px 12px;box-shadow:0 -2px 7px #0002}
  .container_total_item_price h2{margin:0;font-size:17px}
  .current_selection_instock{position:static;right:auto;top:auto;width:auto;margin:10px 0;border-radius:6px}
  .recommendations{border-radius:6px}
  .recommendation{align-items:center;gap:8px}
  .recommendation button{flex:0 0 auto}

  .container_ordersummary{border-radius:6px}
  .container_ordersummary h2{font-size:19px}
  .container_remainingbalance_changedue{display:grid;grid-template-columns:1fr;gap:6px;font-size:17px;border-radius:5px}
  .container_paymentmethod .container_formfields{grid-template-columns:minmax(80px,28%) minmax(0,1fr)}
  .container_amount_btn{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:10px 0}
  .container_amount_btn button{width:100%;margin:0;padding:10px 5px;font-size:17px}
  #confirm_button_link{width:100%;min-height:52px;font-size:16px}
  .continuation button{width:100%;margin-top:8px}

  #tabs-4>input,#tabs-5>input{width:calc(100% - 95px);margin-left:0}
  #tabs-4>button,#tabs-5>button{min-width:88px}
  .stock-row{display:grid;grid-template-columns:1fr auto;gap:5px 10px;margin-bottom:8px;padding:12px;border:1px solid #ccc;border-radius:7px;background:#fff}
  .stock-row>*{min-width:0;overflow-wrap:anywhere}
  .stock-row button{grid-column:1/-1;width:100%}
  .container_manager button{width:100%;margin:0 0 8px}
}

@media (max-width:480px){
  .container_header{grid-template-columns:minmax(78px,auto) minmax(0,1fr);grid-template-areas:"brand cancel" "who who" "login login"}
  .container_needhelp_cancelorder{justify-self:end}
  .container_who{font-size:12px}
  .container_leftnav li a{min-width:76px;font-size:11px}
  .tab{padding-inline:10px}
  .tab h1{font-size:20px}
  .container_formfields,.container_formfields_col2_searchCustomer,.container_paymentmethod .container_formfields{display:block}
  .container_formfields label,.container_formfields_col2_searchCustomer label{display:block;margin:8px 0 0;color:#555;font-weight:bold}
  .container_formfields input,.container_formfields select,.container_formfields_col2_searchCustomer input,.container_formfields_col2_searchCustomer select{display:block;width:100%;margin:2px 0 6px}
  .action_stack{grid-template-columns:1fr}
  .action_stack button:last-child{grid-column:auto}
  .order-row{grid-template-columns:1fr 1fr}
  .order-row span:nth-child(4){grid-column:1/-1}
  .container_total_item_price{align-items:center}
  .container_total_item_price h2{font-size:15px}
  .container_amount_btn{grid-template-columns:1fr 1fr}
  #tabs-4>input,#tabs-5>input{width:100%;margin:0 0 6px}
  #tabs-4>button,#tabs-5>button{width:100%}
}

@media (max-width:360px){
  .container_header{padding-inline:7px}
  .brandmark{min-width:72px;padding-inline:6px}
  .container_leftnav li a{min-width:70px}
  .order-row{grid-template-columns:1fr}
  .order-row span:nth-child(4){grid-column:auto}
  .container_total_item_price{display:block;text-align:center}
  .container_total_item_price h2+ h2{margin-top:4px}
}

@media (orientation:landscape) and (max-height:500px) and (max-width:900px){
  .container_header{padding-block:5px}
  .brandmark{height:38px}
  .container_leftnav li a{min-height:44px}
  .product_entry{top:45px}
}