/* Lavender Lotus Studio 8.9.5 — final viewport containment repairs */

/* Dialogs are always centered inside the actual browser viewport. */
.dialog-layer{
  left:0!important;
  right:0!important;
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
  padding:16px!important;
  overflow-x:hidden!important;
  box-sizing:border-box!important;
}
.portfolio-modal-shell{
  width:min(960px,calc(100% - 32px))!important;
  height:min(820px,calc(100dvh - 32px))!important;
  max-width:calc(100% - 32px)!important;
  max-height:calc(100dvh - 32px)!important;
  min-width:min(640px,calc(100% - 32px))!important;
  min-height:min(520px,calc(100dvh - 32px))!important;
  margin:auto!important;
  inset:auto!important;
}
.portfolio-modal-shell.modal-maximized{
  width:calc(100% - 32px)!important;
  height:calc(100dvh - 32px)!important;
  max-width:calc(100% - 32px)!important;
  max-height:calc(100dvh - 32px)!important;
}
.portfolio-modal-shell form,
.portfolio-modal-shell .modal-header,
.portfolio-modal-shell .modal-body,
.portfolio-modal-shell .modal-footer{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}
.portfolio-modal-shell .portfolio-editor{
  grid-template-columns:minmax(260px,330px) minmax(0,1fr)!important;
  gap:20px!important;
}
.portfolio-modal-shell .portfolio-editor-preview{
  height:min(520px,calc(100dvh - 250px))!important;
  min-height:320px!important;
  max-height:520px!important;
}
.portfolio-modal-shell .portfolio-editor>.form-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:0 13px!important;
  overflow:visible!important;
}
.portfolio-modal-shell .portfolio-approval-field{
  grid-template-columns:18px minmax(0,1fr)!important;
  gap:10px!important;
  padding:12px 13px!important;
}
.portfolio-modal-shell .portfolio-approval-field input{
  width:17px!important;
  height:17px!important;
}
.portfolio-modal-shell .portfolio-editor-actions{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.portfolio-modal-shell .modal-footer{
  flex-wrap:wrap!important;
}
.portfolio-modal-shell .modal-footer-right{
  min-width:0!important;
  max-width:100%!important;
  flex-wrap:wrap!important;
}

/* On scaled displays and smaller laptops, use one clean editor column. */
@media(max-width:1100px){
  .portfolio-modal-shell{
    width:calc(100% - 24px)!important;
    height:calc(100dvh - 24px)!important;
    max-width:calc(100% - 24px)!important;
    max-height:calc(100dvh - 24px)!important;
    min-width:0!important;
    min-height:0!important;
    resize:none!important;
  }
  .portfolio-modal-shell.modal-maximized{
    width:calc(100% - 24px)!important;
    height:calc(100dvh - 24px)!important;
    max-width:calc(100% - 24px)!important;
    max-height:calc(100dvh - 24px)!important;
  }
  .portfolio-modal-shell .portfolio-editor{
    grid-template-columns:minmax(0,1fr)!important;
    gap:16px!important;
  }
  .portfolio-modal-shell .portfolio-editor-preview{
    position:relative!important;
    width:min(100%,620px)!important;
    height:min(42dvh,390px)!important;
    min-height:240px!important;
    margin-inline:auto!important;
  }
}
@media(max-width:640px){
  .dialog-layer{padding:8px!important}
  .portfolio-modal-shell{
    width:calc(100% - 16px)!important;
    height:calc(100dvh - 16px)!important;
    max-width:calc(100% - 16px)!important;
    max-height:calc(100dvh - 16px)!important;
  }
  .portfolio-modal-shell .portfolio-editor>.form-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .portfolio-modal-shell .portfolio-editor .span-2{grid-column:1!important}
  .portfolio-modal-shell .portfolio-editor-actions{grid-template-columns:minmax(0,1fr)!important}
}

/* Design Studio asset rail: no hidden source buttons or sideways scrollbar. */
.vdp-assets-panel{
  min-width:0!important;
  max-width:100%!important;
}
.vdp-panel-tabs,
.vdp-panel-tabs-5{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
}
.vdp-source-filter{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:7px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  padding:10px!important;
  overflow:visible!important;
  scrollbar-width:none!important;
}
.vdp-source-filter::-webkit-scrollbar{display:none!important}
.vdp-source-filter button{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:36px!important;
  padding:8px 7px!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  line-height:1.15!important;
  text-align:center!important;
}
.vdp-asset-filters,
.vdp-asset-filters>*{
  min-width:0!important;
  max-width:100%!important;
}

/* Keep the asset header fixed and scroll only the actual photo grid. */
@media(min-width:1400px){
  .vdp-left-rail{
    overflow:hidden!important;
  }
  .vdp-assets-panel{
    display:flex!important;
    flex-direction:column!important;
    max-height:calc(100vh - 155px)!important;
    overflow:hidden!important;
  }
  .vdp-asset-grid{
    flex:1 1 auto!important;
    min-height:260px!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
  }
  .vdp-template-panel,
  .vdp-upload-panel,
  #vdpProjectReferences{
    min-height:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }
}

/* When the rail becomes a full-width section, show more source choices per row. */
@media(min-width:821px) and (max-width:1399px){
  .vdp-source-filter{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}
@media(max-width:520px){
  .vdp-source-filter{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }
  .vdp-source-filter button{
    min-height:40px!important;
    font-size:.72rem!important;
  }
}

/* Portfolio pagination controls remain obvious immediately above the grid. */
.portfolio-page-controls-top{
  justify-content:flex-start!important;
  padding:6px 0 10px!important;
  margin:0!important;
}
.portfolio-page-controls-top .button{
  min-height:40px!important;
}

/* Flex-column rail safeguards: header controls never collapse; only results scroll. */
.vdp-panel-tabs,
.vdp-panel-tabs-5,
.vdp-source-filter,
.vdp-asset-filters,
.vdp-asset-count{
  flex:0 0 auto!important;
}
.vdp-panel-tabs,
.vdp-panel-tabs-5{
  position:relative!important;
  top:auto!important;
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
}
@media(min-width:1400px){
  .vdp-asset-grid{
    min-height:0!important;
  }
}

/* Mobile Design Studio dock: all six tools must fit without sideways scrolling. */
@media(max-width:820px){
  body.vdp-mobile-editor-active .vdp-mobile-editor-dock{
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    left:8px!important;
    right:8px!important;
    width:auto!important;
    max-width:calc(100% - 16px)!important;
    gap:2px!important;
    padding:7px 4px!important;
    overflow-x:hidden!important;
    overflow-y:hidden!important;
    box-sizing:border-box!important;
  }
  .vdp-mobile-editor-dock button{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    flex:none!important;
    padding:4px 1px!important;
    font-size:.44rem!important;
    line-height:1.05!important;
    overflow:hidden!important;
  }
  .vdp-mobile-editor-dock button span{
    display:block!important;
    min-width:0!important;
    max-width:100%!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .vdp-mobile-editor-dock svg{
    width:17px!important;
    height:17px!important;
  }
}