/* Shared vehicle-setting layout editor (VehicleSettingLayoutEditor.razor — RSS-1936 / RSS-1937).
   The editor fills its host container (e.g. the Bike Setup RadzenCard) so the page never gains a
   scrollbar — only the editor body (.vsle-edit) scrolls, mirroring the grid's behaviour. */

.vsle-label {
	font-size: 0.75rem;
	color: var(--rz-text-secondary-color);
}

.vsle-edit-wrap {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}

.vsle-edit-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	flex-wrap: wrap;
	padding: 0.4rem 0.6rem;
	border-bottom: 1px solid var(--rz-base-300);
	background: var(--rz-base-background-color);
}

.vsle-edit-header .event-info h3 {
	margin: 0;
	font-size: 0.95rem;
}

.vsle-header-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.vsle-hint {
	font-size: 0.75rem;
	font-style: italic;
	color: var(--rz-text-secondary-color);
}

.vsle-edit {
	flex: 1 1 auto;
	overflow: auto;
	padding: 0.6rem;
}

.vsle-cat-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.vsle-cat {
	border: 1px solid var(--rz-base-300);
	border-radius: 4px;
	background: var(--rz-base-50, var(--rz-base-background-color));
}

.vsle-cat-handle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	font-weight: 600;
	font-size: 0.85rem;
	padding: 0.35rem 0.5rem;
	border-bottom: 1px solid var(--rz-base-300);
	cursor: grab;
	user-select: none;
	background: var(--rz-base-200);
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}

.vsle-cat-handle:active {
	cursor: grabbing;
}

.vsle-cat-name {
	flex: 1 1 auto;
}

/* Add/edit/delete affordances (admin only). Excluded from dragging via the SortableJS filter. */
.vsle-actions {
	display: flex;
	align-items: center;
	gap: 0.1rem;
	flex: 0 0 auto;
}

/* Nested sub-category groups (admin hierarchy). */
.vsle-subcat-list {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 0.3rem 0.4rem 0.4rem 0.9rem;
}

.vsle-subcat {
	border: 1px solid var(--rz-base-200);
	border-radius: 4px;
	background: var(--rz-base-background-color);
}

.vsle-subcat-handle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	font-weight: 600;
	font-size: 0.8rem;
	padding: 0.25rem 0.5rem;
	border-bottom: 1px solid var(--rz-base-200);
	cursor: grab;
	user-select: none;
	background: var(--rz-base-100, var(--rz-base-200));
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}

.vsle-subcat-handle:active {
	cursor: grabbing;
}

.vsle-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	min-height: 2rem;
	padding: 0.3rem 0.5rem;
	border-bottom: 1px dashed var(--rz-base-200);
}

.vsle-row:last-child {
	border-bottom: none;
}

/* Narrow drop targets at the top/bottom of each category for "above all" / "below all". */
.vsle-row-edge {
	min-height: 0.9rem;
	padding: 0.1rem 0.5rem;
	border: 1px dashed var(--rz-base-300);
}

.vsle-row-edge::before {
	content: "";
	font-size: 0.7rem;
	color: var(--rz-text-disabled-color);
}

.vsle-row-top::before {
	content: "▲ drop here for top of category";
}

.vsle-row-bottom::before {
	content: "▼ drop here for bottom of category";
}

.vsle-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.2rem 0.55rem;
	font-size: 0.8rem;
	border: 1px solid var(--rz-primary-light, var(--rz-base-400));
	border-radius: 999px;
	background: var(--rz-base-background-color);
	cursor: grab;
	user-select: none;
	white-space: nowrap;
}

.vsle-chip:active {
	cursor: grabbing;
}

.vsle-chip-sub {
	font-size: 0.7rem;
	color: var(--rz-text-secondary-color);
}

/* Chip edit/delete reveal on hover so the tile stays compact while idle. */
.vsle-chip .vsle-action {
	display: none;
}

.vsle-chip:hover .vsle-action {
	display: inline-flex;
}

/* While dragging a chip (forceFallback drag, so the cursor follows CSS): default the whole editor
   to a not-allowed cursor and only allow the grabbing cursor over the chip's own category rows.
   Foreign (sub)category rows are also dimmed to reinforce that they cannot accept the chip. */
.vsle-edit.vsle-dragging,
.vsle-edit.vsle-dragging .vsle-cat,
.vsle-edit.vsle-dragging .vsle-subcat,
.vsle-edit.vsle-dragging .vsle-nodrop,
.vsle-edit.vsle-dragging .vsle-nodrop .vsle-chip {
	cursor: not-allowed;
}

.vsle-edit.vsle-dragging .vsle-nodrop {
	opacity: 0.4;
}

.vsle-edit.vsle-dragging .vsle-row:not(.vsle-nodrop),
.vsle-edit.vsle-dragging .vsle-row:not(.vsle-nodrop) .vsle-chip {
	cursor: grabbing;
}

/* Fallback drag ghost (chip clone that follows the pointer). */
.vsle-chip-fallback {
	opacity: 0.85;
}

/* Shared SortableJS state classes. */
.vsle-edit .sortable-ghost {
	opacity: 0.4;
}

.vsle-edit .sortable-chosen {
	background: var(--rz-primary-lighter, var(--rz-base-200));
}

.vsle-edit .sortable-drag {
	opacity: 0.9;
}