/* Mirror dialog boundaries. Native nodes, fields and resize controls stay in place. */
@media screen {
  /* These native shells already have an independently scrolling body. Clip the
     shared header/footer background to the same outline, never the page behind it. */
  body.bm-app-mirror :is(.wt-modal-card,.cnc-modal-card) {
    overflow:hidden;
    isolation:isolate;
  }
  body.bm-app-mirror :is(.wt-modal-head,.cnc-modal-head,.cnc-modal-foot) {
    flex-shrink:0;
  }
  body.bm-app-mirror :is(.wt-modal-body,.cnc-modal-body) {
    min-height:0;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    scroll-padding-block:12px;
  }
  body.bm-app-mirror :is(.wt-modal-head,.cnc-modal-head)>:first-child {
    min-width:0;
    overflow-wrap:anywhere;
  }
  body.bm-app-mirror :is(.wt-modal-x,.cnc-modal-x) {
    flex:none;
    min-width:32px;
    min-height:32px;
  }

  /* The same split already exists in the native practice, department-load,
     FP, workshop and China forms. Preserve each family's native width/height. */
  body.bm-app-mirror :is(.pr-modal-card,.dsl-modal,.fp-modal:has(>.fp-modal-body),.ws-modal:has(>.ws-modal-body),.china-modal:has(>.china-modal-body)) {
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  body.bm-app-mirror .ws-modal:has(>.ws-modal-body) {max-height:calc(100dvh - 52px);}
  body.bm-app-mirror .pr-modal-foot {flex-wrap:wrap;gap:8px;}
  body.bm-app-mirror :is(.pr-modal-head,.pr-modal-foot,.dsl-modal-hd,.fp-modal-head,.ws-modal-hd,.china-modal-head) {
    flex:none;
  }
  body.bm-app-mirror :is(.fp-modal:has(>.fp-modal-body)>.fp-modal-head,.ws-modal:has(>.ws-modal-body)>.ws-modal-hd) {
    position:static;
  }
  body.bm-app-mirror :is(.pr-modal-body,.dsl-modal-body,.fp-modal-body,.ws-modal-body,.china-modal-body) {
    min-height:0;
    overflow:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    scroll-padding-block:12px;
  }
  body.bm-app-mirror :is(.pr-modal-head,.dsl-modal-hd,.fp-modal-head,.ws-modal-hd,.china-modal-head)>:first-child {
    min-width:0;
    overflow-wrap:anywhere;
  }
  body.bm-app-mirror :is(.pr-modal-x,.dsl-x,.fp-modal-x,.ws-modal-x,.china-modal-head>button) {
    flex:none;
    min-width:32px;
    min-height:32px;
  }

  /* Waiting has no body wrapper. Retain its native outer scroll, inset it
     behind an eight-pixel rim and keep the actual heading/close sticky. */
  body.bm-app-mirror .wait-dialog {
    border:8px solid rgba(249,251,254,.98)!important;
    padding:12px;
    background-clip:padding-box;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    scroll-padding-block:76px 12px;
  }
  body.bm-app-mirror .wait-dialog-head {
    position:sticky;
    top:-12px;
    z-index:2;
    margin:-12px -12px 16px;
    padding:12px;
    background:rgba(240,245,251,.98)!important;
    border-radius:12px 12px 0 0;
    align-items:flex-start;
  }
  body.bm-app-mirror .wait-dialog-head h2 {min-width:0;overflow-wrap:anywhere;}
  body.bm-app-mirror .wait-x {flex:none;min-width:32px;min-height:32px;}

  /* Project conditions: the form, rather than the rounded <dialog>, owns the
     scrollbar. Its heading remains in the scrollport so native drafts and form
     submission keep their existing element hierarchy. */
  body.bm-app-mirror .dp-dialog {
    padding:8px;
    overflow:hidden;
  }
  body.bm-app-mirror .dp-dialog[open] {
    display:flex;
    flex-direction:column;
  }
  body.bm-app-mirror .dp-dialog>form {
    min-height:0;
    max-height:calc(90dvh - 18px);
    box-sizing:border-box;
    padding:0 12px 12px;
    overflow:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    border-radius:16px;
    scroll-padding-block:86px 16px;
  }
  body.bm-app-mirror .dp-dialog>form>.dp-heading {
    position:sticky;
    top:0;
    z-index:2;
    margin:0 -12px 18px;
    padding:12px;
    flex-wrap:nowrap;
    align-items:flex-start;
    background:rgba(240,245,251,.98);
    border-radius:16px 16px 0 0;
    border-bottom:1px solid #e0e7ef;
  }
  body.bm-app-mirror .dp-dialog .dp-heading>div {
    min-width:0;
    overflow-wrap:anywhere;
  }
  body.bm-app-mirror .dp-dialog :is([data-dp-cancel],[data-dp-close-notice]) {
    flex:none;
    min-width:36px;
    min-height:36px;
  }
  body.bm-app-mirror .dp-deadline-dialog>.dp-heading {
    flex:none;
    margin:0;
    padding:12px;
    border-radius:16px 16px 0 0;
    flex-wrap:nowrap;
  }
  body.bm-app-mirror .dp-deadline-dialog>p {flex:none;}
  body.bm-app-mirror .dp-deadline-dialog>.dp-steps {
    min-height:0;
    margin:0 6px 6px;
    overflow:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
  }

  /* Workspace task/report forms already expose separate head/content elements.
     Keep the close/back actions outside the only scrolling area. */
  body.bm-app-mirror .dw-dialog {
    overflow:hidden;
  }
  body.bm-app-mirror .dw-dialog[open] {
    display:flex;
    flex-direction:column;
  }
  body.bm-app-mirror .dw-dialog>.dw-dialog-head {
    position:static;
    flex:none;
    padding-bottom:14px;
    border-radius:0;
  }
  body.bm-app-mirror .dw-dialog>.dw-form-content {
    flex:1 1 auto;
    min-height:0;
    width:100%;
    box-sizing:border-box;
    overflow:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    scroll-padding-block:12px;
    padding:2px 8px 12px 2px;
  }
  body.bm-app-mirror .dw-dialog-head h2 {
    min-width:0;
    overflow-wrap:anywhere;
  }
  body.bm-app-mirror .dw-dialog-head-actions {
    flex:none;
  }

  /* The project settings list is already a distinct native region. Keep only
     that region scrolling; the close/search/actions remain part of the shell. */
  body.bm-app-mirror .dt-project-settings-dialog {overflow:hidden;}
  body.bm-app-mirror .dt-project-settings-dialog[open] {display:flex;flex-direction:column;}
  body.bm-app-mirror .dt-project-settings-dialog>:not(.dt-settings-projects) {flex:none;}
  body.bm-app-mirror .dt-project-settings-dialog>.dt-settings-projects {
    min-height:0;
    flex:1 1 auto;
    max-height:45dvh;
    overflow:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
  }
  body.bm-app-mirror .dt-settings-head>h2 {min-width:0;overflow-wrap:anywhere;}
  body.bm-app-mirror .dt-settings-head [data-dt-close-settings] {flex:none;}

  /* Standalone education/electrical use the same native flex shell. Give the
     body a zero minimum so a resized textarea cannot push its close/footer off
     screen. Their native bottom-sheet layout and widths are retained. */
  body.bm-app-mirror[data-bm-mirror-document="education"] :is(.edu-dialog,.edu-cfgbox,.search-panel),
  body.bm-app-mirror[data-bm-mirror-document="electrical"] .modal {
    overflow:hidden;
    isolation:isolate;
  }
  body.bm-app-mirror[data-bm-mirror-document="education"] :is(.edu-dialog-head,.edu-dialog-foot,.edu-cfghead,.edu-cfgfoot,.sp-in),
  body.bm-app-mirror[data-bm-mirror-document="electrical"] :is(.modal-head,.modal-foot) {
    flex-shrink:0;
  }
  body.bm-app-mirror[data-bm-mirror-document="education"] :is(.edu-dialog-body,.edu-cfgbody,.sp-res),
  body.bm-app-mirror[data-bm-mirror-document="electrical"] .modal-body {
    min-height:0;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    scroll-padding-block:12px;
  }
  body.bm-app-mirror[data-bm-mirror-document="education"] :is(.edu-dialog-head h2,.edu-cfghead b),
  body.bm-app-mirror[data-bm-mirror-document="electrical"] .modal-title {
    min-width:0;
    overflow-wrap:anywhere;
  }
  body.bm-app-mirror[data-bm-mirror-document="education"] :is(.edu-dialog-close,.edu-cfgx),
  body.bm-app-mirror[data-bm-mirror-document="electrical"] .modal-close {
    flex:none;
    min-width:32px;
    min-height:32px;
  }

  /* Calculator panels have no separate header/body. Inset their own scrollport
     from the corner and keep the project list as the flexible nested body. */
  body.bm-app-mirror[data-bm-mirror-document="calculator"] .modal-overlay {
    box-sizing:border-box;
    padding:16px;
  }
  body.bm-app-mirror[data-bm-mirror-document="calculator"] .modal-overlay>.modal {
    box-sizing:border-box;
    max-height:calc(100dvh - 32px);
    overflow:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    border:8px solid rgba(249,251,254,.98)!important;
    background-clip:padding-box;
    padding:16px;
  }
  body.bm-app-mirror[data-bm-mirror-document="calculator"] #projectsModal>.modal {
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  body.bm-app-mirror[data-bm-mirror-document="calculator"] .modal-list {
    min-height:0;
    overflow:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
  }
  body.bm-app-mirror[data-bm-mirror-document="calculator"] .modal-actions {
    flex:none;
    flex-wrap:wrap;
  }
  @media(max-width:600px) {
    body.bm-app-mirror .dp-dialog>form {padding-inline:6px;}
    body.bm-app-mirror .dp-dialog>form>.dp-heading {margin-inline:-6px;padding:10px 6px;}
    body.bm-app-mirror .dw-dialog {padding:14px;}
    body.bm-app-mirror .dw-dialog-head h2 {font-size:18px;}
    body.bm-app-mirror .dw-dialog-head-actions {gap:4px;}
    body.bm-app-mirror .dw-dialog-head-actions .dt-btn {padding-inline:10px;}
    body.bm-app-mirror[data-bm-mirror-document="calculator"] .modal-overlay>.modal {padding:12px;}
  }
}