/**
 * WBG Webdeck - Grid Drag & Drop Styles
 * Version: 1.1.0
 * ========================================================================== */

/* ==========================================================================
   Drag & Drop States
   ========================================================================== */

/* Element das gerade gezogen wird */
.uk-sortable-drag {
    opacity: 0.8 !important;
    background: #fff !important;
    border: 2px dashed #1e87f0 !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    transform: rotate(2deg) !important;
    z-index: 10000 !important;
    cursor: grabbing !important;
}

/* Verhindere Pointer-Events auf verschachtelten Elementen während Drag */
.uk-sortable-drag * {
    pointer-events: none !important;
}

/* Placeholder zeigt wo das Element landen würde */
.uk-sortable-placeholder {
    opacity: 0.3 !important;
    border: 2px dashed #ccc !important;
    background: #f8f8f8 !important;
}

/* Child-Liste während Drag ausblenden (verhindert Layout-Shifts) */
.uk-sortable-drag .uk-child-list {
    display: none !important;
}

/* Trash-Icon während Drag ausblenden */
.uk-sortable-drag .trash-icon {
    display: none !important;
}

/* ==========================================================================
   Grid Items - Basis Styles
   ========================================================================== */

.uk-grid-item {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: grab;
}

.uk-grid-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.uk-grid-item:active {
    cursor: grabbing;
}

/* Grid-Item-Wrapper */
.grid-item-wrapper {
    position: relative;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 600px) {
    /* Auf Mobile weniger aggressive Transforms */
    .uk-sortable-drag {
        transform: rotate(1deg) !important;
    }

    .uk-grid-item:hover {
        transform: none;
        box-shadow: none;
    }
}