/* SortableList – Drag & Drop Sortierung */

.oo-sortable-list {
    display: flex;
    flex-direction: column;
    gap: var(--oo-space-1);
}

.oo-sortable-list--horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}

.oo-sortable-item {
    position: relative;
    cursor: default;
    user-select: none;
    transition: opacity 0.15s ease;
}

.oo-sortable-item.oo-sortable-dragging {
    opacity: 0.4;
}

/* Drop-Indikator: echter DOM-Node, nur 2px hoch (vertikal) bzw. 2px breit (horizontal) */
.oo-sortable-placeholder {
    height: 2px;
    background-color: var(--oo-primary, #4f46e5);
    border-radius: 1px;
    pointer-events: none;
    flex-shrink: 0;
}

.oo-sortable-placeholder--horizontal {
    width: 2px;
    height: auto;
    align-self: stretch;
    min-height: 24px;
}

.oo-sortable-handle {
    cursor: grab;
    touch-action: none;
    flex-shrink: 0;
}

.oo-sortable-handle:active {
    cursor: grabbing;
}

/* Drop-Effekt: flächiger Background-Flash nach dem Einsortiern */
@keyframes oo-sortable-dropped {
    0%   { background-color: var(--oo-warning-lighter); }
    100% { background-color: transparent; }
}

.oo-sortable-item.oo-sortable-dropped {
    animation: oo-sortable-dropped 0.5s ease-out forwards;
}
.oo-sortable-default-item {
    display: flex;
    align-items: center;
    gap: var(--oo-space-1);
    padding: 0.5rem 0.75rem;
    background: var(--oo-color-surface-raised);
    border: var(--oo-border-width) solid var(--oo-color-border);
    border-radius: var(--oo-border-radius);
    cursor: default;
}