/* PPDO MIS - All Modal Front / Sidebar Hide Fix
   Purpose: keep every Add/Edit/View modal above the fixed sidebar and header.
   Safe: CSS-only positioning layer; no database/uploads affected. */
:root{
  --ppdo-modal-front-z:2147483000;
  --ppdo-modal-card-z:2147483100;
}

/* Open modal overlays: root index, task, document, meeting, employee/register, and common custom modal names */
html body .modal-overlay.show,
html body div.modal-overlay.show,
html body .ppdo-task-modal.open,
html body div.ppdo-task-modal.open,
html body .ppdo-doc-modal.open,
html body div.ppdo-doc-modal.open,
html body .mm-modal-backdrop.open,
html body div.mm-modal-backdrop.open,
html body .employee-reg-modal.show,
html body .ppdo-signup-modal-fixed.show,
html body .modal.show,
html body .app-modal.open,
html body .app-modal.show,
html body .legacy-modal.open,
html body .legacy-modal.show{
  position:fixed!important;
  inset:0!important;
  left:0!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  width:100vw!important;
  max-width:100vw!important;
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;
  margin:0!important;
  padding:18px!important;
  box-sizing:border-box!important;
  overflow:auto!important;
  z-index:var(--ppdo-modal-front-z)!important;
  background:rgba(15,23,42,.62)!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
  pointer-events:auto!important;
  transform:none!important;
}

/* Hidden modal overlays must stay hidden. Semantic ARIA attributes alone
   must never be treated as an open state. */
html body .modal-overlay:not(.show):not(.open){
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* Modal cards/panels must be inside viewport, never behind the sidebar */
html body .modal-overlay.show > .modal-card,
html body .modal-card,
html body .ppdo-task-modal.open > .ppdo-task-modal-box,
html body .ppdo-task-modal-box,
html body .ppdo-doc-modal.open > .ppdo-doc-modal-box,
html body .ppdo-doc-modal-box,
html body .mm-modal-backdrop.open > .mm-modal,
html body .mm-modal,
html body .employee-reg-modal.show .employee-reg-box,
html body .ppdo-signup-modal-fixed.show .employee-reg-box,
html body .modal.show .modal-dialog,
html body .modal.show .modal-content,
html body .app-modal.open .app-modal-content,
html body .app-modal.show .app-modal-content,
html body .legacy-modal.open .legacy-modal-content,
html body .legacy-modal.show .legacy-modal-content{
  position:relative!important;
  z-index:var(--ppdo-modal-card-z)!important;
  width:min(1080px,calc(100vw - 36px))!important;
  max-width:calc(100vw - 36px)!important;
  max-height:calc(100dvh - 36px)!important;
  margin:0 auto!important;
  overflow:auto!important;
  box-sizing:border-box!important;
  transform:none!important;
}

/* Larger report/activity modals may use more width, but still stay inside screen */
html body #reportModal > .modal-card,
html body #activitySubmitModal > .modal-card,
html body #activityApprovedModal > .modal-card,
html body #websitePageEditorModal > .modal-card,
html body #websiteHomeBannerModal > .modal-card,
html body #ppdoTaskAddModal > .ppdo-task-modal-box{
  width:min(1180px,calc(100vw - 36px))!important;
}

/* While any modal is visible, keep chrome/sidebar behind the modal layer */
html.ppdo-modal-visible body .office-fixed-banner,
html.ppdo-modal-visible body #ppdoFixedHeader,
html.ppdo-modal-visible body .ppdo-live-header,
html.ppdo-modal-visible body .topbar,
html.ppdo-modal-visible body header,
html.ppdo-modal-visible body .sidebar,
html.ppdo-modal-visible body aside.sidebar,
html.ppdo-modal-visible body aside#ppdoMisSidebar,
html.ppdo-modal-visible body .ppdo-mis-sidebar,
html.ppdo-modal-visible body .gov-sidebar,
html.ppdo-modal-visible body .sidebar-backdrop,
html body:has(.modal-overlay.show) .office-fixed-banner,
html body:has(.modal-overlay.show) #ppdoFixedHeader,
html body:has(.modal-overlay.show) .sidebar,
html body:has(.ppdo-task-modal.open) .office-fixed-banner,
html body:has(.ppdo-task-modal.open) #ppdoFixedHeader,
html body:has(.ppdo-task-modal.open) .sidebar,
html body:has(.ppdo-doc-modal.open) .office-fixed-banner,
html body:has(.ppdo-doc-modal.open) #ppdoFixedHeader,
html body:has(.ppdo-doc-modal.open) .sidebar,
html body:has(.mm-modal-backdrop.open) .office-fixed-banner,
html body:has(.mm-modal-backdrop.open) #ppdoFixedHeader,
html body:has(.mm-modal-backdrop.open) .sidebar{
  z-index:1!important;
}

/* Inputs inside modals should stay usable and visible */
html body .modal-card input,
html body .modal-card select,
html body .modal-card textarea,
html body .ppdo-task-modal-box input,
html body .ppdo-task-modal-box select,
html body .ppdo-task-modal-box textarea,
html body .ppdo-doc-modal-box input,
html body .ppdo-doc-modal-box select,
html body .ppdo-doc-modal-box textarea,
html body .mm-modal input,
html body .mm-modal select,
html body .mm-modal textarea{
  max-width:100%!important;
  box-sizing:border-box!important;
}

/* Close/cancel buttons should always be clickable */
html body .modal-close,
html body .ppdo-task-close,
html body .ppdo-doc-close,
html body .mm-close,
html body [data-ppdo-task-close],
html body [data-ppdo-modal-close],
html body [data-mm-close]{
  pointer-events:auto!important;
  cursor:pointer!important;
}

@media(max-width:900px){
  html body .modal-overlay.show,
  html body .ppdo-task-modal.open,
  html body .ppdo-doc-modal.open,
  html body .mm-modal-backdrop.open,
  html body .employee-reg-modal.show,
  html body .ppdo-signup-modal-fixed.show,
  html body .modal.show,
  html body .app-modal.open,
  html body .app-modal.show{
    padding:10px!important;
    align-items:flex-start!important;
  }
  html body .modal-overlay.show > .modal-card,
  html body .modal-card,
  html body .ppdo-task-modal.open > .ppdo-task-modal-box,
  html body .ppdo-task-modal-box,
  html body .ppdo-doc-modal.open > .ppdo-doc-modal-box,
  html body .ppdo-doc-modal-box,
  html body .mm-modal-backdrop.open > .mm-modal,
  html body .mm-modal,
  html body .employee-reg-modal.show .employee-reg-box,
  html body .ppdo-signup-modal-fixed.show .employee-reg-box,
  html body .modal.show .modal-dialog,
  html body .modal.show .modal-content{
    width:calc(100vw - 20px)!important;
    max-width:calc(100vw - 20px)!important;
    max-height:calc(100dvh - 20px)!important;
    margin:0 auto!important;
    border-radius:14px!important;
  }
}