/* Mobile-only dialog layer. Page sizes and desktop POS layouts are untouched.
   :is(#qd-mobile-dialog,...) supplies enough specificity for legacy ID rules. */
@media screen and (max-width:800px) {
  html.qd-mobile-dialog-open,html.qd-mobile-dialog-open body {
    overflow:hidden!important;overscroll-behavior:none;
  }
  :is(#qd-mobile-dialog,.qd-mobile-overlay):not(.qd-mobile-standalone) {
    position:fixed!important;inset:auto!important;
    top:var(--qd-dialog-top,0px)!important;left:var(--qd-dialog-left,0px)!important;
    width:var(--qd-dialog-width,100vw)!important;
    height:var(--qd-dialog-height,100dvh)!important;
    max-height:none!important;margin:0!important;
    padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important;
    box-sizing:border-box!important;align-items:center!important;justify-content:center!important;
    overflow:hidden!important;overscroll-behavior:contain;transform:none!important;
    z-index:var(--qd-dialog-layer,2147483647)!important;border:0!important;max-width:none!important;
  }
  .qd-mobile-overlay::backdrop {background:transparent;}
  :is(#qd-mobile-dialog,.qd-mobile-standalone) {
    position:fixed!important;inset:auto!important;
    top:calc(var(--qd-dialog-top,0px) + max(8px,env(safe-area-inset-top)))!important;
    left:calc(var(--qd-dialog-left,0px) + max(8px,(var(--qd-dialog-width,100vw) - 640px)/2))!important;
    transform:none!important;width:min(640px,calc(var(--qd-dialog-width,100vw) - 16px))!important;
    height:auto!important;min-height:0!important;min-width:0!important;max-width:calc(100% - 16px)!important;
    max-height:calc(var(--qd-dialog-height,100dvh) - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom)))!important;
    margin:0!important;overflow:auto!important;border-radius:16px!important;
    z-index:var(--qd-dialog-layer,2147483647)!important;box-sizing:border-box!important;
  }
  :is(#qd-mobile-dialog,.qd-mobile-standalone).admin-staff-body {padding:16px!important;}
  :is(#qd-mobile-dialog,.qd-mobile-standalone) > .admin-staff-floating-title {margin:-16px -16px 14px!important;padding:14px 16px!important;}
  .qd-mobile-standalone::backdrop {background:rgba(15,23,42,.6);backdrop-filter:blur(8px);}
  :is(#qd-mobile-dialog,.qd-mobile-standalone) > .qd-dialog-head {
    position:sticky!important;top:-16px!important;z-index:3;
  }
  :is(#qd-mobile-dialog,.qd-mobile-overlay) > .qd-mobile-card {
    position:relative!important;inset:auto!important;transform:none!important;
    box-sizing:border-box!important;width:100%!important;min-width:0!important;
    max-width:640px!important;height:auto!important;min-height:0!important;
    max-height:100%!important;margin:0!important;border-radius:16px!important;
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  }
  :is(#qd-mobile-dialog,.qd-mobile-overlay) .qd-mobile-card *,
  :is(#qd-mobile-dialog,.qd-mobile-overlay) .qd-mobile-card *::before,
  :is(#qd-mobile-dialog,.qd-mobile-overlay) .qd-mobile-card *::after {box-sizing:border-box;}
  :is(#qd-mobile-dialog,.qd-mobile-overlay) > .qd-dialog-split {
    display:flex!important;flex-direction:column!important;overflow:hidden!important;
  }
  :is(#qd-mobile-dialog,.qd-mobile-overlay) .qd-dialog-body {
    flex:1 1 auto!important;min-height:0!important;max-height:none!important;
    overflow:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  }
  :is(#qd-mobile-dialog,.qd-mobile-overlay) > .qd-dialog-single {display:block!important;overflow:auto!important;}
  :is(#qd-mobile-dialog,.qd-mobile-overlay) .qd-dialog-head {
    flex:0 0 auto!important;min-width:0!important;gap:8px!important;
    flex-wrap:wrap!important;align-items:center!important;
  }
  :is(#qd-mobile-dialog,.qd-mobile-overlay) .qd-dialog-single > .qd-dialog-head {
    position:sticky!important;top:0!important;z-index:3;background-color:#fff;
  }
  :is(#qd-mobile-dialog,.qd-mobile-overlay) .qd-dialog-head > div {min-width:0;max-width:100%;}
  :is(#qd-mobile-dialog,.qd-mobile-overlay) .qd-dialog-head :is(h2,h3,h4,p,small) {overflow-wrap:anywhere;}
  :is(#qd-mobile-dialog,.qd-mobile-overlay) .qd-dialog-head :is(h2,h3) {font-size:18px;}
  :is(#qd-mobile-dialog,.qd-mobile-overlay) .qd-dialog-head :is(button,a) {
    flex-shrink:0;min-height:36px!important;max-width:100%;padding:7px 11px!important;
    font-size:12px!important;white-space:normal!important;line-height:1.25!important;
  }
  :is(#qd-mobile-dialog,.qd-mobile-overlay) .cp-modal-head-actions {display:flex;flex-wrap:wrap;gap:6px;}
  :is(#qd-mobile-dialog,.qd-mobile-overlay) :is(input,select,textarea) {max-width:100%!important;min-width:0!important;}
  :is(#qd-mobile-dialog,.qd-mobile-overlay) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),select,textarea) {
    font-size:16px!important; /* Prevent iOS focus zoom from clipping the card. */
  }
  :is(#qd-mobile-dialog,.qd-mobile-overlay) :is(button,a[class*="btn"],a[class*="action"]) {max-width:100%;overflow-wrap:anywhere;}
  :is(#qd-mobile-dialog,.qd-mobile-overlay) :is(.past-filter-grid,.co-past-filter-grid,.manual-grid,.cp-profile-edit-grid,.edit-big-card,.co311-layout,.pe230-layout,.pe311-layout,.uc230-grid,.past-cp-edit-grid,.past-cp-ledger,.ms-form-grid,.sr-form-grid,.soe-form-grid) {
    grid-template-columns:minmax(0,1fr)!important;
  }
  :is(#qd-mobile-dialog,.qd-mobile-overlay) :is(.past-stats-grid,.co-past-stats,.cp-stat-grid) {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  :is(#qd-mobile-dialog,.qd-mobile-overlay) :is(.cp-ledger-row,.past-head-actions,.past-pager,.co-past-pager,.card-actions,.sr-modal-actions,.soe-modal-foot) {flex-wrap:wrap!important;gap:8px;}
  :is(#qd-mobile-dialog,.qd-mobile-overlay) .cp-ledger-row input {flex:1 1 130px;}
  :is(#qd-mobile-dialog,.qd-mobile-overlay) .past-cp-ledger > div > div {flex-wrap:wrap;}
  :is(#qd-mobile-dialog,.qd-mobile-overlay) .past-cp-ledger input {flex:1 1 130px;}
  :is(#qd-mobile-dialog,.qd-mobile-overlay) :is(.cp-profile-edit-grid,.past-filter-grid) > .wide {grid-column:1/-1!important;}
  :is(#qd-mobile-dialog,.qd-mobile-overlay) .qd-dialog-table-scroll {
    width:100%;max-width:100%;min-width:0;overflow-x:auto!important;overscroll-behavior-x:contain;
  }
  :is(#qd-mobile-dialog,.qd-mobile-overlay) .qd-dialog-table-scroll table {max-width:none;}
}
@media print {.qd-mobile-overlay{display:none!important;}}