/* 2026-10-23: phone layouts for quality detail flows and table maintenance.
   Body-level dialogs use explicit IDs; view content uses the same specificity
   as mobile.css so that desktop skin rules cannot restore fixed layouts. */
@media (max-width:760px), (max-width:1100px) and (pointer:coarse) {
  /* The report entrance animation leaves a transform matrix after it ends,
     making a fixed drawer relative to the page instead of the phone screen. */
  html[data-paper] body.mobile-enhanced .main #view#view#view .rp-wrap {
    transform:none!important; animation:none!important;
  }
  /* Internal rework creates this overlay directly under body, outside #view. */
  html body.mobile-enhanced #internal-handle-modal.modal-overlay.show {
    position:fixed!important; inset:0!important; z-index:9400!important;
    display:flex!important; align-items:center!important; justify-content:center!important;
    width:100vw!important; height:100dvh!important; padding:8px!important;
    overflow:auto!important; background:rgba(28,28,28,.55)!important;
  }
  html body.mobile-enhanced #internal-handle-modal .modal-card {
    display:flex!important; flex-direction:column!important;
    width:100%!important; min-width:0!important; max-width:520px!important;
    max-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    overflow:hidden!important; border-radius:12px!important; background:var(--ui-bg-card,#fff)!important;
    box-shadow:0 24px 70px rgba(0,0,0,.28)!important;
  }
  html body.mobile-enhanced #internal-handle-modal :is(.modal-head,.modal-foot) {
    display:flex!important; flex:0 0 auto!important; align-items:center!important;
    gap:10px!important; padding:12px!important;
  }
  html body.mobile-enhanced #internal-handle-modal .modal-head { justify-content:space-between!important; border-bottom:1px solid var(--ui-line-200,#dfe7f0)!important; }
  html body.mobile-enhanced #internal-handle-modal .modal-head h3 { margin:0!important; font-size:16px!important; }
  html body.mobile-enhanced #internal-handle-modal .modal-close { flex:none!important; width:36px!important; height:36px!important; border:0!important; background:transparent!important; font-size:24px!important; }
  html body.mobile-enhanced #internal-handle-modal .modal-body { flex:1 1 auto!important; min-height:0!important; padding:12px!important; overflow:auto!important; }
  html body.mobile-enhanced #internal-handle-modal .form-row { display:block!important; margin:0 0 12px!important; }
  html body.mobile-enhanced #internal-handle-modal .form-row label { display:block!important; margin:0 0 6px!important; font-size:12px!important; font-weight:600!important; }
  html body.mobile-enhanced #internal-handle-modal .form-static { padding:10px 12px!important; border-radius:8px!important; background:var(--ui-bg-soft,#f3f6fa)!important; font-size:13px!important; overflow-wrap:anywhere!important; }
  html body.mobile-enhanced #internal-handle-modal :is(select,textarea,input) { width:100%!important; min-width:0!important; max-width:100%!important; min-height:42px!important; padding:10px!important; border:1px solid var(--ui-line-200,#dfe7f0)!important; border-radius:8px!important; font-size:16px!important; background:var(--ui-bg-card,#fff)!important; color:var(--ui-ink-700,#223e59)!important; }
  html body.mobile-enhanced #internal-handle-modal .modal-foot { justify-content:flex-end!important; flex-wrap:wrap!important; border-top:1px solid var(--ui-line-200,#dfe7f0)!important; }
  html body.mobile-enhanced #internal-handle-modal .modal-foot button { min-height:42px!important; padding:8px 16px!important; border:1px solid var(--ui-line-200,#dfe7f0)!important; border-radius:8px!important; }
  html body.mobile-enhanced #internal-handle-modal #ih-save { background:var(--ui-brand-600,#1768b5)!important; color:#fff!important; }

  /* Custom drawers are siblings of the normal modal and must cover the dock. */
  html body.mobile-enhanced:has(:is(#internal-handle-modal.show,#external-handle-modal.show,.mqz-drawer.on,.tr-cell-detail.open,.rps-drawer.open)) #mobileDock#mobileDock { display:none!important; }
  html[data-paper] body.mobile-enhanced .main #view#view#view .mqz-drawer.on { position:fixed!important; inset:0!important; width:100vw!important; height:100dvh!important; z-index:9400!important; }
  html[data-paper] body.mobile-enhanced .main #view#view#view .mqz-drawer-pn { top:0!important; right:0!important; width:100%!important; max-width:100vw!important; height:100%!important; min-width:0!important; animation:none!important; transform:none!important; }
  html[data-paper] body.mobile-enhanced .main #view#view#view .mqz-drawer-bd2 { min-height:0!important; padding:12px 12px calc(12px + env(safe-area-inset-bottom))!important; overflow:auto!important; }
  html[data-paper] body.mobile-enhanced .main #view#view#view .tr-cell-detail.open { position:fixed!important; z-index:9400!important; top:8px!important; right:8px!important; bottom:calc(8px + env(safe-area-inset-bottom))!important; width:calc(100vw - 16px)!important; min-width:0!important; max-width:calc(100vw - 16px)!important; }
  html[data-paper] body.mobile-enhanced .main #view#view#view .rps-drawer.open { position:fixed!important; inset:0!important; z-index:9400!important; padding:8px!important; width:100vw!important; height:100dvh!important; }
  html[data-paper] body.mobile-enhanced .main #view#view#view .rps-drawer-box { width:100%!important; min-width:0!important; max-width:100%!important; max-height:calc(100dvh - 16px - env(safe-area-inset-bottom))!important; border-radius:12px!important; }
  html[data-paper] body.mobile-enhanced .main #view#view#view .rps-drawer-head { flex-wrap:wrap!important; gap:8px!important; padding:12px!important; }
  html[data-paper] body.mobile-enhanced .main #view#view#view .rps-drawer-head h3 { flex:1 1 160px!important; margin:0!important; font-size:15px!important; }
  html[data-paper] body.mobile-enhanced .main #view#view#view .rps-close { flex:0 0 36px!important; }
  html[data-paper] body.mobile-enhanced .main #view#view#view .rps-drawer-body { min-height:0!important; padding:12px!important; overflow:auto!important; }

  html[data-paper] body.mobile-enhanced .main #view#view#view .mwx-form { display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:12px!important; }
  html[data-paper] body.mobile-enhanced .main #view#view#view .mwx-form > * { grid-column:1/-1!important; min-width:0!important; }

  html[data-paper] body.mobile-enhanced .main #view#view#view #dbeGridCard .dbe-h { display:flex!important; flex-wrap:wrap!important; gap:8px!important; min-width:0!important; }
  html[data-paper] body.mobile-enhanced .main #view#view#view #dbeGridCard .dbe-h h3 { min-width:0!important; overflow-wrap:anywhere!important; }
  html[data-paper] body.mobile-enhanced .main #view#view#view #dbeGridCard .dbe-toolbar { display:flex!important; flex:1 0 100%!important; flex-wrap:wrap!important; width:100%!important; min-width:0!important; max-width:100%!important; margin:0!important; gap:8px!important; }
  html[data-paper] body.mobile-enhanced .main #view#view#view #dbeGridCard .dbe-toolbar input { flex:1 1 160px!important; width:100%!important; min-width:0!important; max-width:100%!important; }
  html[data-paper] body.mobile-enhanced .main #view#view#view #dbeGridCard :is(.dbe-toolbar,.dbe-h) button { min-height:40px!important; }
  html[data-paper] body.mobile-enhanced .main #view#view#view .dbe-pager { display:flex!important; flex-wrap:wrap!important; gap:8px!important; min-width:0!important; }
}