/* Shared phone, tablet and desktop layout adjustments. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-wrap:break-word}
button,input,select,textarea,a{-webkit-tap-highlight-color:transparent}
button{touch-action:manipulation;min-height:44px}
.workspace,.content,.panel,.metric,.grid>*,.title-row>*,.product-summary{min-width:0}
.title-row,.topbar,.member,.modal-head,.modal-footer,.line,.readiness-heading{overflow-wrap:anywhere}
.title-row .actions{flex-shrink:0}
.table-wrap{max-width:100%;overscroll-behavior-x:contain}
.product-name img{flex-shrink:0}
.product-name>div{min-width:0;overflow-wrap:anywhere}
.sidebar{height:100dvh;overflow-y:auto}
dialog{max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain}
.modal-head h2{min-width:0;overflow-wrap:anywhere}
.modal-head button{flex-shrink:0}
.modal-body input,.modal-body select,.modal-body textarea{width:100%;max-width:100%}
.scan-video{display:block;max-height:50dvh;object-fit:contain}
.auth-wrap{min-height:100dvh}
.auth{min-width:0}
.auth input{width:100%}
#toast{bottom:max(16px,env(safe-area-inset-bottom));overflow-wrap:anywhere}
@media(max-width:1100px) and (min-width:761px){
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .title-row{flex-wrap:wrap}
  .toolbar input{flex:1 1 100%}
  .toolbar select{flex:1 1 180px;max-width:100%}
}
@media(max-width:760px){
  .sidebar{height:auto;overflow:visible;padding-top:max(18px,env(safe-area-inset-top))}
  .sidebar .nav{max-width:100%;overscroll-behavior-x:contain}
  .sidebar .nav button{flex-shrink:0}
  .topbar{align-items:flex-start}
  .topbar .badge{max-width:100%;white-space:normal}
  .mobile-shop{flex:1;max-width:100%;min-width:0}
  .content{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  input,select,textarea{font-size:16px}
  .title-row .actions{width:100%;flex-shrink:1}
  .title-row .actions button{flex:1 1 140px;white-space:normal}
  .toolbar input{min-width:0;width:100%}
  .toolbar select{min-width:0;flex:1 1 120px;max-width:100%}
  .grid{grid-template-columns:minmax(0,1fr)}
  .readiness-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .readiness-filters button{overflow-wrap:anywhere;white-space:normal}
  .metric{min-width:0;padding:12px}
  .metric small,.metric span{overflow-wrap:anywhere}
  .metric b{font-size:27px}
  .pagination{flex-wrap:wrap}
  .section .actions{flex-direction:column}
  .section .actions>*{width:100%;text-align:center}
  .member{flex-wrap:wrap}
  .modal-footer{position:static}
  .modal-footer .actions{margin-left:0;flex:1}
  .modal-footer button{flex:1}
  .auth-wrap{padding:16px}
  .auth{padding:22px}
}
@media(max-width:600px){
  #product-table .table-wrap{overflow:visible}
  #product-table table,#product-table tbody{display:block;width:100%;white-space:normal}
  #product-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  #product-table tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:16px;border-top:1px solid #dce5df}
  #product-table td{display:block;min-width:0;border:0;padding:0;font-size:13px;white-space:normal;overflow-wrap:anywhere;text-align:left}
  #product-table td:first-child{grid-column:1/-1}
  #product-table td:not(:first-child):not(:last-child)::before{content:attr(data-label);display:block;font:11px Arial,sans-serif;color:#65796e;margin-bottom:6px}
  #product-table td:last-child{grid-column:1/-1}
  #product-table td:last-child button{width:100%}
  #product-table .product-name{min-width:0;max-width:none;width:100%;gap:12px}
  #product-table .product-name img{width:54px;height:64px}
  #product-table .product-name b{font-size:14px}
  #product-table .product-name small{font-size:12px}
  #product-table .price{font-size:16px}
}
/* Customer camera and product view. */
.product-card,.scanner-heading,.input-line,.descriptions-three{min-width:0}
.product-card>*{min-width:0}
.product-card h2,.attribute{overflow-wrap:anywhere}
#barcode-form{min-width:0}
@media(max-width:760px){
  header{padding-top:max(16px,env(safe-area-inset-top))}
  .scanner-heading{flex-wrap:wrap}
  .has-product #scanner{flex-wrap:wrap}
  .has-product #barcode-form{flex:1 1 140px}
  .has-product .product-card{grid-template-columns:minmax(0,100px) minmax(0,1fr)}
  .detail-heading{flex-wrap:wrap}
  .descriptions-three{grid-template-columns:minmax(0,1fr)}
  footer{flex-wrap:wrap;padding-bottom:max(16px,env(safe-area-inset-bottom))}
}
@media(max-width:360px){
  .readiness-filters{grid-template-columns:minmax(0,1fr)}
  .has-product .product-card{grid-template-columns:minmax(0,1fr)}
  .has-product .picture,.has-product .product-summary,.has-product .details{grid-column:1}
  .has-product .product-image{height:140px}
}

/* Camera stays large while scanning, including after a product is found. */
#camera-area{margin-top:18px}
.scan-video{width:100%;height:min(56dvh,520px);max-height:none;object-fit:contain;background:#102219;min-height:260px}
.camera-tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:12px 0}
.camera-tools label{display:flex;align-items:center;gap:12px;flex:1 1 180px}
.camera-tools input[type=range]{padding:0;min-height:44px;min-width:100px;flex:1}
.camera-tools button{min-height:44px}
.camera-hint{font-size:14px;line-height:1.6;color:#425d4c}
#camera-retry,#restart-camera{min-height:44px;margin:10px 0}
#camera-box,.has-product #camera-box{width:100%;max-width:850px;flex:1 1 100%;margin:0 auto 18px;position:static}
#camera-box video,.has-product #camera-box video{display:block;width:100%;height:min(52dvh,480px);min-height:250px;max-height:none;object-fit:contain;background:#102219}
.has-product #scanner{flex-wrap:wrap}
.has-product #camera-box p{display:block;font-size:14px}
#flip-camera,.has-product #flip-camera{position:static;font-size:14px;padding:10px 16px;min-height:44px}
@media(max-width:760px){
  .scan-video{height:52dvh;min-height:240px}
  #camera-box video,.has-product #camera-box video{height:48dvh;min-height:240px}
}
@media(max-height:500px) and (orientation:landscape){
  .scan-video,#camera-box video,.has-product #camera-box video{height:62dvh;min-height:150px}
}