/* =====================================================================
   racunaj.me — Liga znanja, group awarding
   ---------------------------------------------------------------------
   The roster, the selection toolbar, the sticky action bar and the
   confirmation list. Loaded with the rest of the module; every selector
   is scoped to markup that only the class page renders.
   ===================================================================== */

/* ---------- class cards on the panel ---------- */
.rml-classcards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
}

.rml-classcard {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 20px;
	border-radius: 16px;
	background: var(--rml-glass);
	border: 1px solid var(--rml-brd);
	color: inherit;
	text-decoration: none;
	transition: transform 0.3s var(--rml-ease), border-color 0.3s var(--rml-ease);
}

.rml-classcard:hover { transform: translateY(-3px); border-color: rgba(180, 107, 255, 0.45); }
.rml-classcard__name { font-weight: 700; font-size: 1.05rem; }
.rml-classcard__meta { color: var(--rml-dim); font-size: 0.85rem; margin-left: auto; }
.rml-classcard__go { color: var(--rml-violet); }

.rml-back { margin: 0 0 12px; font-size: 0.9rem; }
.rml-back a { color: var(--rml-cyan); text-decoration: none; }

/* ---------- selection toolbar ---------- */
.rml-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	margin-bottom: 16px;
	border-radius: 16px;
	background: var(--rml-glass);
	border: 1px solid var(--rml-brd);
}

.rml-toolbar__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rml-toolbar__search { flex: 1 1 200px; }

.rml-toolbar__search input {
	width: 100%;
	padding: 10px 14px;
	border-radius: 12px;
	border: 1px solid var(--rml-brd);
	background: rgba(255, 255, 255, 0.04);
	color: var(--rml-text);
	font: inherit;
	font-size: 0.94rem;
}

.rml-toolbar__count {
	margin: 0;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--rml-cyan);
	white-space: nowrap;
}

/* ---------- roster ---------- */
.rml-roster {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	/* Room for the sticky bar so the last row is never trapped under it. */
	padding-bottom: 160px;
}

.rml-student {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 16px 10px 10px;
	border-radius: 14px;
	background: var(--rml-glass);
	border: 1px solid var(--rml-brd);
	transition: border-color 0.25s, background 0.25s;
}

.rml-student[hidden] { display: none; }
.rml-student.is-on { border-color: var(--rml-cyan); background: rgba(82, 226, 251, 0.07); }

/*
 * A generous target. On a phone the teacher is tapping through twenty-seven
 * of these with a thumb, so the label wraps a 48px box rather than the 16px
 * the checkbox would occupy on its own.
 */
.rml-student__check {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 48px;
	height: 48px;
	margin: 0;
	border-radius: 12px;
	cursor: pointer;
}

.rml-student__check:hover { background: rgba(255, 255, 255, 0.05); }

.rml-student__check input {
	width: 24px;
	height: 24px;
	margin: 0;
	accent-color: var(--rml-cyan);
	cursor: pointer;
}

.rml-student__check input:focus-visible {
	outline: 2px solid var(--rml-cyan);
	outline-offset: 3px;
}

.rml-student__avatar { flex: none; }
.rml-student__body { flex: 1; min-width: 0; }

.rml-student__name {
	display: block;
	font-weight: 600;
	color: inherit;
	text-decoration: none;
}

.rml-student__name:hover { text-decoration: underline; }
.rml-student__meta { display: block; font-size: 0.82rem; color: var(--rml-dim); }
.rml-student__one { flex: none; }

/*
 * Status is shown as a word, not only a colour — a teacher scanning a list has
 * to be able to tell "waiting" from "active" without relying on hue.
 */
.rml-badge {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	border: 1px solid var(--rr-line, rgba(255, 255, 255, 0.14));
	color: var(--rml-dim, #7d86ad);
}

.rml-badge--imported { color: var(--rml-gold, #ffc866); border-color: rgba(255, 200, 102, 0.4); }
.rml-badge--active { color: #7ef0c2; border-color: rgba(126, 240, 194, 0.4); }
.rml-badge--deactivated,
.rml-badge--archived { color: #ff9c9c; border-color: rgba(255, 140, 140, 0.35); }

/* ---------- sticky group bar ---------- */
.rml-groupbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 8000;
	padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
	background: rgba(11, 14, 34, 0.94);
	border-top: 1px solid var(--rml-brd);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	box-shadow: 0 -18px 40px -24px rgba(0, 0, 0, 0.9);
}

.rml-groupbar[hidden] { display: none; }

.rml-groupbar__inner {
	width: min(100% , 1180px);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.rml-groupbar__count {
	margin: 0;
	font-weight: 700;
	white-space: nowrap;
	color: var(--rml-cyan);
}

.rml-groupbar__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	flex: 1;
}

/* The panel opens upward, above the bar. */
.rml-more--bar {
	width: min(100%, 1180px);
	margin: 14px auto 0;
	max-height: 46vh;
	overflow-y: auto;
	background: rgba(13, 17, 48, 0.98);
}

/* ---------- confirmation list ---------- */
.rml-preview {
	list-style: none;
	margin: 6px 0 18px;
	padding: 0;
	max-height: 240px;
	overflow-y: auto;
	border: 1px solid var(--rml-brd);
	border-radius: 12px;
}

.rml-preview__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border-bottom: 1px solid var(--rml-brd);
}

.rml-preview__item:last-child { border-bottom: 0; }
.rml-preview__name { flex: 1; min-width: 0; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rml-preview__points {
	flex: none;
	width: 78px;
	padding: 6px 8px;
	border-radius: 8px;
	border: 1px solid var(--rml-brd);
	background: rgba(255, 255, 255, 0.05);
	color: var(--rml-text);
	font: inherit;
	font-size: 0.88rem;
	text-align: right;
}

.rml-preview__drop {
	flex: none;
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--rml-dim);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.rml-preview__drop:hover { color: #ff9c9c; background: rgba(255, 90, 90, 0.1); }

/* A selection the search is hiding must look different from a calm count. */
.rml-toolbar__count.is-warning { color: var(--rml-gold); white-space: normal; }

.rml-alert--warn {
	border-color: rgba(255, 200, 102, 0.5);
	background: rgba(255, 200, 102, 0.08);
	margin: 0 0 16px;
}

/* ---------- result panel ---------- */
.rml-result {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 9200;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	border-radius: 18px;
	background: #0d1130;
	border: 1px solid rgba(126, 240, 194, 0.45);
	box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.95);
	max-width: calc(100% - 32px);
}

.rml-result[hidden] { display: none; }
.rml-result__body p { margin: 0; }
.rml-result__what { font-weight: 700; font-size: 0.96rem; }
.rml-result__done { font-size: 0.92rem; color: #7ef0c2; margin-top: 3px !important; }
.rml-result__rest { font-size: 0.86rem; color: var(--rml-dim); margin-top: 2px !important; }
.rml-result__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

/* ---------- success toast ---------- */
.rml-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 9200;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	border-radius: 999px;
	background: #0d1130;
	border: 1px solid rgba(126, 240, 194, 0.45);
	box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.95);
	font-size: 0.94rem;
	max-width: calc(100% - 32px);
}

.rml-toast[hidden] { display: none; }

/* ---------- phone ---------- */
@media (max-width: 780px) {

	.rml-toolbar { flex-direction: column; align-items: stretch; }
	.rml-toolbar__actions { display: grid; grid-template-columns: repeat(3, 1fr); }

	/* In a column the 1 1 200px basis stretched the field into a tall gap. */
	.rml-toolbar__search { flex: none; }

	.rml-toolbar__count { text-align: center; }

	/* Card layout: the name gets its own line so it is never truncated. */
	.rml-student {
		flex-wrap: wrap;
		padding: 12px;
		row-gap: 10px;
	}

	.rml-student__body { flex: 1 1 auto; }
	.rml-student__one { flex: 1 0 100%; }

	.rml-roster { padding-bottom: 220px; }

	.rml-groupbar { padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); }
	.rml-groupbar__count { flex: 1 0 100%; text-align: center; font-size: 0.9rem; }

	/* Horizontal scroll beats wrapping into a four-line wall of buttons. */
	.rml-groupbar__chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 4px;
		scrollbar-width: none;
	}

	.rml-groupbar__chips::-webkit-scrollbar { display: none; }
	.rml-groupbar__chips .rml-chip { flex: none; }

	/* Full-height sheet, easier to reach one-handed than a centred box. */
	.rml-more--bar {
		position: fixed;
		inset: 0;
		margin: 0;
		max-height: none;
		border-radius: 0;
		padding: 20px;
		padding-bottom: 90px;
		z-index: 8500;
	}

	.rml-toast,
	.rml-result {
		left: 12px;
		right: 12px;
		bottom: 12px;
		transform: none;
		max-width: none;
		border-radius: 16px;
		justify-content: space-between;
	}

	.rml-result__actions { margin-left: 0; width: 100%; }
	.rml-result__actions > * { flex: 1; }

	.rml-toolbar__actions { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.rml-classcard:hover { transform: none; }
}