/*
 * Scale Model Contest Registration — Data Dashboard styles
 * File: assets/css/smcr-infographic-styles.css
 * Used by: templates/infographic-container.php (shortcode [scale_model_infographic])
 *
 * Sizing/layout stays fixed/hardcoded, same as before. Neutral and
 * brand colors (title, stat values, card chrome, muted labels) now
 * resolve to the active theme's color management via CSS custom
 * properties, each with a fallback matching this file's pre-3.14.0
 * hardcoded value. #1a3c6e was this plugin's former --smcr-color-primary
 * design token (see the 3.11.0 note below) and is the natural fit for
 * the theme's accent color. The error/access-denied red stays literal
 * — a status color, not a brand color.
 *
 * @since 3.8.1
 * @since 3.9.3 Added .smcr-stat-value-list for the Peak Registration
 *              Day(s) card, which now renders as a list (see
 *              smcr-infographic.js) instead of a single line of
 *              comma-separated text.
 * @since 3.11.0 Replaced the --smcr-color-primary custom property
 *               reference with its literal value, following the
 *               removal of the plugin-wide Appearance token system.
 * @since 3.14.0 Neutral/brand colors (not the error status color)
 *               converted to consume the active theme's color
 *               management (tested against GeneratePress Global
 *               Colors) via var(), each with a hardcoded fallback.
 *               Sizing/layout unchanged.
 * @since 3.14.3 "Email PDF Report" button no longer sets its own
 *               background/text colors, so it follows the theme's
 *               button colors (incl. hover) instead of the Global
 *               Colors accent — GeneratePress button colors are not
 *               exposed as CSS custom properties. Title and stat-value
 *               colors still use var(--accent), unchanged.
 * @since 3.14.4 .smcr-stat-card background falls back to transparent
 *               instead of a hardcoded light grey when the theme has
 *               no --base color defined, matching smcr-styles.css.
 *               The existing border keeps each card legible either
 *               way.
 * @since 3.15.0 Adopted the plugin's curated default palette (warm
 *               neutrals + deep rust accent) in place of the old
 *               generic fallbacks, incl. .smcr-stat-card's background
 *               (no longer transparent-by-default now that a real
 *               curated default exists). "Email PDF Report" reverses
 *               3.14.3: it's plugin-controlled again with a solid
 *               accent fill, matching the primary-button treatment
 *               adopted in smcr-styles.css.
 * @since 3.17.1 Every block (stat cards, chart, breakdown columns, the
 *               merged fees/age-bracket card) now shares one look: light
 *               --base background, --contrast-3 border, --contrast-2
 *               labels, --accent figures. Added .smcr-bracket-table.
 * @since 3.17.2 Added print styles (section 7): the theme's sticky header
 *               no longer repeats over pages 2+, cards no longer split
 *               across pages, and later pages get a top margin.
 */

/* ---------------------------------------------------------------------
 * 1. Page header ("Scale Model Contest Statistics")
 * ------------------------------------------------------------------- */
.smcr-infographic-title {
	font-weight: bold;
	text-align: center;
	font-size: 2rem;
	margin: 0 0 1.5rem 0;
	color: var(--accent, #A8502F);
}

/* ---------------------------------------------------------------------
 * 2. Loading / error / access-denied states
 *    (.smcr-infographic-gate is rendered server-side by the shortcode
 *    class itself for logged-out/no-access visitors, before any of
 *    this page's assets are even enqueued — styled here too so it's
 *    never unstyled if this stylesheet happens to load anyway.)
 * ------------------------------------------------------------------- */
.smcr-infographic-loading,
.smcr-infographic-gate {
	text-align: center;
	padding: 2rem 1rem;
	color: var(--contrast-2, #5C5347);
}

.smcr-infographic-error {
	max-width: 600px;
	margin: 0 auto 1.5rem auto;
	padding: 0.75rem 1rem;
	border: 1px solid #d63638;
	background: #fcf0f1;
	color: #d63638;
	border-radius: 4px;
	text-align: center;
}

/* ---------------------------------------------------------------------
 * 3. Stat grid — every individual figure requested in the spec
 *    (registrations, fees, ages, averages, etc.) renders as one
 *    "card" here. Labels are always bold + left aligned per spec;
 *    values sit below, larger and unbolded.
 * ------------------------------------------------------------------- */
.smcr-stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1rem;
	margin-bottom: 2rem;
}

.smcr-stat-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* keeps the bold label left-aligned per spec */
	padding: 0.9rem 1rem;
	border: 1px solid var(--contrast-3, #C9BFA0);
	border-radius: 6px;
	background: var(--base, #E8E8E8);
}

.smcr-stat-label {
	font-weight: bold;
	text-align: left;
	font-size: 0.8rem;
	color: var(--contrast-2, #5C5347);
	margin-bottom: 0.35rem;
}

.smcr-stat-value {
	font-size: 1.3rem;
	color: var(--accent, #A8502F);
}

/* Peak Registration Day(s) card: a plain stacked list (one date per
 * line) rather than the label/count row layout .smcr-breakdown-list
 * uses below — there's no count to align here, just dates. Matches
 * .smcr-stat-value's size/color so it reads the same as every other
 * card's value. */
.smcr-stat-value-list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 1.3rem;
	color: var(--accent, #A8502F);
}

.smcr-stat-value-list li {
	line-height: 1.3;
}

/* ---------------------------------------------------------------------
 * 4. Growth chart (Chart.js line graph, see smcr-infographic.js)
 * ------------------------------------------------------------------- */
.smcr-chart-section {
	margin-bottom: 2rem;
	padding: 1rem;
	border: 1px solid var(--contrast-3, #C9BFA0);
	border-radius: 6px;
	background: var(--base, #E8E8E8);
}

.smcr-chart-section canvas {
	width: 100% !important;
	max-height: 320px;
}

/* ---------------------------------------------------------------------
 * 5. Breakdown lists (devices / OS / browsers / top states) — a
 *    simple four-column row of "label: count" lists.
 * ------------------------------------------------------------------- */
.smcr-breakdown-section {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.smcr-breakdown-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 0.9rem 1rem;
	border: 1px solid var(--contrast-3, #C9BFA0);
	border-radius: 6px;
	background: var(--base, #E8E8E8);
}

.smcr-breakdown-list {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	font-size: 0.85rem;
}

.smcr-breakdown-list li span:first-child {
	color: var(--contrast-2, #5C5347);
}

.smcr-breakdown-list li span:last-child {
	color: var(--accent, #A8502F);
}

.smcr-breakdown-list li {
	display: flex;
	justify-content: space-between;
	padding: 0.15rem 0;
	border-bottom: 1px dotted var(--contrast-3, #C9BFA0);
}

/* Fees Estimated To Be Collected By Age Bracket (inside a stat card) */
.smcr-bracket-wrap {
	width: 100%;
	overflow-x: auto;
}

.smcr-bracket-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.smcr-bracket-table th,
.smcr-bracket-table td {
	padding: 0.4rem 0.6rem;
	text-align: right;
	border: 0;
	border-bottom: 1px solid var(--contrast-3, #C9BFA0);
	background: transparent;
	color: var(--contrast-2, #5C5347);
}

.smcr-bracket-table th:first-child,
.smcr-bracket-table td:first-child {
	text-align: left;
}

.smcr-bracket-table th {
	font-size: 0.8rem;
	font-weight: bold;
	white-space: nowrap;
}

.smcr-bracket-table td:last-child,
.smcr-bracket-table tfoot td {
	color: var(--accent, #A8502F);
}

.smcr-bracket-table tfoot td {
	font-weight: bold;
	border-bottom: 0;
	border-top: 2px solid var(--contrast-3, #C9BFA0);
}

/* ---------------------------------------------------------------------
 * 6. "Email PDF Report" footer control
 * ------------------------------------------------------------------- */
.smcr-email-report-section {
	text-align: center;
	padding-top: 1rem;
	border-top: 1px solid var(--contrast-3, #C9BFA0);
}

/* As of 3.15.0, this reverses 3.14.3: the button is plugin-controlled
 * again (var()-driven, curated-palette fallback), matching the
 * primary-button treatment adopted across the rest of the plugin —
 * see smcr-styles.css's 3.15.0 note for the full rationale. */
.smcr-email-report-btn {
	background: var(--accent, #A8502F);
	color: var(--base-3, #FFFFFF);
	border: none;
	border-radius: 4px;
	padding: 0.65rem 1.5rem;
	font-size: 1rem;
	cursor: pointer;
}

.smcr-email-report-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.smcr-email-report-status {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.85rem;
	color: var(--contrast-2, #5C5347);
}

/* ---------------------------------------------------------------------
 * 7. Print (since 3.17.2)
 *    This stylesheet is only enqueued on the page holding the
 *    [scale_model_infographic] shortcode, so the @page rules below
 *    affect that page's printout only.
 * ------------------------------------------------------------------- */

/* @page can't be nested inside @media print. Pages 2+ get a gap above
 * the contents; page 1 keeps a smaller margin because the header sits
 * there. (Browsers ignore these if the user sets Margins to None.) */
@page {
	margin-top: 0.6in;
}

@page :first {
	margin-top: 0.4in;
}

@media print {
	/* A sticky/fixed header is repeated by browsers at the top of every
	 * printed page, covering the content. Put it back in normal flow so it
	 * prints once. Targets GeneratePress's sticky navigation classes; the
	 * !important beats the inline position its sticky script sets. */
	.main-navigation,
	.main-navigation.is_stuck,
	.navigation-stick,
	.site-header,
	.site-header.is_stuck {
		position: static !important;
		top: auto !important;
		transform: none !important;
	}

	/* GeneratePress leaves a placeholder copy of the nav while stuck. */
	.navigation-clone {
		display: none !important;
	}

	/* Keep each card whole instead of cutting it across two pages. */
	.smcr-stat-card,
	.smcr-breakdown-col,
	.smcr-chart-section {
		break-inside: avoid;
	}
}