/* TDR shared design tokens and compliance report styles.
   Loaded on the front end alongside style.css and in wp-admin on the TDR
   Compliance screens, so both surfaces render from one definition. */

/* ============================================================================
   TDR DESIGN TOKENS
   One source of truth for the staff portal. Previously the dashboard carried
   two brand yellows one RGB step apart (#FFD430 and #FED332), maintained as
   separate constants across 24 declarations, and a type scale running 10px to
   2.5rem with no ratio behind it.

   #FFD430 is the canonical yellow: it matches the Elementor kit's
   --e-global-color-secondary, the nav pills and the parent-theme override.
   ========================================================================= */

:root {
	/* Brand ---------------------------------------------------------------- */
	--tdr-yellow: #FFD430;
	--tdr-yellow-deep: #E8B800;
	--tdr-yellow-soft: #FFF6D1;
	--tdr-yellow-line: #F2DE97;

	/* Ink and ground. Neutrals are warmed toward the brand hue rather than
	   pure grey, so the yellow sits in the same light as everything else. */
	--tdr-ink: #1C1A15;
	--tdr-ink-soft: #605B4E;
	--tdr-ink-mute: #8A8477;
	--tdr-bg: #FAF9F5;
	--tdr-surface: #FFFFFF;
	--tdr-surface-alt: #FCFBF7;
	--tdr-line: #E7E3D8;
	--tdr-line-soft: #F1EEE6;

	/* Status. Distinct in hue but pulled toward the same warmth, so a row of
	   badges reads as one family instead of a traffic light. */
	--tdr-ok: #1F6B45;
	--tdr-ok-bg: #E6F2EA;
	--tdr-warn: #8A5A00;
	--tdr-warn-bg: #FBF0D8;
	--tdr-bad: #9B2C22;
	--tdr-bad-bg: #FBE9E7;
	--tdr-idle: #605B4E;
	--tdr-idle-bg: #F1EEE6;

	/* Type. Absolute units on purpose: the portal renders inside MemberPress
	   and Elementor wrappers, and a rem scale here quietly resolved smaller
	   than the px sizes it replaced, shrinking card headings from 18px to 13px
	   and the statistics from 40px to 28px. px keeps the scale independent of
	   whatever sets the root size. Ratio is roughly 1.2, nothing below 13px. */
	--tdr-fs-xs: 13px;
	--tdr-fs-sm: 15px;
	--tdr-fs-base: 16px;
	--tdr-fs-md: 19px;
	--tdr-fs-lg: 23px;
	--tdr-fs-xl: 30px;
	--tdr-fs-2xl: 38px;

	/* Three radii, not six. */
	--tdr-r-sm: 6px;
	--tdr-r-md: 10px;
	--tdr-r-pill: 999px;

	/* Real elevation on a tinted ground. The old sheet transitioned
	   box-shadow in three places without ever defining one. */
	--tdr-shadow: 0 1px 2px rgba(28, 26, 21, .04), 0 2px 8px rgba(28, 26, 21, .04);
	--tdr-shadow-lift: 0 2px 4px rgba(28, 26, 21, .05), 0 8px 24px rgba(28, 26, 21, .07);

	--tdr-ease: cubic-bezier(.22, 1, .36, 1);
}

/******************
COMPLIANCE REPORT
******************/

.tdr-compliance-report .tdr-report-filters {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
	margin: 0 0 1rem;
	padding: .85rem 1rem;
	background: var(--tdr-surface-alt);
	border: 1px solid var(--tdr-line);
	border-radius: var(--tdr-r-md);
}

.tdr-compliance-report .tdr-report-filters select {
	min-width: 10rem;
	max-width: 100%;
	padding: .4rem .6rem;
	border: 1px solid var(--tdr-line);
	border-radius: var(--tdr-r-sm);
	background: var(--tdr-surface);
	font-size: var(--tdr-fs-sm);
	color: var(--tdr-ink);
}

.tdr-report-summary {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.tdr-report-summary li {
	padding: .45rem .8rem;
	border: 1px solid var(--tdr-line);
	border-radius: var(--tdr-r-pill);
	background: var(--tdr-surface);
	font-size: var(--tdr-fs-xs);
	color: var(--tdr-ink-soft);
}

.tdr-report-summary li strong {
	color: var(--tdr-ink);
	font-size: var(--tdr-fs-base);
	margin-right: .25rem;
}

.tdr-report-summary .tdr-status-expired strong {
	color: var(--tdr-bad);
}

.tdr-report-summary .tdr-status-expiring strong {
	color: var(--tdr-warn);
}

.tdr-report-summary .tdr-status-in_date strong {
	color: var(--tdr-ok);
}

.tdr-topic-block {
	margin-bottom: 2.5rem;
}

.tdr-topic-block h2 {
	margin: 0 0 .25rem;
	padding-bottom: .5rem;
	border-bottom: 2px solid var(--tdr-ink);
	font-size: var(--tdr-fs-lg);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--tdr-ink);
}

.tdr-topic-block h3 {
	display: flex;
	align-items: baseline;
	gap: .6rem;
	margin: 1.5rem 0 .5rem;
	font-size: var(--tdr-fs-md);
	font-weight: 600;
	color: var(--tdr-ink);
}

.tdr-item-type {
	font-size: var(--tdr-fs-xs);
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tdr-ink-mute);
}

/* Wide tables scroll inside their own container rather than the page. */
.tdr-table-scroll {
	overflow-x: auto;
	margin-bottom: .5rem;
}

.tdr-report-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--tdr-line);
	border-radius: var(--tdr-r-md);
	background: var(--tdr-surface);
	font-size: var(--tdr-fs-sm);
}

.tdr-report-table th {
	padding: .6rem .8rem;
	text-align: left;
	font-size: var(--tdr-fs-xs);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tdr-ink-mute);
	background: var(--tdr-surface-alt);
	border-bottom: 1px solid var(--tdr-line);
	white-space: nowrap;
}

.tdr-report-table td {
	padding: .6rem .8rem;
	border-bottom: 1px solid var(--tdr-line-soft);
	color: var(--tdr-ink);
	vertical-align: top;
}

.tdr-report-table tr:last-child td {
	border-bottom: 0;
}

.tdr-muted {
	color: var(--tdr-ink-mute);
}

.tdr-report-actions {
	margin: 0 0 1.25rem;
}



/* Filter controls ----------------------------------------------------------- */

.tdr-compliance-report .tdr-report-filters label {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: var(--tdr-fs-xs);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--tdr-ink-mute);
}

.tdr-compliance-report .tdr-report-filters button,
.tdr-compliance-report .tdr-report-actions .button,
.tdr-compliance-report .tdr-report-actions a.button {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem 1rem;
	border: 1px solid var(--tdr-line);
	border-radius: var(--tdr-r-sm);
	background: var(--tdr-surface);
	color: var(--tdr-ink) !important;
	font-size: var(--tdr-fs-sm);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background .2s var(--tdr-ease), border-color .2s var(--tdr-ease);
}

.tdr-compliance-report .tdr-report-filters button:hover {
	background: var(--tdr-yellow-soft);
	border-color: var(--tdr-yellow-line);
}

/* The export is the whole point of the screen, so it is the one thing wearing
   the brand colour. */
.tdr-compliance-report .tdr-report-actions .button-primary,
.tdr-compliance-report .tdr-report-actions a.button-primary {
	background: var(--tdr-yellow);
	border-color: var(--tdr-yellow);
}

.tdr-compliance-report .tdr-report-actions a.button-primary:hover {
	background: var(--tdr-yellow-deep);
	border-color: var(--tdr-yellow-deep);
}