/* TechGeekPH Clients modal viewport fix.
   The Clients page inherits the global pageEnter transform animation. A transformed ancestor
   makes position:fixed children use that ancestor as the containing block, which can center
   the editor far below the current viewport on long client lists. */
.clients-page.module-page{
  animation:none!important;
  transform:none!important;
}

.clients-modal-backdrop{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  z-index:10000!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:auto!important;
  padding:16px!important;
  background:rgba(2,13,27,.72)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

.clients-detail-modal,
.clients-edit-modal{
  position:relative!important;
  z-index:10001!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  margin:auto!important;
  background:var(--panel-solid)!important;
}

.clients-edit-modal{
  width:min(1180px,calc(100vw - 32px))!important;
  height:min(900px,calc(100dvh - 32px))!important;
  max-height:calc(100dvh - 32px)!important;
}

.clients-detail-modal{
  width:min(980px,calc(100vw - 32px))!important;
  max-height:calc(100dvh - 32px)!important;
}

@media(max-width:640px){
  .clients-modal-backdrop{padding:6px!important}
  .clients-edit-modal,.clients-detail-modal{
    width:calc(100vw - 12px)!important;
    height:calc(100dvh - 12px)!important;
    max-height:calc(100dvh - 12px)!important;
  }
}