/* Extracted from new/templ/page/practice_components.templ (templ practiceFootersComponent) */
.undo-item-button {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	width: 35px;
	height: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.undo-item-button:hover {
	transform: scale(1.1);
}
.undo-item-button:active {
	transform: scale(0.9);
}

/* ============ Drag (sort into categories) - compact on mobile ============ */
/* The component is styled inline in practice_content.templ (DragComponent),
   hence the !important overrides. */
/* All sizes: tighten so the pool and both regions fit in one viewport */
li[data-type="drag"] .item-content {
	padding: 70px 20px 16px !important;
}
li[data-type="drag"] h2 {
	font-size: 1.2rem !important;
	margin-bottom: 0.75rem !important;
}
li[data-type="drag"] .itemzone {
	min-height: 52px !important;
	padding: 8px !important;
	margin-bottom: 0;
}
li[data-type="drag"] .draggable {
	font-size: 0.88rem !important;
	margin: 4px !important;
	padding: 7px 14px !important;
	border-radius: 10px !important;
	line-height: 1.25;
}
li[data-type="drag"] .row.mt-4 {
	margin-top: 0.5rem !important;
}
li[data-type="drag"] .imageuploadify.dropzone {
	min-height: 90px !important;
	padding: 10px !important;
	border-radius: 14px !important;
	/* The vendor imageuploadify.min.css forces min-width: 250px / max-width:
	   1000px; at 50% of a phone-width card that made the two regions overflow
	   and overlap each other. */
	min-width: 0 !important;
	max-width: 100% !important;
	overflow: hidden !important;
	box-sizing: border-box;
}
li[data-type="drag"] .row.mt-4 > [data-region] {
	min-width: 0;
}
li[data-type="drag"] .imageuploadify-images-list {
	display: block !important;
	width: 100%;
}
/* Dropped chips must fit inside their (narrow) region: wrap long labels
   instead of poking out of the box. */
li[data-type="drag"] .imageuploadify-images-list .draggable {
	max-width: 100%;
	white-space: normal;
	word-break: break-word;
	text-align: center;
}
li[data-type="drag"] .imageuploadify-images-list > i {
	display: none;
}
li[data-type="drag"] .imageuploadify-images-list > .btn {
	font-size: 0.95rem !important;
	padding: 5px 10px !important;
	white-space: normal;
}

@media (max-width: 767px) {
	li[data-type="drag"] {
		margin-bottom: 16px !important;
		border-radius: 14px !important;
	}
	li[data-type="drag"] .item-content {
		padding: 58px 10px 10px !important;
	}
	li[data-type="drag"] h2 {
		font-size: 0.95rem !important;
		margin-bottom: 0.5rem !important;
	}
	li[data-type="drag"] .itemzone {
		min-height: 48px !important;
		padding: 6px !important;
		border-radius: 12px !important;
		margin-bottom: 0;
	}
	li[data-type="drag"] .draggable {
		font-size: 0.75rem !important;
		margin: 2px !important;
		padding: 5px 8px !important;
		border-radius: 8px !important;
		line-height: 1.2;
		box-shadow: none !important;
	}
	li[data-type="drag"] .row.mt-4 {
		margin-top: 0.5rem !important;
	}
	/* Keep the two categories side by side so both stay on screen */
	li[data-type="drag"] .row.mt-4 > [data-region] {
		flex: 0 0 50%;
		width: 50%;
		max-width: 50%;
		margin-top: 0.25rem !important;
		padding-left: 4px;
		padding-right: 4px;
	}
	li[data-type="drag"] .imageuploadify.dropzone {
		min-height: 72px !important;
		padding: 6px !important;
		border-radius: 12px !important;
	}
	li[data-type="drag"] .imageuploadify-images-list .draggable {
		margin: 3px 2px !important;
	}
	li[data-type="drag"] .imageuploadify-images-list > i {
		display: none;
	}
	li[data-type="drag"] .imageuploadify-images-list > .btn {
		font-size: 0.85rem !important;
		padding: 5px 8px !important;
		white-space: normal;
	}
}

/* Pointer-driven drag & drop (setupDrag in practice/next/content.js): the
   chip left behind while its position:fixed clone follows the finger, and the
   zone currently under the finger. */
li[data-type="drag"] .draggable.tt-drag-ghost {
	opacity: 0.35;
}
.tt-drag-clone {
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25) !important;
	opacity: 0.95;
	white-space: nowrap;
}
li[data-type="drag"] .dropzone.tt-drop-hover {
	border-color: var(--primary) !important;
	box-shadow: 0 0 0 3px rgba(76, 111, 255, 0.25);
}

/* ============ Dark theme ============ */
/* Only the drag hover ring above carries colour; it uses --primary, which
   the theme already swaps for html[data-theme="dark"]. */