@media screen {
:root{--modal-viewport-height:calc(100dvh / var(--modal-workspace-zoom,1));--modal-viewport-width:calc(100vw / var(--modal-workspace-zoom,1));}
/* Shared viewport-centered modal layout. Visibility remains owned by each app. */
[data-centered-modal]:not(.split-embedded){position:fixed!important;inset:0!important;width:var(--modal-viewport-width,100vw)!important;height:var(--modal-viewport-height,100dvh)!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;padding:12px!important;box-sizing:border-box!important;overflow:auto!important;}
[data-centered-modal]:not(.split-embedded)>:is(.modal,.modal-box,.payroll-module-modal,.history-panel,.file-viewer-modal,.fullscreen-editor-box,.employee-profile-box,.hmo-dependent-modal,.workforce-group-members-modal){position:relative!important;inset:auto!important;transform:none!important;margin:auto!important;max-width:calc(var(--modal-viewport-width,100vw) - 24px)!important;max-height:calc(var(--modal-viewport-height,100dvh) - 24px)!important;box-sizing:border-box!important;overflow:auto!important;}
[data-centered-modal]>.history-panel{height:auto!important;border-radius:14px;}
dialog[open]{position:fixed!important;inset:0!important;margin:auto!important;transform:none!important;max-width:calc(var(--modal-viewport-width,100vw) - 24px)!important;max-height:calc(var(--modal-viewport-height,100dvh) - 24px)!important;box-sizing:border-box!important;overflow:auto;}
@media(max-width:500px){[data-centered-modal]:not(.split-embedded){padding:8px!important;}[data-centered-modal]:not(.split-embedded)>:is(.modal,.modal-box,.payroll-module-modal,.history-panel,.file-viewer-modal,.fullscreen-editor-box,.employee-profile-box,.hmo-dependent-modal,.workforce-group-members-modal),dialog[open]{max-width:calc(var(--modal-viewport-width,100vw) - 16px)!important;max-height:calc(var(--modal-viewport-height,100dvh) - 16px)!important;}}

/* Long announcement bodies use the available height, keeping the header visible. */
#modal-announcement-detail[data-centered-modal]>.modal{height:calc(var(--modal-viewport-height,100dvh) - 24px)!important;display:flex;flex-direction:column;overflow:hidden!important;}
#modal-announcement-detail #announcement-detail-content{min-height:0;max-height:none;flex:1 1 auto;overflow-y:auto;}
}