/* Shared responsive layout. Screen rules do not change printed receipts. */
@media screen {
 .main-content,.page-content,.card,.card-body{min-width:0}
 .page-content img,.page-content video,.page-content canvas{max-width:100%}
 .page-content .table-responsive{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
 .page-content .table-responsive:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
 .page-header{gap:12px;flex-wrap:wrap}
 .page-header h1{overflow-wrap:anywhere}
 .form-grid>*{min-width:0}
 .topbar-search input{min-width:0}
 .sidebar-user-info{min-width:0;overflow-wrap:anywhere}
}
@media screen and (max-width:1024px){
 .sidebar{transform:translateX(-100%);transition:transform .2s ease;width:280px;max-width:calc(100vw - 40px);z-index:100;height:100dvh;overflow-y:auto}
 .sidebar.open{transform:translateX(0)}
 .sidebar-overlay.show{display:block}
 .sidebar-close,.mobile-menu-btn{display:block;min-height:44px;min-width:44px}
 .main-content{margin-left:0!important;width:100%;min-width:0}
 .page-content{padding:18px}
 .topbar{gap:10px;padding:12px 16px}
 .topbar-search{flex:1;width:auto;max-width:none;min-width:0}
 .topbar-user{gap:6px;flex-shrink:0}
 .topbar-user>span:last-child{display:none}
 .job-entry-grid,.inspect-grid,.nr-page .nr-grid,.history-detail-grid,.dashboard-bottom{grid-template-columns:minmax(0,1fr)!important}
 #historyPanel{position:static!important}
 .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .form-actions,.action-btns{flex-wrap:wrap;gap:8px}
 .page-content dialog{max-width:94vw;max-height:90dvh;overflow:auto}
}
@media screen and (max-width:700px){
 .page-content{padding:12px}
 .topbar{flex-wrap:wrap;padding:8px 12px}
 .topbar-search{order:3;flex:1 0 100%;width:100%}
 .topbar-user{margin-left:auto}
 .page-header h1{font-size:22px}
 .page-content .card-body{padding:14px}
 .page-content .form-grid,.expense-fields,.repair-charge-fields,.user-create-form,.accounts-summary,.monthly-summary,.percentage-summary,.delivered-summary-cards{grid-template-columns:minmax(0,1fr)!important}
 .page-content .form-group[style*="grid-column"]{grid-column:1!important}
 .page-content input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.page-content select,.page-content textarea{min-width:0!important;max-width:100%;font-size:16px}
 .page-content .form-control{min-height:44px}
 .page-content form[style*="display:flex"]{flex-wrap:wrap!important}
 .page-content form[style*="display:flex"]>.form-control{flex:1 1 100%!important;width:100%!important}
 .page-content .btn{min-height:44px;max-width:100%;white-space:normal;display:inline-flex;align-items:center;justify-content:center}
 .page-content .table-responsive{overflow-x:auto!important}
 .page-content .mobile-job-list,.page-content .account-mobile-list{overflow:visible!important}
 .mobile-job-table tbody td:last-child{min-width:0!important}
 .mobile-job-table tbody td>span{overflow-wrap:anywhere}
 .pending-detail-table .pending-problem{min-width:0}
 .photo-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .photo-strip>*{min-width:0}
 .photo-strip img{max-width:100%;height:auto}
 .backup-row{flex-wrap:wrap}
 .storage-summary,.profit-share-cards,.voltage-charge-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .job-reference-table{min-width:520px}
 .toast{max-width:calc(100vw - 24px)}
 .login-page{padding:12px;min-height:100dvh}
 .login-card{padding:20px 16px;max-width:420px}
 .login-brand-image{max-width:100%;height:auto}
 .login-card input{font-size:16px;min-height:44px}
}
@media screen and (max-width:380px){
 .stats-grid,.storage-summary,.profit-share-cards,.voltage-charge-grid{grid-template-columns:minmax(0,1fr)!important}
 .history-detail-grid p{grid-template-columns:minmax(85px,36%) minmax(0,1fr);gap:8px}
}
@media(prefers-reduced-motion:reduce){.sidebar{transition:none!important}}