/* Grid Design Editor */
/* Dropzone im Design Editor */
.designer-container .dropzone {
	min-height: 2rem;
}

.columns-container {
	position: relative; /* relative für absolute Divider */
}

/* Den z-Index vom Handle zum Verschieben von Zeilen im Design Editor
anpassen, da er sonst nicht über die ganze Fläche funktioniert */
.move-row-helper {
	z-index: 2;
}

/* Mauszeiger beim Verschieben von Zeilen anpassen */
.move-row:hover {
	cursor: grab;
}

:has(.drag-row-source) .move-row {
	cursor: grabbing;
}

.drag-divider {
	position: absolute;
	top: calc(50% + var(--sop-input-font-size));
	width: 5px;
	font-size: var(--sop-input-font-size);
	cursor: ew-resize !important;
	z-index: 10;
	transform: translate(-50%, -50%); /* X: horizontal zentrieren, Y: vertikal zentrieren */
	user-select: none;
}

/* Platzhalter in einer Card statt Text */
.placeholder.cursor-auto {
	cursor: auto !important;
	pointer-events: auto !important; /* Standardmäßig none bei Placeholdern */
}

/* für ein Platzhalterelement im Design Editor wo per drag and drop Elemente hingezogen werden können */
.drop-placeholder {
	border: 2px dashed var(--light-border-color);
	border-radius: var(--sop-input-border-radius);
	height: 60px;
	width: 100%;
}

.dashed-border {
	border: 2px dashed var(--light-border-color);
	border-radius: var(--sop-input-border-radius);
}

.left-area {
	flex: 1;
	height: 600px;
	overflow-y: auto;
}

.grid-label {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
	min-width: 0;
}

.element-caption-row {
	white-space: nowrap;
	flex: 0 0 auto;
}

.caption-actions {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	white-space: nowrap;
	gap: .5rem;
	min-width: max-content;
}

.grid-label-buttons {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex: 0 0 auto;
}