/*
 * Same brand palette as the check-in page (assets/css/public.css) —
 * deep maroon, warm saffron, muted gold, warm ivory — but laid out as a
 * wider dashboard rather than a mobile-first single card, since this
 * report is more likely to be reviewed on a desktop by a teacher/sevak.
 *
 * RESPONSIVE APPROACH: this uses CSS CONTAINER queries (@container),
 * not viewport media queries. That distinction matters here specifically
 * — if the WordPress theme/page template embeds this shortcode inside a
 * narrower column than the full browser width (a common cause of a
 * report looking "mobile" even on a wide desktop screen), a viewport
 * media query would never fire, because the *browser* is wide even
 * though the *space actually given to this report* isn't. A container
 * query checks the report's own rendered width instead, so it adapts
 * correctly no matter how narrow or wide a space the surrounding page
 * puts it in. Requires a container-type on the ancestor (set below) —
 * supported in all browsers from 2023 onward.
 *
 * BREAKOUT: even with container queries adapting gracefully, some themes
 * constrain their content column narrowly enough (e.g. ~500-600px) that
 * the report never gets to use the desktop layout at all, no matter how
 * wide the browser is. .caa-report-breakout below is a standard "full
 * bleed" CSS technique that ignores the theme's content column entirely
 * and spans the full page width instead, so this report always gets as
 * much room as the actual page (not just the theme's text column) has to
 * offer, regardless of where it's embedded.
 *
 * THEME BUTTON/TEXT OVERRIDES: several rules below carry !important.
 * That's deliberate, not sloppiness — some WordPress themes apply their
 * own global styling to bare <button>/<h2> elements (e.g. forcing
 * uppercase text or a theme accent color), which can silently override
 * ours since a generic element selector loaded later in the cascade can
 * still win. The !important flags guard specifically against that.
 *
 * Scoped entirely under .caa-report so it can't leak onto or be leaked
 * onto by the rest of whatever page it's embedded in.
 */

.caa-report-breakout {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

.caa-report {
	--caa-maroon: #6E1F2A;
	--caa-maroon-dark: #551722;
	--caa-saffron: #C9692F;
	--caa-gold: #B8892A;
	--caa-cream: #FBF6EC;
	--caa-cream-deep: #F3E7D2;
	--caa-ink: #2B1810;
	--caa-ink-soft: #7A6A5D;
	--caa-border: #E4D6BC;

	container-type: inline-size;
	container-name: caa-report;

	box-sizing: border-box;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	padding: 20px;
	font-family: 'Mukta', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--caa-ink);
}
.caa-report,
.caa-report *,
.caa-report *::before,
.caa-report *::after {
	box-sizing: border-box;
}

.caa-report-header {
	background: var(--caa-maroon);
	color: var(--caa-cream);
	padding: 24px 24px 20px;
	border-radius: 14px 14px 0 0;
}
.caa-report-title {
	font-family: 'Yatra One', cursive !important;
	font-size: 1.8em !important;
	color: #fff !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	margin: 0 0 4px !important;
}
.caa-report-subtitle {
	color: #EBD9CE;
	font-size: 0.95em;
	text-transform: none !important;
}

.caa-report-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 14px;
	background: var(--caa-cream);
	border: 1px solid var(--caa-border);
	border-top: none;
	padding: 18px 24px;
}
.caa-report-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.caa-report-field label {
	font-weight: 600;
	font-size: 0.85em;
	color: var(--caa-ink);
}
.caa-report-field select,
.caa-report-field input {
	padding: 10px 12px;
	border: 1.5px solid var(--caa-border);
	border-radius: 8px;
	font-family: inherit;
	font-size: 0.95em;
	background: #fff;
	color: var(--caa-ink);
	min-height: 42px;
}
.caa-report-btn {
	padding: 11px 20px !important;
	background: var(--caa-maroon) !important;
	color: var(--caa-cream) !important;
	border: none !important;
	border-radius: 8px !important;
	font-family: inherit !important;
	font-weight: 700 !important;
	font-size: 0.95em !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	line-height: normal !important;
	cursor: pointer;
}
.caa-report-btn:hover { background: var(--caa-maroon-dark) !important; }

.caa-report-empty {
	background: var(--caa-cream);
	border: 1px solid var(--caa-border);
	border-top: none;
	border-radius: 0 0 14px 14px;
	padding: 24px;
	color: var(--caa-ink-soft);
	text-align: center;
}

.caa-report-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	background: var(--caa-cream);
	border: 1px solid var(--caa-border);
	border-top: none;
	padding: 20px 24px;
}
.caa-report-card {
	background: #fff;
	border: 1.5px solid var(--caa-border);
	border-radius: 10px;
	padding: 16px;
	text-align: center;
}
.caa-report-card-value {
	font-size: 2em;
	font-weight: 700;
	color: var(--caa-ink);
	line-height: 1.1;
}
.caa-report-card-label {
	font-size: 0.85em;
	color: var(--caa-ink-soft);
	margin-top: 4px;
}
.caa-report-card-present .caa-report-card-value { color: #3F7D4F; }
.caa-report-card-absent .caa-report-card-value { color: #A6342A; }
.caa-report-card-rate .caa-report-card-value { color: var(--caa-saffron); }

.caa-report-trend {
	background: var(--caa-cream);
	border: 1px solid var(--caa-border);
	border-top: none;
	border-bottom: none;
	padding: 20px 24px 28px;
}
.caa-report-trend h2,
.caa-report-matrix-section h2 {
	font-family: 'Yatra One', cursive !important;
	font-weight: 400 !important;
	font-size: 1.3em !important;
	color: var(--caa-maroon) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	margin: 0 0 4px !important;
}
.caa-report-trend-note {
	font-size: 0.85em;
	color: var(--caa-ink-soft);
	margin: 0 0 14px;
}
.caa-report-chart-scroll {
	overflow-x: auto;
	padding-bottom: 4px;
}
.caa-report-chart-scroll svg {
	display: block;
}

.caa-report-matrix-section {
	background: var(--caa-cream);
	border: 1px solid var(--caa-border);
	border-top: none;
	border-radius: 0 0 14px 14px;
	padding: 20px 24px 24px;
}
.caa-report-matrix-scroll {
	overflow-x: auto;
	border: 1px solid var(--caa-border);
	border-radius: 8px;
}
.caa-report-matrix-table {
	border-collapse: collapse;
	width: 100%;
	font-size: 0.9em;
	background: #fff;
}
.caa-report-matrix-table th,
.caa-report-matrix-table td {
	padding: 8px 12px;
	text-align: center;
	border-bottom: 1px solid var(--caa-border);
	white-space: nowrap;
}
.caa-report-matrix-table thead th {
	background: var(--caa-cream-deep);
	color: var(--caa-ink);
	font-weight: 600;
}
/* Sticky name column so it stays visible while scrolling through many dates. */
.caa-matrix-name-col {
	text-align: left !important;
	position: sticky;
	left: 0;
	background: #fff;
	font-weight: 600;
	z-index: 1;
}
thead .caa-matrix-name-col {
	background: var(--caa-cream-deep);
	z-index: 2;
}
.caa-matrix-present {
	color: #3F7D4F;
	font-weight: 700;
}
.caa-matrix-absent {
	color: #C9BBA0;
}
.caa-report-matrix-table tbody tr:nth-child(even) td:not(.caa-matrix-name-col) {
	background: #FBF9F4;
}

/*
 * Container queries — see the note at the top of this file for why
 * these check .caa-report's own rendered width rather than the browser
 * viewport (@media). Two steps down from the 4-column desktop default:
 * a 2-column tablet-ish step, then a fully stacked single-column step
 * for genuinely narrow spaces (phones, or a narrow theme content column).
 */
@container caa-report (max-width: 640px) {
	.caa-report-cards { grid-template-columns: repeat(2, 1fr); }
}

@container caa-report (max-width: 480px) {
	.caa-report { padding: 12px; }
	.caa-report-header,
	.caa-report-filters,
	.caa-report-cards,
	.caa-report-trend,
	.caa-report-matrix-section,
	.caa-report-empty {
		border-radius: 0;
		padding-left: 16px;
		padding-right: 16px;
	}
	.caa-report-cards { grid-template-columns: repeat(2, 1fr); }
	.caa-report-filters { flex-direction: column; align-items: stretch; }
	.caa-report-btn { width: 100%; }
}

/*
 * Fallback for older browsers without container-query support (pre-2023):
 * falls back to a viewport media query so it still degrades sensibly
 * rather than staying rigidly 4-column on an actual small phone.
 */
@supports not (container-type: inline-size) {
	@media (max-width: 640px) {
		.caa-report { padding: 12px; }
		.caa-report-header,
		.caa-report-filters,
		.caa-report-cards,
		.caa-report-trend,
		.caa-report-matrix-section,
		.caa-report-empty {
			border-radius: 0;
			padding-left: 16px;
			padding-right: 16px;
		}
		.caa-report-cards { grid-template-columns: repeat(2, 1fr); }
		.caa-report-filters { flex-direction: column; align-items: stretch; }
		.caa-report-btn { width: 100%; }
	}
}