/* 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"]. */

/* Open-question cards carry their own "Submit Response" button, but wherever
   this footer exists its advance button already reads "Submit" once there is
   text (askAdvanceLabel) and skip() clicks the card button for us. Keep the
   card button in the DOM for that handoff, just don't show it twice. The
   content dashboard preview has no footer and still shows it. */
body:has(.button-footer) #whiteboard .submit-question-response {
	display: none !important;
}

/* ------------------------------------------------------------------
   Classroom activity "Materials" panel: soft tinted card, pill header,
   and check-badged chips so a tutor can scan what to prepare.
   ------------------------------------------------------------------ */
li[data-type] .materials-panel {
    position: relative;
    border-radius: 18px;
    padding: 18px 22px 20px;
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(var(--bs-primary-rgb, 0, 140, 255), 0.09), transparent 60%),
        linear-gradient(145deg, #f8faff 0%, #f1f5ff 100%);
    border: 1px solid rgba(var(--bs-primary-rgb, 0, 140, 255), 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
li[data-type] .materials-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
li[data-type] .materials-icon {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.9rem;
    background: linear-gradient(140deg, var(--primary), color-mix(in srgb, var(--primary) 70%, #6ea8ff));
    box-shadow: 0 6px 14px rgba(var(--bs-primary-rgb, 0, 140, 255), 0.28);
}
li[data-type] .materials-title {
    margin: 0;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.8rem;
    color: var(--primary);
}
li[data-type] .materials-count {
    margin-left: auto;
    min-width: 26px;
    height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--primary);
    background: rgba(var(--bs-primary-rgb, 0, 140, 255), 0.1);
}
li[data-type] .materials-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
li[data-type] .materials-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 8px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(var(--bs-primary-rgb, 0, 140, 255), 0.16);
    box-shadow: 0 2px 6px rgba(20, 40, 90, 0.06);
    color: #2b3148;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.2;
}
li[data-type] .materials-chip-check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 0.65rem;
    color: var(--primary);
    background: rgba(var(--bs-primary-rgb, 0, 140, 255), 0.12);
}
li[data-type] .materials-chip-label { white-space: nowrap; }