/* Final screen-only mobile layer: keep controls inside the visual viewport and scroll dialog bodies. */
@media screen and (max-width:1100px) and (pointer:coarse), screen and (max-width:768px){
 html,body{touch-action:pan-x pan-y;-webkit-text-size-adjust:100%;text-size-adjust:100%}
 html body :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=button]):not([type=submit]):not([type=range]):not([type=color]):not([type=file]),select,textarea){font-size:16px!important;min-height:44px;max-width:100%;box-sizing:border-box}
 body.app-modal-open{overscroll-behavior:none}
 html body .modal{position:fixed!important;inset:auto!important;top:var(--app-vv-top,0px)!important;left:var(--app-vv-left,0px)!important;width:var(--app-vv-width,100%)!important;height:var(--app-vv-height,100dvh)!important;min-height:0!important;max-height:none!important;box-sizing:border-box!important;transform:none!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;padding:max(10px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important}
 html body .modal>.modal-content,html body .modal>.cd-panel{box-sizing:border-box!important;min-height:0!important;max-height:100%!important;max-width:100%!important;margin:0!important;transform:none!important;animation:none!important;overscroll-behavior:contain}
 html body .modal .modal-header{flex-shrink:0!important;min-width:0!important;transform:none!important;animation:none!important}
 html body .modal .modal-header::before,html body .modal .modal-header::after{content:none!important}
 html body .modal .modal-header :is(.close,.close-btn){position:static!important;inset:auto!important;transform:none!important;flex-shrink:0!important;min-width:44px!important;min-height:44px!important;margin:0!important;touch-action:pan-x pan-y}
 html body #managePaymentsModal .manage-payments-modal{display:flex!important;flex-direction:column!important;max-height:100%!important;min-height:0!important;border-radius:15px!important}
 html body #managePaymentsModal .manage-payments-header{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important;padding:12px 14px!important;position:relative!important;top:auto!important;flex-shrink:0!important;margin:0!important;isolation:isolate;z-index:2;overflow:hidden!important}
 html body #managePaymentsModal .manage-payments-header-actions{grid-row:1;display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%;min-width:0;gap:12px!important;position:static!important;transform:none!important}
 html body #managePaymentsModal .manage-payments-title{grid-row:2;min-width:0;width:100%;gap:8px;overflow-wrap:anywhere}
 html body #managePaymentsModal .manage-payments-title h3{font-size:16px!important;line-height:1.7!important;margin:0!important}
 html body #managePaymentsModal .manage-payments-contract-name{font-size:12px!important;line-height:1.7;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 html body #managePaymentsModal .manage-payments-header-actions button{position:static!important;inset:auto!important;transform:none!important;margin:0!important;min-height:44px!important;flex-shrink:0!important;pointer-events:auto!important;visibility:visible!important}
 html body #managePaymentsModal .manage-payments-close{display:flex!important;align-items:center;justify-content:center;width:44px!important;height:44px!important;padding:0!important;border-radius:10px!important}
 html body #managePaymentsModal .manage-payments-body{flex:1 1 auto!important;min-height:0!important;overflow:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:14px!important;scroll-padding:14px}
 html body #managePaymentsModal .manage-payments-layout{grid-template-columns:minmax(0,1fr)!important;min-height:0!important;max-height:none!important;overflow:visible!important;gap:16px!important}
 html body #addPaymentModal .payment-modal{max-height:100%!important;min-height:0!important;display:flex!important;flex-direction:column!important}
 html body #addPaymentModal .payment-header{position:static!important;flex-shrink:0!important;transform:none!important}
 html body #addPaymentModal .payment-body{min-height:0!important;overflow:hidden!important;overscroll-behavior:contain;flex:1 1 auto!important}
 html body #addPaymentModal #addPaymentForm{flex:1 1 auto!important;min-height:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important}
 html body #addPaymentModal .form-actions{flex-shrink:0!important;position:static!important}
 html body .contract-dialog .cd-panel{overflow:auto!important;scroll-padding-top:100px}
 html body :is(dialog.rr-queue,dialog.rr-editor,dialog.rr-photo,dialog.ow-dialog,dialog.ra-preview){top:var(--app-vv-top,0px)!important;bottom:var(--app-vv-bottom,0px)!important;left:var(--app-vv-left,0px)!important;right:0!important;margin:auto!important;max-height:calc(var(--app-vv-height,100dvh) - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom)))!important;max-width:calc(var(--app-vv-width,100vw) - 16px)!important;min-height:0;overscroll-behavior:contain;scroll-padding-block:90px 20px}
 html body :is(.rr-dialog-head,.ow-dialog-head,.ra-lightbox-head){padding-top:14px!important;padding-bottom:14px!important;min-height:64px;transform:none!important}
 html body .rr-editor-foot{position:sticky;bottom:0;background:#fffefb;z-index:2}
 html body :is(.rr-photo,.ra-preview) img{max-height:calc(var(--app-vv-height,100dvh) - 145px)!important}
 html body :is(#clients,#contracts,#payments,#settings,#reports,#financial-reports){min-width:0;overflow-wrap:anywhere}
 html body :is(.settings-container,.settings-section,.form-group,.input-wrapper){min-width:0}
}
@media screen and (max-width:430px){
 #managePaymentsModal .payment-actions{flex-wrap:wrap}
 #managePaymentsModal .payments-list-header{flex-wrap:wrap}
 #managePaymentsModal .payments-list-header>.btn{width:100%;justify-content:center}
}

@media screen and (max-width:768px){#addPaymentModal .pe-fields{flex:1 1 auto;min-height:0;overflow:auto;scroll-padding-block:16px}}