/* Tutor Attendance — public/front-end styles. Mobile-first: the scanner
   is primarily used on a teacher's phone, so base styles target a narrow
   viewport and widen via min-width media queries. */

.tutat-scanner-app,
.tutat-student-qr-card,
.tutat-dashboard {
	max-width: 480px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Tahoma, Arial, sans-serif;
	color: #1d2327;
}

.tutat-btn {
	padding: 14px 20px;
	font-size: 16px;
	font-weight: 700;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: opacity 0.12s ease;
}
.tutat-btn-primary {
	background: #2271b1;
	color: #fff;
}
.tutat-btn-danger {
	background: #d63638;
	color: #fff;
}
.tutat-btn-busy {
	opacity: 0.6;
	pointer-events: none;
}

/* ---- Camera stage ----
   Everything the teacher needs while scanning is layered, with CSS, on
   top of one persistent live video element. The stage is mounted as soon
   as the page loads and is never torn down while the page is open — only
   its overlays (setup card vs. session header/controls) toggle. This is
   what makes "Start Attendance" instant: there is no camera (re)start at
   that moment, just an overlay swap. */
.tutat-camera-stage {
	position: relative;
	width: 100%;
	height: min(78vh, 640px);
	min-height: 340px;
	background: #000;
	overflow: hidden;
	border-radius: 0;
}

.tutat-reader {
	width: 100%;
	height: 100%;
	background: #000;
}
/* html5-qrcode sizes the <video>/<canvas> it inserts itself; force it to
   fill and crop to the stage so there's no letterboxing and the detector
   sees the largest possible frame. */
.tutat-reader video,
.tutat-reader canvas {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}
.tutat-reader-loading::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #000 radial-gradient(circle at center, rgba(255,255,255,0.08), transparent 60%);
}
.tutat-reader-error {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Decorative corner guides. In full-frame (hardware detector) mode these
   are just a loose visual cue — detection covers the whole frame, not
   just this region. In boxed (software-decoder fallback) mode they're
   sized to match the actual bounded scan region passed as `qrbox` in
   scanner.js, so what the teacher sees lines up with what's really being
   read — see the nativeDetectorSupported branch in startCamera(). */
.tutat-reader-guides {
	position: absolute;
	inset: 10% 10% 24% 10%;
	pointer-events: none;
	transition: inset 0.15s ease;
}
.tutat-full-frame ~ .tutat-reader-guides {
	inset: 4% 4% 18% 4%;
	opacity: 0.6;
}
.tutat-boxed ~ .tutat-reader-guides {
	inset: 12% 12% 26% 12%;
	opacity: 1;
}
.tutat-guide {
	position: absolute;
	width: 28px;
	height: 28px;
	border: 3px solid rgba(255, 255, 255, 0.55);
}
.tutat-guide-tl { top: 0; left: 0; border-right: none; border-bottom: none; border-radius: 6px 0 0 0; }
.tutat-guide-tr { top: 0; right: 0; border-left: none; border-bottom: none; border-radius: 0 6px 0 0; }
.tutat-guide-bl { bottom: 0; left: 0; border-right: none; border-top: none; border-radius: 0 0 0 6px; }
.tutat-guide-br { bottom: 0; right: 0; border-left: none; border-top: none; border-radius: 0 0 6px 0; }

/* Brief full-frame flash on every scan result — sits directly over the
   video so the teacher never has to look away from the camera to know a
   scan registered. Auto-clears itself (see scanner.js flashOverlay());
   scanning keeps running underneath the whole time. */
.tutat-scan-flash {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 76px;
	font-weight: 700;
	color: #fff;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.12s ease-out;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.tutat-scan-flash-active { opacity: 1; }
.tutat-scan-flash-ok { background: rgba(0, 163, 42, 0.38); }
.tutat-scan-flash-already { background: rgba(219, 166, 23, 0.4); }
.tutat-scan-flash-error { background: rgba(214, 54, 56, 0.4); }

/* ---- Pre-session setup card (floats over the already-live camera) ---- */
.tutat-setup {
	position: absolute;
	top: 12px;
	left: 12px;
	right: 12px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px;
	background: rgba(255, 255, 255, 0.97);
	border-radius: 14px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}
.tutat-setup h2 {
	margin: 0;
	font-size: 17px;
}
.tutat-setup label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-weight: 600;
	font-size: 14px;
}
.tutat-setup select,
.tutat-setup input[type="date"] {
	padding: 12px;
	font-size: 16px;
	border: 1px solid #c3c4c7;
	border-radius: 8px;
}
.tutat-setup-message {
	font-size: 13px;
	color: #d63638;
	font-weight: 600;
}

/* Shown when more than one course has a session already open for this
   teacher today (e.g. two recurring classes back-to-back) — see
   renderResumeStrip() in scanner.js. */
.tutat-resume-strip {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px;
	margin: -4px 0 4px;
	background: #fff8e5;
	border: 1px solid #f0c33c;
	border-radius: 10px;
}
.tutat-resume-label {
	font-size: 12px;
	font-weight: 700;
	color: #7a5b00;
}
.tutat-resume-btn {
	text-align: left;
	padding: 10px 12px;
	border: 1px solid #f0c33c;
	background: #fff;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
}
.tutat-resume-btn small {
	display: block;
	font-weight: 400;
	color: #646970;
	font-size: 11px;
}

/* ---- In-session header/controls (also float over the video) ---- */
.tutat-session-header {
	position: absolute;
	top: 12px;
	left: 12px;
	right: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 8px 8px 16px;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(6px);
	border-radius: 12px;
	color: #fff;
}
.tutat-progress {
	font-size: 20px;
	font-weight: 800;
	line-height: 1;
}
.tutat-progress small {
	display: block;
	font-size: 11px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.75);
	margin-top: 2px;
}
.tutat-session-header .tutat-btn-danger {
	padding: 10px 16px;
	font-size: 14px;
}

.tutat-scan-result {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	min-height: 54px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10px;
	text-align: center;
	color: #fff;
	background: rgba(0, 0, 0, 0.4);
	transition: background 0.15s ease;
}
.tutat-scan-result-idle { background: rgba(0, 0, 0, 0.32); }
.tutat-scan-hint {
	color: rgba(255, 255, 255, 0.85);
	font-size: 13px;
}
.tutat-scan-title {
	font-weight: 700;
	font-size: 16px;
}
.tutat-scan-subtitle {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.85);
}
.tutat-scan-result-ok { background: rgba(0, 163, 42, 0.88); }
.tutat-scan-result-already { background: rgba(219, 166, 23, 0.9); }
.tutat-scan-result-error { background: rgba(214, 54, 56, 0.9); }

.tutat-scanner-controls {
	position: absolute;
	bottom: 60px;
	right: 12px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}
.tutat-icon-btn {
	border: none;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	border-radius: 20px;
	padding: 10px 14px;
	font-size: 16px;
	cursor: pointer;
	backdrop-filter: blur(6px);
}
.tutat-manual-link {
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
}
.tutat-manual-form {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 60px;
	display: flex;
	gap: 8px;
	padding: 10px;
	background: rgba(255, 255, 255, 0.97);
	border-radius: 12px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}
.tutat-manual-form input {
	flex: 1;
	padding: 10px;
	font-size: 14px;
	border: 1px solid #c3c4c7;
	border-radius: 8px;
}
.tutat-manual-form .tutat-btn {
	padding: 10px 16px;
	font-size: 14px;
}

/* ---- Student list (below the camera stage) ---- */
.tutat-session {
	padding: 16px 0 0;
}
.tutat-session h3 {
	padding: 0 16px;
	margin: 12px 0 4px;
}
.tutat-student-list {
	list-style: none;
	margin: 0;
	padding: 0 16px 16px;
}
.tutat-student-row {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid #f0f0f1;
	font-size: 14px;
}
.tutat-status-present .tutat-student-status { color: #00a32a; }
.tutat-status-late .tutat-student-status { color: #dba617; }
.tutat-status-absent .tutat-student-status { color: #d63638; }

.tutat-summary {
	padding: 20px;
	text-align: center;
}

/* ---- Student QR card ---- */
.tutat-student-qr-card {
	text-align: center;
	padding: 24px;
	border: 1px solid #e0e0e0;
	border-radius: 14px;
}
.tutat-student-name {
	font-size: 20px;
	font-weight: 700;
	margin: 4px 0 0;
}
.tutat-student-id {
	color: #646970;
	margin: 0 0 16px;
}
.tutat-qr-image img {
	width: 220px;
	height: 220px;
}
.tutat-instruction {
	margin-top: 16px;
	color: #50575e;
	font-size: 14px;
}
.tutat-warning {
	color: #d63638;
}

/* ---- Student dashboard ---- */
.tutat-dashboard-summary {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin: 16px 0;
}
.tutat-summary-rate,
.tutat-summary-item {
	text-align: center;
	padding: 16px;
	border-radius: 10px;
	background: #f6f7f7;
}
.tutat-summary-rate span,
.tutat-summary-item span {
	display: block;
	font-size: 26px;
	font-weight: 800;
}
.tutat-summary-rate small,
.tutat-summary-item small {
	color: #646970;
	font-size: 12px;
}
.tutat-streak {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}
.tutat-streak-present {
	background: #edfaef;
	color: #00751a;
}
.tutat-streak-absent {
	background: #fcf0f1;
	color: #d63638;
}
.tutat-history-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.tutat-history-row {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 0;
	border-bottom: 1px solid #f0f0f1;
	font-size: 14px;
}

@media (min-width: 600px) {
	.tutat-summary {
		padding: 32px;
	}
	.tutat-camera-stage {
		height: min(70vh, 560px);
		border-radius: 16px;
	}
}