.smrc-att-today-card {
	text-align:center; padding:28px 20px; border-radius: var(--smrc-radius, 14px);
	background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(16,185,129,.06));
	border:1.5px solid rgba(15,23,42,.08); margin-bottom:18px;
}
.smrc-att-today-card .smrc-att-score { font-size:34px; font-weight:900; margin:10px 0 4px; }
.smrc-att-today-row { font-size:15px; margin:4px 0; }
.smrc-att-today-row .ok { color:#166534; font-weight:700; }
.smrc-att-today-row .pending { color:#92400e; font-weight:700; }

.smrc-att-scan-btn { font-size:16px; padding:16px 28px; border-radius:14px; }

#smrc-att-scanner-wrap { position:relative; max-width:420px; margin:16px auto; }
#smrc-att-scanner-wrap video { width:100%; border-radius:14px; background:#000; }
#smrc-att-scanner-frame {
	position:absolute; inset:12%; border:3px solid rgba(16,185,129,.85); border-radius:12px;
	box-shadow: 0 0 0 2000px rgba(0,0,0,.35);
}

.smrc-att-cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap:12px; margin:16px 0; }
.smrc-att-cards .smrc-card { padding:14px; border-radius:12px; background:#fff; border:1px solid rgba(15,23,42,.08); }
.smrc-att-cards .smrc-card .n { font-size:22px; font-weight:800; }
.smrc-att-cards .smrc-card .l { font-size:12px; color:var(--smrc-muted); font-weight:600; }

.smrc-pill.arrival_only { background: rgba(99,102,241,.14); color:#3730a3; }
.smrc-pill.complete { background: var(--smrc-success-bg); color:#166534; }
.smrc-pill.missing { background: var(--smrc-danger-bg); color:#991b1b; }
.smrc-pill.approved_absence { background: rgba(148,163,184,.18); color:#475569; }
.smrc-pill.not_yet { background: rgba(148,163,184,.12); color:#64748b; }
.smrc-pill.weekend { background: rgba(148,163,184,.10); color:#94a3b8; }
.smrc-pill.day_off { background: rgba(148,163,184,.10); color:#94a3b8; }
.smrc-pill.term_closed { background: rgba(148,163,184,.10); color:#94a3b8; }
.smrc-pill.fake { background: var(--smrc-danger-bg); color:#991b1b; }
.smrc-pill.confirmed { background: var(--smrc-success-bg); color:#166534; }
.smrc-pill.pending { background: var(--smrc-warn-bg); color:#92400e; }

.smrc-att-qr-box { text-align:center; padding:20px; }
.smrc-att-qr-box canvas { margin:0 auto; border-radius:12px; border:1px solid rgba(15,23,42,.1); }

/* The poster block itself (school name, title, QR, week/status, note).
   On screen this just sits centered inside .smrc-att-qr-box; the .smrc-print-doc
   class (smrc-reportcard.css) is what isolates/repositions it for Print. */
.smrc-att-qr-print-school { font-weight:800; font-size:15px; margin:0 0 2px; text-transform:uppercase; letter-spacing:.02em; }
.smrc-att-qr-print-title { font-weight:700; font-size:13px; margin:0 0 14px; color:var(--smrc-muted); }
.smrc-att-qr-print-meta { font-size:13px; margin:14px 0 4px; color:var(--smrc-muted); }
.smrc-att-qr-print-note { font-size:12px; margin:0 auto; max-width:320px; color:var(--smrc-muted); }
.smrc-att-qr-actions { margin-top:18px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.smrc-att-medal { font-size:18px; margin-right:4px; }
.smrc-att-rank-table td.staff-name { font-weight:700; }

@media (max-width: 720px) {
	.smrc-att-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ADDITION: Weekly/Monthly/Annual Arrival & Departure Detail report table. */
.smrc-pill.missing_departure { background: rgba(99,102,241,.14); color:#3730a3; }
.smrc-att-detail-table td, .smrc-att-detail-table th { white-space: nowrap; }