/**
 * MJEU QR check-in scanner — front-end styles.
 * Scoped under .mjeu-checkin / .mjeu-checkin-gate so nothing leaks site-wide.
 * Mobile-first: the scanner is used on phones at the door.
 */

.mjeu-checkin,
.mjeu-checkin-gate {
	max-width: 480px;
	margin: 1.5rem auto;
	font-family: inherit;
}

.mjeu-checkin-gate {
	text-align: center;
	padding: 2rem 1.25rem;
	background: #f4f6f9;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
}

.mjeu-checkin-gate p {
	margin: 0 0 1rem;
	color: #0E2747;
}

/* Top bar (link to the roster list) */
.mjeu-checkin-bar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 0.6rem;
}

.mjeu-checkin-link {
	font-weight: 600;
	color: #185FA5;
	text-decoration: none;
}

.mjeu-checkin-link:hover {
	text-decoration: underline;
}

/* Camera viewport */
.mjeu-checkin-reader {
	width: 100%;
	aspect-ratio: 1 / 1;
	max-width: 360px;
	margin: 0 auto;
	background: #0E2747;
	border-radius: 14px;
	overflow: hidden;
}

.mjeu-checkin-reader video,
.mjeu-checkin-reader img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	border-radius: 14px;
}

.mjeu-checkin-controls {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	margin: 1rem 0;
}

.mjeu-checkin .button {
	background: #185FA5;
	border-color: #185FA5;
	color: #fff;
}

.mjeu-checkin .mjeu-checkin-stop {
	background: #64748b;
	border-color: #64748b;
}

/* Result card */
.mjeu-ci-card {
	border-radius: 14px;
	padding: 1.25rem;
	border: 2px solid transparent;
	background: #fff;
	box-shadow: 0 4px 18px rgba( 14, 39, 71, 0.10 );
}

.mjeu-ci-card.is-success {
	border-color: #1D9E75;
	background: #f0fbf6;
}

.mjeu-ci-card.is-already {
	border-color: #BA7517;
	background: #fdf7ee;
}

.mjeu-ci-card.is-invalid,
.mjeu-ci-card.is-denied {
	border-color: #c0392b;
	background: #fdf1ef;
}

.mjeu-ci-head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.35rem;
}

.mjeu-ci-icon {
	font-size: 1.75rem;
	line-height: 1;
}

.mjeu-ci-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: #0E2747;
}

.mjeu-ci-msg {
	margin: 0 0 0.9rem;
	color: #334155;
}

.mjeu-ci-info {
	margin: 0 0 1rem;
	padding: 0.75rem 0 0;
	border-top: 1px solid rgba( 14, 39, 71, 0.10 );
}

.mjeu-ci-row {
	display: flex;
	gap: 0.75rem;
	padding: 0.25rem 0;
}

.mjeu-ci-row dt {
	flex: 0 0 4.5rem;
	color: #64748b;
	font-size: 0.9rem;
}

.mjeu-ci-row dd {
	margin: 0;
	color: #0E2747;
	font-weight: 600;
	word-break: break-word;
}

.mjeu-ci-next {
	width: 100%;
	background: #185FA5 !important;
	border-color: #185FA5 !important;
	color: #fff !important;
}

/* -------------------------------------------------------------------------- *
 * Roster ([mep_checkin_roster])
 * -------------------------------------------------------------------------- */

.mjeu-roster {
	max-width: 640px;
	margin: 1.5rem auto;
	font-family: inherit;
}

.mjeu-roster-top {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-bottom: 1rem;
}

.mjeu-roster-event,
.mjeu-roster-search {
	flex: 1 1 12rem;
	min-width: 0;
	padding: 0.55rem 0.7rem;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	font-size: 1rem;
	background: #fff;
	color: #0E2747;
}

/* Summary: overall line + per-ticket-type breakdown. */
.mjeu-roster-summary {
	margin-bottom: 0.75rem;
	padding: 0.6rem 0.9rem;
	background: #0E2747;
	color: #fff;
	border-radius: 8px;
	text-align: center;
}

.mjeu-roster-total {
	font-weight: 700;
	font-size: 1.05rem;
}

.mjeu-roster-bytype {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.35rem 0.75rem;
	margin-top: 0.45rem;
	padding-top: 0.45rem;
	border-top: 1px solid rgba( 255, 255, 255, 0.18 );
	font-size: 0.85rem;
}

.mjeu-roster-tt .tt-name {
	color: #cbd5e1;
}

.mjeu-roster-tt .tt-num b {
	color: #6ee7b7;
}

.mjeu-roster-note {
	text-align: center;
	color: #64748b;
	padding: 1.5rem 0.5rem;
	margin: 0;
}

.mjeu-roster-note.is-error {
	color: #c0392b;
}

/* View filter chips */
.mjeu-roster-filters {
	display: flex;
	gap: 0.4rem;
	margin-bottom: 0.75rem;
}

.mjeu-roster-fbtn {
	flex: 1 1 auto;
	padding: 0.4rem 0.6rem;
	border: 1px solid #cbd5e1;
	border-radius: 999px;
	background: #fff;
	color: #334155;
	font-size: 0.9rem;
	cursor: pointer;
}

.mjeu-roster-fbtn.is-on {
	background: #185FA5;
	border-color: #185FA5;
	color: #fff;
	font-weight: 600;
}

/* Compact table (horizontally scrollable on narrow screens). */
.mjeu-roster-list {
	overflow-x: auto;
}

.mjeu-roster-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.mjeu-roster-table th {
	text-align: left;
	font-size: 0.8rem;
	color: #64748b;
	font-weight: 600;
	padding: 0.35rem 0.5rem;
	border-bottom: 2px solid #e2e8f0;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
}

.mjeu-roster-table th.is-sorted {
	color: #185FA5;
}

.mjeu-rt-sortind {
	font-size: 0.7rem;
}

.mjeu-roster-table th.mjeu-rt-stat,
.mjeu-rt-stat {
	text-align: center;
	width: 6.5rem;
}

.mjeu-rt-order {
	font-variant-numeric: tabular-nums;
	color: #475569;
	white-space: nowrap;
}

.mjeu-rt-type {
	color: #475569;
	white-space: nowrap;
}

.mjeu-roster-table td {
	padding: 0.3rem 0.5rem;
	border-bottom: 1px solid #eef2f6;
	vertical-align: middle;
}

.mjeu-rt-no {
	font-variant-numeric: tabular-nums;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	color: #475569;
	white-space: nowrap;
}

.mjeu-rt-name {
	font-weight: 600;
	color: #0E2747;
	word-break: break-word;
}

.mjeu-roster-tr.is-in {
	background: #f0fbf6;
}

/* Status cell = tap-to-toggle badge (green = checked in, red = not). */
.mjeu-rt-badge {
	width: 100%;
	padding: 0.3rem 0.4rem;
	border-radius: 999px;
	border: 1px solid transparent;
	font-size: 0.85rem;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
}

.mjeu-rt-badge.is-in {
	background: #1D9E75;
	border-color: #1D9E75;
	color: #fff;
}

.mjeu-rt-badge.is-out {
	background: #fdecea;
	border-color: #e2b4ad;
	color: #c0392b;
}

.mjeu-rt-badge[disabled] {
	opacity: 0.5;
	cursor: default;
}