/* Final touch layout: keep desktop density, improve phones and tablets. */
@media screen and (max-width:1024px){
 html body dialog[open]{max-width:calc(100vw - 12px);max-height:calc(100dvh - 12px);box-sizing:border-box;scroll-padding-block:90px 32px;padding-bottom:max(16px,env(safe-area-inset-bottom))}
 html body dialog :is(fieldset,label,.so-fields,.form-grid,.panel-head){min-width:0}
 html body dialog :is(input:not([type=checkbox]):not([type=radio]),select,textarea){font-size:16px;line-height:1.4;min-height:44px;max-width:100%;box-sizing:border-box}
 html body dialog button{min-height:44px;line-height:1.35;max-width:100%;white-space:normal}
 html body dialog :is(input[type=checkbox],input[type=radio]){min-width:18px;min-height:18px;flex-shrink:0}
 html body dialog :is(.detail-head,.dialog-head){gap:8px;align-items:center}
 html body dialog :is(.detail-head,.dialog-head) :is(h1,h2,h3){font-size:18px;line-height:1.35}
 html body dialog .table-wrap{max-width:100%;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
 html body dialog :is(input,select,textarea,button){scroll-margin-block:90px 40px}
 .accounting-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}
 .accounting-filters label{min-width:0}.accounting-filters :is(input,select){width:100%;min-width:0}
 .accounting-tabs{gap:6px}.accounting-tabs button{flex:1 1 160px}
 .accounting-panel :is(td,th){font-size:14px;line-height:1.5}.accounting-notice{font-size:14px}
 #purchase-order-items [data-po-grid] :is(input,select){font-size:16px;min-height:44px}
 #purchase-order-items .po-grid-actions button{min-height:44px;font-size:13px}
 .po-grid-tabs button{flex:1;min-height:44px}
}
@media screen and (max-width:600px){
 html body dialog[open]{max-width:calc(100vw - 8px);max-height:calc(100dvh - 8px);padding-inline:12px;border-radius:10px}
 html body dialog :is(.detail-head,.dialog-head){padding-block:8px}
 html body dialog :is(.detail-head,.dialog-head)>:is(h1,h2,h3){font-size:17px}
 html body dialog .dialog-actions{gap:8px;flex-wrap:wrap}
 html body dialog .dialog-actions>button{flex:1 1 120px;min-width:0}
 .accounting-filters{grid-template-columns:minmax(0,1fr)}
 .accounting-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
 .accounting-tabs button{padding:10px 6px;font-size:13px}
 .accounting-pages{justify-content:space-between}
 .accounting-panel .accounting-tools{align-items:stretch}
 .accounting-panel .accounting-tools input{font-size:16px;min-height:44px}
 .po-grid-detail{padding:10px}.po-grid-tabs{gap:6px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}
/* Main workspaces use the full mobile/tablet screen; confirmations stay compact. */
@media screen and (max-width:1024px),screen and (max-width:1366px) and (pointer:coarse){
 html body :is(#module-window,#all-records-dialog,#record-all-dialog,#entry-dialog,#order-dialog,#product-dialog,#supply-dialog,#so-dialog,#catalog-dialog,#loan-list-dialog,#loan-receive-list-dialog,#loan-dialog,#loan-receive-dialog,#purchase-receipt-dialog,#photo-ref-dialog,#photo-ref-gallery)[open]{position:fixed!important;inset:0!important;margin:0!important;transform:none!important;translate:none!important;width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;border:0!important;border-radius:0!important;padding:10px max(10px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));overflow:auto;box-sizing:border-box}
 html body dialog :is(.loan-content,.loan-receive-content,.record-all-content){width:100%;max-width:100%;min-width:0;box-sizing:border-box;padding-inline:0}
 html body dialog :is(.table-wrap,.po-grid-scroll){min-width:0;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
 html body dialog :is(.detail-head,.dialog-head){top:0;gap:6px;padding-block:8px}
 html body dialog :is(input:not([type=checkbox]):not([type=radio]),select,textarea){font-size:16px;min-height:44px}
 html body dialog button{min-height:44px}
 #all-records-filters .debt-filters,#loan-filters,#loan-receive-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px;align-items:end;margin:12px 0}
 #all-records-filters .debt-filters :is(input,select,button),#loan-filters :is(input,select,button),#loan-receive-filters :is(input,select,button){min-width:0;width:100%;min-height:44px;height:auto;box-sizing:border-box}
 #all-records-filters .debt-filters label,#loan-filters label,#loan-receive-filters label{font-size:12px;min-width:0}
 .loan-list-primary-actions{margin:8px 0 12px}
 html body dialog .table-wrap td{line-height:1.5}
}
@media screen and (max-width:600px){
 #all-records-filters .debt-filters,#loan-filters,#loan-receive-filters{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 html body dialog :is(.panel,.po-header-block){padding:10px}
}
@media screen and (max-width:359px){#all-records-filters .debt-filters,#loan-filters,#loan-receive-filters{grid-template-columns:minmax(0,1fr)!important}}

@media screen and (max-width:1024px),screen and (max-width:1366px) and (pointer:coarse){
 html #all-records-filters .debt-filters>*,html #loan-filters>*,html #loan-receive-filters>*{grid-column:auto!important}
}
@media screen and (min-width:360px) and (max-width:600px){html #all-records-filters label:has(input[type=search]),html #loan-filters label:has(input[type=search]),html #loan-receive-filters label:has(input[type=search]){grid-column:1/-1!important}}

/* Photo workspaces share the full-screen touch layout. */
@media screen and (max-width:1024px),screen and (max-width:1366px) and (pointer:coarse){
 html #photo-ref-form,html #photo-ref-gallery .photo-ref-gallery-content{padding:0;min-width:0;max-width:100%;box-sizing:border-box}
 html #photo-ref-gallery .product-search-label{display:block;width:100%;max-width:100%}
 html #photo-ref-gallery #photo-ref-search{width:100%;max-width:100%;box-sizing:border-box}
 html #photo-ref-gallery .photo-ref-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
 html #photo-ref-gallery .photo-ref-card{padding:10px;gap:6px;min-width:0}
 html #photo-ref-gallery .photo-ref-card img{height:clamp(140px,20vw,220px);object-fit:contain}
 html #photo-ref-dialog .photo-ref-slots{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
 html :is(#photo-ref-gallery,#photo-ref-dialog) .detail-head{align-items:center;gap:8px}
 html :is(#photo-ref-gallery,#photo-ref-dialog) .detail-head>h2{margin:0;flex:1 1 auto}
 html #photo-ref-gallery .photo-ref-pagination{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding-block:12px}
}
@media screen and (max-width:900px){
 html #photo-ref-gallery .photo-ref-cards,html #photo-ref-dialog .photo-ref-slots{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media screen and (max-width:479px){
 html #photo-ref-gallery .photo-ref-cards,html #photo-ref-dialog .photo-ref-slots{grid-template-columns:minmax(0,1fr)}
 html #photo-ref-gallery .photo-ref-card img{height:190px}
 html #photo-ref-dialog .photo-ref-lookup{flex-wrap:wrap}
 html #photo-ref-dialog .photo-ref-lookup input{flex:1 1 160px;min-width:0}
}