/* Shared screen-only layout. Printed business documents retain their layout. */
.erp-mobile-bar,.erp-mobile-shade,.erp-mobile-close{display:none}
.erp-table-scroll{max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch}
@media screen and (max-width:1024px){
 html{scroll-padding-top:76px}
 body.erp-has-sidebar{padding-top:64px}
 .erp-mobile-bar{display:flex;position:fixed;inset:0 0 auto;z-index:1100;align-items:center;gap:12px;height:64px;padding:8px 16px;background:#142237;color:#fff;box-sizing:border-box;border-bottom:1px solid #344458}
 .erp-mobile-bar button,.erp-mobile-close{min-width:44px;min-height:44px;border:1px solid #53647a;border-radius:8px;background:#22364c;color:white;font:inherit;cursor:pointer}
 .erp-mobile-bar strong{font:700 15px system-ui,sans-serif}
 body .sidebar{display:block!important;position:fixed!important;inset:0 auto 0 0!important;width:min(300px,86vw)!important;min-width:0!important;height:100dvh!important;box-sizing:border-box;z-index:1300!important;transform:translateX(-105%)!important;transition:transform .2s ease;visibility:hidden;padding-top:16px!important}
 body .sidebar.erp-drawer-open{transform:translateX(0)!important;visibility:visible}
 .erp-mobile-close{display:block;margin:0 0 12px auto}
 .erp-mobile-shade:not([hidden]){display:block;position:fixed;inset:0;z-index:1200;background:#101c2ab3;border:0;border-radius:0;padding:0;width:100%;height:100%}
 body.erp-menu-open{overflow:hidden}
 body .layout>.main{margin-left:0!important;width:100%!important;max-width:100%;min-width:0;padding:20px!important;box-sizing:border-box}
 .sidebar :is(.menu-item,.submenu-item,.menu-toggle){min-height:44px;font-size:14px}
 body .layout{min-width:0}
 body :is(.topbar,.gr-header,.page-header,.panel-heading){flex-wrap:wrap;gap:12px}
 body :is(input,select,textarea){font-size:16px!important;max-width:100%;box-sizing:border-box}
 body :is(button,.gr-btn,.button){min-height:44px}
 body .pos-header{flex-wrap:wrap;padding:14px;gap:12px}
 body .pos-header nav{display:flex;flex-wrap:wrap;gap:10px;width:100%;align-items:center}
 body .pos-header nav>a{padding:9px 4px;min-height:44px;box-sizing:border-box}
 body .pos-layout{grid-template-columns:minmax(0,1fr)}
 body .pos-layout>*{min-width:0}
 body :is(.table-wrap,.production-table-wrap,.ops-table-wrap){max-width:100%;-webkit-overflow-scrolling:touch}
 body dialog{box-sizing:border-box;max-width:calc(100vw - 20px);max-height:calc(100dvh - 24px)}
 body .ops-branches{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
}
@media screen and (max-width:640px){
 body .layout>.main{padding:14px!important}
 body :is(.gr-panel,.ops-panel,.panel){padding:16px!important;border-radius:12px}
 body :is(h1,.gr-page-title){font-size:27px!important;line-height:1.2;overflow-wrap:anywhere}
 body :is(.item-grid,.item-summary,.gr-info-grid,.po-summary-grid,.sales-grid,.pw-information-grid){grid-template-columns:minmax(0,1fr)!important}
 body :is(.gr-actions,.actions,.production-filter,.ops-filters){gap:10px;flex-wrap:wrap}
 body .ops-filters>div{min-width:0;flex-basis:100%}
 body .ops-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
 body .ops-card{min-width:0;padding:13px;overflow-wrap:anywhere}
 body .ops-card small{font-size:11px}
 body .ops-panel-heading{display:block}
 body .pos-header .brand{font-size:17px;white-space:normal}
 body main:not(.main){padding:12px}
 body .floor{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 body .table-tile{padding:14px;min-width:0}
 body .table-tile h2{font-size:22px}
 body .products{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 body .product-card :is(img,.product-art){height:110px}
 body .tabs{flex-wrap:wrap;gap:8px}
 body .ticket-grid{grid-template-columns:minmax(0,1fr)}
 body .row{flex-wrap:wrap}
 body .bill-preview-body{grid-template-columns:minmax(0,1fr);padding:12px}
 body #pos-bill-preview>:is(header,footer){padding:12px;flex-wrap:wrap}
 body .dialog-header,body .dialog-body{padding:14px}
 body .dialog-footer{padding:12px;flex-wrap:wrap}
 /* Component rows become labelled cards without changing input names or IDs. */
 body table.erp-component-table{min-width:0!important;width:100%!important;display:block}
 .erp-component-table>thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .erp-component-table>tbody{display:block;width:100%}
 .erp-component-table>tbody>tr{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:12px;border-bottom:1px solid #dbe4ed;padding:16px 0;align-items:start}
 .erp-component-table>tbody>tr>td{display:block!important;min-width:0!important;width:auto!important;white-space:normal!important;padding:0!important;border:0!important}
 .erp-component-table>tbody>tr>td:first-child{grid-column:1/-1}
 .erp-component-table>tbody>tr>td::before{content:attr(data-mobile-label);display:block;font-size:12px;font-weight:700;color:#64758b;margin-bottom:6px}
 .erp-component-table :is(input,select){width:100%!important;min-width:0!important}
 .erp-component-table [role=listbox]{max-width:100%;box-sizing:border-box}
}
@media (prefers-reduced-motion:reduce){body .sidebar{transition:none!important}}
@media print{.erp-mobile-bar,.erp-mobile-shade,.erp-mobile-close{display:none!important}.erp-table-scroll{overflow:visible}body.erp-has-sidebar{padding-top:0}}