.smrc-att-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-bottom: 14px;
}

.smrc-att-toolbar label {
	font-weight: 600;
	color: var(--smrc-ink);
	margin-right: 4px;
}

.smrc-att-quickbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 12px;
}

.smrc-att-table td, .smrc-att-table th { vertical-align: middle; }

/* Status pill on the Parent Portal's Attendance history table - matches
   the present/absent colors already used across the attendance charts. */
.smrc-pill.present { background: var(--smrc-success-bg); color: #166534; }
.smrc-pill.absent  { background: var(--smrc-danger-bg); color: #991b1b; }

.smrc-att-status-group {
	display: inline-flex;
	border-radius: 999px;
	overflow: hidden;
	border: 1px solid var(--smrc-border);
}

.smrc-att-status-btn {
	border: 0;
	background: transparent;
	padding: 6px 14px;
	cursor: pointer;
	font-weight: 600;
	font-size: .82rem;
	color: var(--smrc-body);
}

.smrc-att-status-btn.present.active { background: var(--smrc-success); color: #fff; }
.smrc-att-status-btn.absent.active { background: var(--smrc-danger); color: #fff; }

.smrc-att-nontrackable {
	padding: 14px 16px;
	border-radius: var(--smrc-radius-sm);
	background: var(--smrc-warn-bg);
	color: #92400e;
	font-weight: 600;
	margin-bottom: 12px;
}

.smrc-att-charts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
	margin: 14px 0;
}

.smrc-att-chart-card canvas {
	width: 100%;
	max-height: 260px;
}

.smrc-att-stat-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 14px;
}

.smrc-att-stat {
	flex: 1 1 140px;
	background: var(--smrc-card-bg, #fff);
	border: 1px solid var(--smrc-border);
	border-radius: var(--smrc-radius-sm);
	padding: 14px;
	text-align: center;
}

.smrc-att-stat .num { font-size: 1.6rem; font-weight: 800; color: var(--smrc-ink); display: block; }
.smrc-att-stat .lbl { font-size: .78rem; color: var(--smrc-muted); }

.smrc-att-risk-row.high { background: var(--smrc-danger-bg); }
.smrc-att-risk-row.med { background: var(--smrc-warn-bg); }

.smrc-att-dayoff-list { list-style: none; padding: 0; margin: 10px 0; }
.smrc-att-dayoff-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 10px;
	border-bottom: 1px solid var(--smrc-border);
	gap: 10px;
}

@media (max-width: 782px) {
	.smrc-att-toolbar { flex-direction: column; align-items: stretch; }
	.smrc-att-toolbar select, .smrc-att-toolbar input { width: 100%; }
}