/*
 GreenEco — Items dialogs draggable + freely resizable
 Applies to:
 - إضافة مجموعة
 - تعديل مجموعة
 - إدارة المجموعات
 - جديد صنف
 - تعديل صنف
 - بحث الأصناف

 Behavior:
 - Initial position remains centered.
 - Drag from the dialog header.
 - Freely resize from all four corners.
 - Keep dialog inside the visible viewport while dragging.
 - No business logic / app.js / print changes.

 Version: 3.3.16.44.2.537
*/

@media screen {

  /* Mark supported cards as free floating once interaction is enabled. */
  .greeneco-managed-modal-card.items-dialog-free-window{
    position:fixed!important;

    min-width:420px!important;
    min-height:180px!important;

    max-width:calc(100vw - 16px)!important;
    max-height:calc(100vh - 16px)!important;

    margin:0!important;

    overflow:hidden!important;
    box-sizing:border-box!important;

    resize:none!important;

    /* Do not animate geometry while moving/resizing. */
    transition:none!important;
  }

  /* Header is the mouse drag handle, except its buttons. */
  .items-dialog-free-window > .modal-header{
    cursor:move!important;
    user-select:none!important;
    -webkit-user-select:none!important;
    touch-action:none!important;
  }

  .items-dialog-free-window > .modal-header button,
  .items-dialog-free-window > .modal-header input,
  .items-dialog-free-window > .modal-header select,
  .items-dialog-free-window > .modal-header textarea,
  .items-dialog-free-window > .modal-header a{
    cursor:pointer!important;
    user-select:auto!important;
  }

  /* Give body the remaining resized height. */
  .items-dialog-free-window > .modal-body{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow:auto!important;
  }

  /*
   * Four explicit corner handles are clearer and more reliable than
   * the browser's single native resize grip, especially in RTL.
   */
  .items-dialog-resize-handle{
    position:absolute!important;
    z-index:50!important;

    width:18px!important;
    height:18px!important;

    margin:0!important;
    padding:0!important;

    background:transparent!important;
    border:0!important;

    touch-action:none!important;
    user-select:none!important;

    opacity:.75!important;
  }

  .items-dialog-resize-handle::before,
  .items-dialog-resize-handle::after{
    content:""!important;
    position:absolute!important;
    display:block!important;
    background:#68777f!important;
    opacity:.65!important;
  }

  .items-dialog-resize-handle::before{
    width:10px!important;
    height:1px!important;
  }

  .items-dialog-resize-handle::after{
    width:1px!important;
    height:10px!important;
  }

  .items-dialog-resize-se{
    right:0!important;
    bottom:0!important;
    cursor:se-resize!important;
  }

  .items-dialog-resize-se::before{
    right:2px!important;
    bottom:4px!important;
    transform:rotate(-45deg)!important;
    transform-origin:center!important;
  }

  .items-dialog-resize-se::after{
    right:5px!important;
    bottom:1px!important;
    transform:rotate(-45deg)!important;
    transform-origin:center!important;
  }

  .items-dialog-resize-sw{
    left:0!important;
    bottom:0!important;
    cursor:sw-resize!important;
  }

  .items-dialog-resize-sw::before{
    left:2px!important;
    bottom:4px!important;
    transform:rotate(45deg)!important;
    transform-origin:center!important;
  }

  .items-dialog-resize-sw::after{
    left:5px!important;
    bottom:1px!important;
    transform:rotate(45deg)!important;
    transform-origin:center!important;
  }

  .items-dialog-resize-ne{
    right:0!important;
    top:0!important;
    cursor:ne-resize!important;
  }

  .items-dialog-resize-ne::before{
    right:2px!important;
    top:4px!important;
    transform:rotate(45deg)!important;
    transform-origin:center!important;
  }

  .items-dialog-resize-ne::after{
    right:5px!important;
    top:1px!important;
    transform:rotate(45deg)!important;
    transform-origin:center!important;
  }

  .items-dialog-resize-nw{
    left:0!important;
    top:0!important;
    cursor:nw-resize!important;
  }

  .items-dialog-resize-nw::before{
    left:2px!important;
    top:4px!important;
    transform:rotate(-45deg)!important;
    transform-origin:center!important;
  }

  .items-dialog-resize-nw::after{
    left:5px!important;
    top:1px!important;
    transform:rotate(-45deg)!important;
    transform-origin:center!important;
  }

  /* No hover movement on modal controls. */
  .items-dialog-free-window button:hover,
  .items-dialog-free-window button:focus-visible,
  .items-dialog-free-window button:active{
    translate:none!important;
    scale:none!important;
  }

  body.items-dialog-pointer-active{
    user-select:none!important;
    -webkit-user-select:none!important;
    cursor:grabbing!important;
  }

  body.items-dialog-resize-active{
    user-select:none!important;
    -webkit-user-select:none!important;
  }
}

@media screen and (max-width:620px){
  .greeneco-managed-modal-card.items-dialog-free-window{
    min-width:300px!important;
  }
}