/* ============================================================
   drag.behavior.css
   ------------------------------------------------------------
   Visual + interaction rules for DragWiz
   ------------------------------------------------------------
   Contract:
   - [data-draggable] → draggable element
   - [data-drag-handle] → optional drag handle
   - .is-dragging → runtime state from DragWiz
   - .is-docked → optional future state
   ============================================================ */


/* ------------------------------------------------------------
   Base draggable element
   ------------------------------------------------------------
   Any element with this attribute becomes a floating layer.
   ------------------------------------------------------------ */

   [data-draggable] {

    position: fixed;

    /* Interaction safety */
    touch-action: none;
    user-select: none;

    /* Performance hint for transform animation */
    will-change: transform;
    backface-visibility: hidden;

    /* Ensure UI floats above content */
    z-index: 1000;

    /* IMPORTANT: match DragWiz behavior (whole surface draggable) */
    cursor: grab;
}


/* ------------------------------------------------------------
   Dragging state (controlled by DragWiz)
   ------------------------------------------------------------ */

[data-draggable].is-dragging {

    cursor: grabbing;

    /* Optional visual feedback */
    opacity: 0.95;

    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.25));
}


/* ------------------------------------------------------------
   Drag handle (optional semantic sub-region)
   ------------------------------------------------------------
   If present, DragWiz may restrict drag initiation to it.
   ------------------------------------------------------------ */

[data-drag-handle] {

    cursor: grab;

    user-select: none;
}


/* While actively interacting with handle */
[data-drag-handle]:active {

    cursor: grabbing;
}


/* ------------------------------------------------------------
   Docked state (future extension hook)
   ------------------------------------------------------------
   Useful for snapping panels back to layout slots.
   ------------------------------------------------------------ */

[data-draggable].is-docked {

    transform: none !important;
    opacity: 1;
    filter: none;
}


/* ------------------------------------------------------------
   Global drag state hook (optional)
   ------------------------------------------------------------
   Useful if you want to disable scroll / interactions globally.
   ------------------------------------------------------------ */

body.dragging-active {

    overflow: hidden;
}