/* External QR Attendance gateway - intentionally self-contained (no
   dependency on smrc-base.css/smrc-ui-v13.css/etc), since this page is
   reached by an unauthenticated visitor and must stay small and fast. */

:root {
	--smrc-ext-blue: #1c3d7a;
	--smrc-ext-yellow: #f2c200;
	--smrc-ext-green: #17924a;
	--smrc-ext-red: #c62828;
	--smrc-ext-bg: #f4f6fb;
	--smrc-ext-card: #ffffff;
	--smrc-ext-text: #1a1a1a;
	--smrc-ext-muted: #6b7280;
}

.smrc-ext-att-wrap * { box-sizing: border-box; }

.smrc-ext-att-wrap {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	max-width: 420px;
	margin: 0 auto;
	padding: 24px 16px 40px;
	color: var(--smrc-ext-text);
	background: var(--smrc-ext-bg);
	min-height: 100vh;
}

.smrc-ext-att-header {
	text-align: center;
	margin-bottom: 20px;
}

.smrc-ext-att-logo {
	font-size: 40px;
	line-height: 1;
	margin-bottom: 6px;
}

.smrc-ext-att-header h1 {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 4px;
	color: var(--smrc-ext-blue);
}

.smrc-ext-att-tagline {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--smrc-ext-green);
}

.smrc-ext-att-body { width: 100%; }

.smrc-ext-att-loading {
	text-align: center;
	padding: 40px 0;
	color: var(--smrc-ext-muted);
	font-size: 15px;
}

.smrc-ext-att-card {
	background: var(--smrc-ext-card);
	border-radius: 14px;
	padding: 24px 20px;
	box-shadow: 0 2px 14px rgba(0,0,0,.08);
	text-align: center;
}

.smrc-ext-att-icon { font-size: 36px; margin-bottom: 10px; }

.smrc-ext-att-card h2 {
	font-size: 17px;
	margin: 0 0 16px;
	color: var(--smrc-ext-blue);
}

.smrc-ext-att-card p { font-size: 14px; line-height: 1.5; margin: 0 0 10px; }

.smrc-ext-att-school {
	font-weight: 700;
	color: var(--smrc-ext-blue);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .03em;
	margin-bottom: 4px;
}

.smrc-ext-att-muted { color: var(--smrc-ext-muted); font-size: 12px; }

#smrc-ext-att-pin-form input {
	width: 100%;
	font-size: 26px;
	letter-spacing: .5em;
	text-align: center;
	padding: 14px 10px;
	border: 2px solid #d7dce5;
	border-radius: 10px;
	margin-bottom: 16px;
	background: #fbfcfe;
	color: var(--smrc-ext-text);
}

#smrc-ext-att-pin-form input:focus {
	outline: none;
	border-color: var(--smrc-ext-blue);
}

.smrc-ext-att-btn {
	width: 100%;
	padding: 14px;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	background: var(--smrc-ext-blue);
	border: none;
	border-radius: 10px;
	cursor: pointer;
}

.smrc-ext-att-btn:active { opacity: .85; }

.smrc-ext-att-error .smrc-ext-att-icon { color: var(--smrc-ext-red); }
.smrc-ext-att-error h2, .smrc-ext-att-error p { color: var(--smrc-ext-red); }
.smrc-ext-att-error .smrc-ext-att-btn { background: var(--smrc-ext-red); }

.smrc-ext-att-success .smrc-ext-att-icon { font-size: 44px; }
.smrc-ext-att-success h2 { color: var(--smrc-ext-green); }

.smrc-ext-att-summary {
	width: 100%;
	border-collapse: collapse;
	margin: 14px 0;
	font-size: 14px;
}

.smrc-ext-att-summary td {
	padding: 8px 4px;
	border-bottom: 1px solid #eef1f6;
	text-align: left;
}

.smrc-ext-att-summary tr td:first-child {
	color: var(--smrc-ext-muted);
	width: 40%;
}

.smrc-ext-att-footer {
	text-align: center;
	font-size: 12px;
	color: var(--smrc-ext-muted);
	margin-top: 24px;
}

@media (max-width: 380px) {
	.smrc-ext-att-wrap { padding: 16px 12px 32px; }
	#smrc-ext-att-pin-form input { font-size: 22px; letter-spacing: .4em; }
}