/*
 * CAEPS Component Library
 * ───────────────────────
 * Reusable component classes built on design-tokens.css. Every CAEPS
 * screen should compose from these rather than write one-off styles.
 *
 * Naming: `.caeps-c-<component>` for components, `.caeps-c-<component>--<modifier>`
 * for variants. Layout / utility classes live in screen-specific CSS.
 */

/* ─────────────────────────────────────────────────────────────────────
 * ICONS — inline SVG via CAEPS_Team_Dashboard::icon(). Inherits color
 * from parent; sized via the SVG width/height attributes.
 * ───────────────────────────────────────────────────────────────────── */

.caeps-c-icon {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ─────────────────────────────────────────────────────────────────────
 * SCOPE — body container for any CAEPS screen
 * Apply `.caeps-app` to a wrapper to get the warm canvas + base type.
 * ───────────────────────────────────────────────────────────────────── */

.caeps-app {
	font-family: var(--caeps-font-family-sans);
	font-size: var(--caeps-font-size-md);
	line-height: var(--caeps-line-height-normal);
	color: var(--caeps-color-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.caeps-app a {
	color: var(--caeps-color-text-link);
	text-decoration: none;
	transition: color var(--caeps-duration-fast) var(--caeps-ease-out);
}
.caeps-app a:hover {
	color: var(--caeps-color-text-link-hover);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────
 * TYPOGRAPHY
 * ───────────────────────────────────────────────────────────────────── */

.caeps-c-h1 {
	font-size: var(--caeps-font-size-3xl);
	font-weight: var(--caeps-font-weight-semibold);
	line-height: var(--caeps-line-height-tight);
	letter-spacing: var(--caeps-tracking-tight);
	color: var(--caeps-color-text);
	margin: 0;
}

.caeps-c-h2 {
	font-size: var(--caeps-font-size-2xl);
	font-weight: var(--caeps-font-weight-semibold);
	line-height: var(--caeps-line-height-snug);
	letter-spacing: var(--caeps-tracking-tight);
	color: var(--caeps-color-text);
	margin: 0;
}

.caeps-c-h3 {
	font-size: var(--caeps-font-size-xl);
	font-weight: var(--caeps-font-weight-semibold);
	line-height: var(--caeps-line-height-snug);
	color: var(--caeps-color-text);
	margin: 0;
}

.caeps-c-eyebrow {
	font-size: var(--caeps-font-size-xs);
	font-weight: var(--caeps-font-weight-semibold);
	letter-spacing: var(--caeps-tracking-wider);
	text-transform: uppercase;
	color: var(--caeps-color-text-secondary);
	margin: 0;
}

.caeps-c-lead {
	font-size: var(--caeps-font-size-md);
	line-height: var(--caeps-line-height-normal);
	color: var(--caeps-color-text-secondary);
	margin: 0;
	max-width: 56ch;
}

.caeps-c-muted {
	color: var(--caeps-color-text-secondary);
}

.caeps-c-faint {
	color: var(--caeps-color-text-tertiary);
}

.caeps-c-mono {
	font-family: var(--caeps-font-family-mono);
	font-size: 0.92em;
	background: var(--caeps-color-surface-sunken);
	padding: 1px 6px;
	border-radius: var(--caeps-radius-sm);
	color: var(--caeps-color-text);
}

/* ─────────────────────────────────────────────────────────────────────
 * BUTTONS
 * Variants: primary, secondary, ghost, destructive
 * Sizes:    sm (default), md, lg
 * ───────────────────────────────────────────────────────────────────── */

.caeps-c-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--caeps-space-2);
	padding: var(--caeps-space-2) var(--caeps-space-4);
	font-family: inherit;
	font-size: var(--caeps-font-size-sm);
	font-weight: var(--caeps-font-weight-semibold);
	line-height: 1;
	letter-spacing: var(--caeps-tracking-normal);
	border: 1px solid transparent;
	border-radius: var(--caeps-radius-md);
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--caeps-duration-fast) var(--caeps-ease-out),
	            border-color var(--caeps-duration-fast) var(--caeps-ease-out),
	            box-shadow var(--caeps-duration-fast) var(--caeps-ease-out),
	            transform var(--caeps-duration-instant) var(--caeps-ease-out);
	user-select: none;
	white-space: nowrap;
}

.caeps-c-btn:focus-visible {
	outline: none;
	box-shadow: var(--caeps-shadow-focus);
}

.caeps-c-btn:active {
	transform: translateY(1px);
}

.caeps-c-btn:disabled,
.caeps-c-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

/* Primary — sage green
 * `.caeps-app a` (the generic link-color rule above) has specificity
 * (0,1,1) which beats `.caeps-c-btn--primary` (0,1,0). We scope these
 * button selectors under `.caeps-app` to match-and-exceed that
 * specificity so button text colors win regardless of cascade order. */
.caeps-app .caeps-c-btn--primary,
a.caeps-c-btn--primary {
	background: var(--caeps-color-primary);
	border-color: var(--caeps-color-primary);
	color: var(--caeps-color-text-on-primary);
}
.caeps-app .caeps-c-btn--primary:hover,
a.caeps-c-btn--primary:hover { background: var(--caeps-color-primary-hover); border-color: var(--caeps-color-primary-hover); color: var(--caeps-color-text-on-primary); text-decoration: none; }
.caeps-app .caeps-c-btn--primary:active,
a.caeps-c-btn--primary:active { background: var(--caeps-color-primary-active); border-color: var(--caeps-color-primary-active); color: var(--caeps-color-text-on-primary); }

/* Secondary — outline / surface */
.caeps-app .caeps-c-btn--secondary,
a.caeps-c-btn--secondary {
	background: var(--caeps-color-surface);
	border-color: var(--caeps-color-border-strong);
	color: var(--caeps-color-text);
}
.caeps-app .caeps-c-btn--secondary:hover,
a.caeps-c-btn--secondary:hover { background: var(--caeps-color-surface-sunken); color: var(--caeps-color-text); text-decoration: none; }

/* Ghost — text-only until hover */
.caeps-app .caeps-c-btn--ghost,
a.caeps-c-btn--ghost {
	background: transparent;
	border-color: transparent;
	color: var(--caeps-color-text-secondary);
}
.caeps-app .caeps-c-btn--ghost:hover,
a.caeps-c-btn--ghost:hover { background: var(--caeps-color-surface-sunken); color: var(--caeps-color-text); text-decoration: none; }

/* Destructive — warm soft red */
.caeps-app .caeps-c-btn--destructive,
a.caeps-c-btn--destructive {
	background: var(--caeps-color-danger);
	border-color: var(--caeps-color-danger);
	color: var(--caeps-color-text-inverse);
}
.caeps-app .caeps-c-btn--destructive:hover,
a.caeps-c-btn--destructive:hover { background: #a14844; border-color: #a14844; color: var(--caeps-color-text-inverse); text-decoration: none; }

/* Sizes */
.caeps-c-btn--sm { padding: var(--caeps-space-1) var(--caeps-space-3); font-size: var(--caeps-font-size-xs); }

/* ─────────────────────────────────────────────────────────────────────
 * CARD
 * ───────────────────────────────────────────────────────────────────── */

.caeps-c-card {
	background: var(--caeps-color-surface);
	border: 1px solid var(--caeps-color-border);
	border-radius: var(--caeps-radius-lg);
	padding: var(--caeps-space-6);
	box-shadow: var(--caeps-shadow-sm);
	transition: box-shadow var(--caeps-duration-base) var(--caeps-ease-out);
}
.caeps-c-card--snug  { padding: var(--caeps-space-4); }

/* Status variants — soft tinted backgrounds */
.caeps-c-card--info     { background: var(--caeps-color-info-soft);    border-color: var(--caeps-color-info-border); }
.caeps-c-card--warning  { background: var(--caeps-color-warning-soft); border-color: var(--caeps-color-warning-border); }
.caeps-c-card--danger   { background: var(--caeps-color-danger-soft);  border-color: var(--caeps-color-danger-border); }

/* ─────────────────────────────────────────────────────────────────────
 * BADGE — small pill labels (status, count, category)
 * ───────────────────────────────────────────────────────────────────── */

.caeps-c-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--caeps-space-1);
	padding: 2px var(--caeps-space-2);
	font-size: var(--caeps-font-size-2xs);
	font-weight: var(--caeps-font-weight-semibold);
	letter-spacing: var(--caeps-tracking-wide);
	text-transform: uppercase;
	border-radius: var(--caeps-radius-pill);
	background: var(--caeps-color-surface-sunken);
	color: var(--caeps-color-text-secondary);
	border: 1px solid var(--caeps-color-border);
	white-space: nowrap;
}

.caeps-c-badge--neutral  { background: var(--caeps-color-surface-sunken); color: var(--caeps-color-text-secondary); border-color: var(--caeps-color-border); }
.caeps-c-badge--success  { background: var(--caeps-color-success-soft);   color: var(--caeps-color-success);        border-color: var(--caeps-color-success-border); }
.caeps-c-badge--warning  { background: var(--caeps-color-warning-soft);   color: #8a5a1f;                          border-color: var(--caeps-color-warning-border); }
.caeps-c-badge--danger   { background: var(--caeps-color-danger-soft);    color: var(--caeps-color-danger);         border-color: var(--caeps-color-danger-border); }
.caeps-c-badge--info     { background: var(--caeps-color-info-soft);      color: var(--caeps-color-info);           border-color: var(--caeps-color-info-border); }

/* ─────────────────────────────────────────────────────────────────────
 * STAT TILE — top-of-page metric cards
 * ───────────────────────────────────────────────────────────────────── */

.caeps-c-stat {
	display: flex;
	flex-direction: column;
	gap: var(--caeps-space-1);
	padding: var(--caeps-space-5);
	background: var(--caeps-color-surface);
	border: 1px solid var(--caeps-color-border);
	border-radius: var(--caeps-radius-lg);
	transition: box-shadow var(--caeps-duration-base) var(--caeps-ease-out);
}

.caeps-c-stat__num {
	font-size: var(--caeps-font-size-3xl);
	font-weight: var(--caeps-font-weight-semibold);
	line-height: var(--caeps-line-height-tight);
	letter-spacing: var(--caeps-tracking-tight);
	color: var(--caeps-color-text);
	font-variant-numeric: tabular-nums;
}

.caeps-c-stat__label {
	font-size: var(--caeps-font-size-xs);
	letter-spacing: var(--caeps-tracking-wide);
	text-transform: uppercase;
	font-weight: var(--caeps-font-weight-semibold);
	color: var(--caeps-color-text-secondary);
}

.caeps-c-stat--action  { background: var(--caeps-color-warning-soft); border-color: var(--caeps-color-warning-border); }
.caeps-c-stat--action .caeps-c-stat__num   { color: #8a5a1f; }
.caeps-c-stat--action .caeps-c-stat__label { color: #8a5a1f; }

.caeps-c-stat--calm    { background: var(--caeps-color-success-soft); border-color: var(--caeps-color-success-border); }
.caeps-c-stat--calm .caeps-c-stat__num   { color: var(--caeps-color-success); }
.caeps-c-stat--calm .caeps-c-stat__label { color: var(--caeps-color-success); }

/* ─────────────────────────────────────────────────────────────────────
 * ALERT — full-width inline message
 * ───────────────────────────────────────────────────────────────────── */

.caeps-c-alert {
	display: flex;
	gap: var(--caeps-space-3);
	padding: var(--caeps-space-4) var(--caeps-space-5);
	border: 1px solid var(--caeps-color-border);
	border-left-width: 4px;
	border-radius: var(--caeps-radius-md);
	background: var(--caeps-color-surface);
	font-size: var(--caeps-font-size-md);
	line-height: var(--caeps-line-height-normal);
}

.caeps-c-alert__title {
	font-weight: var(--caeps-font-weight-semibold);
	display: block;
	margin-bottom: var(--caeps-space-1);
}

.caeps-c-alert--info     { background: var(--caeps-color-info-soft);    border-color: var(--caeps-color-info-border);    border-left-color: var(--caeps-color-info); }
.caeps-c-alert--success  { background: var(--caeps-color-success-soft); border-color: var(--caeps-color-success-border); border-left-color: var(--caeps-color-success); color: #2f4f3a; }
.caeps-c-alert--warning  { background: var(--caeps-color-warning-soft); border-color: var(--caeps-color-warning-border); border-left-color: var(--caeps-color-warning); color: #8a5a1f; }
.caeps-c-alert--danger   { background: var(--caeps-color-danger-soft);  border-color: var(--caeps-color-danger-border);  border-left-color: var(--caeps-color-danger);  color: #6b2a28; }

/* ─────────────────────────────────────────────────────────────────────
 * EMPTY STATE
 * ───────────────────────────────────────────────────────────────────── */

.caeps-c-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--caeps-space-3);
	padding: var(--caeps-space-12) var(--caeps-space-6);
	text-align: center;
	background: var(--caeps-color-surface);
	border: 1px dashed var(--caeps-color-border-strong);
	border-radius: var(--caeps-radius-lg);
}

.caeps-c-empty__icon {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--caeps-color-primary-soft);
	color: var(--caeps-color-primary);
	border-radius: var(--caeps-radius-pill);
}

.caeps-c-empty__title {
	font-size: var(--caeps-font-size-lg);
	font-weight: var(--caeps-font-weight-semibold);
	color: var(--caeps-color-text);
	margin: 0;
}

.caeps-c-empty__body {
	font-size: var(--caeps-font-size-md);
	color: var(--caeps-color-text-secondary);
	margin: 0;
	max-width: 42ch;
}

/* ─────────────────────────────────────────────────────────────────────
 * PAGE HEADER — reusable hero for every CAEPS deep screen
 * Includes optional back-link breadcrumb, eyebrow, title, lead.
 * ───────────────────────────────────────────────────────────────────── */

.caeps-c-page-header {
	margin: 0 0 var(--caeps-space-8);
	padding-bottom: var(--caeps-space-5);
	border-bottom: 1px solid var(--caeps-color-border-subtle);
}

.caeps-c-back-link {
	display: inline-flex;
	align-items: center;
	gap: var(--caeps-space-1);
	font-size: var(--caeps-font-size-sm);
	font-weight: var(--caeps-font-weight-medium);
	color: var(--caeps-color-text-secondary);
	text-decoration: none;
	margin-bottom: var(--caeps-space-3);
	transition: color var(--caeps-duration-fast) var(--caeps-ease-out);
}
.caeps-c-back-link:hover {
	color: var(--caeps-color-primary);
	text-decoration: none;
}
.caeps-c-back-link .caeps-c-icon {
	width: 14px;
	height: 14px;
}

.caeps-c-page-header__eyebrow {
	font-size: var(--caeps-font-size-xs);
	font-weight: var(--caeps-font-weight-semibold);
	letter-spacing: var(--caeps-tracking-wider);
	text-transform: uppercase;
	color: var(--caeps-color-primary);
	margin: 0 0 var(--caeps-space-2);
}

.caeps-c-page-header__title {
	font-size: var(--caeps-font-size-3xl);
	font-weight: var(--caeps-font-weight-bold);
	line-height: var(--caeps-line-height-tight);
	letter-spacing: var(--caeps-tracking-tight);
	color: var(--caeps-color-text);
	margin: 0 0 var(--caeps-space-2);
}

.caeps-c-page-header__lead {
	font-size: var(--caeps-font-size-md);
	color: var(--caeps-color-text-secondary);
	line-height: var(--caeps-line-height-normal);
	margin: 0;
	max-width: 60ch;
}

/* ─────────────────────────────────────────────────────────────────────
 * DATA LIST — clean tables for rosters / invitations / affiliations
 * Use instead of WP's `widefat` for a polished look.
 * ───────────────────────────────────────────────────────────────────── */

.caeps-c-list {
	width: 100%;
	border-collapse: collapse;
	background: var(--caeps-color-surface);
	border: 1px solid var(--caeps-color-border);
	border-radius: var(--caeps-radius-lg);
	overflow: hidden;
	box-shadow: var(--caeps-shadow-xs);
}

.caeps-c-list thead th {
	background: var(--caeps-color-surface-sunken);
	font-size: var(--caeps-font-size-xs);
	font-weight: var(--caeps-font-weight-semibold);
	letter-spacing: var(--caeps-tracking-wide);
	text-transform: uppercase;
	color: var(--caeps-color-text-secondary);
	text-align: left;
	padding: var(--caeps-space-3) var(--caeps-space-4);
	border-bottom: 1px solid var(--caeps-color-border);
}

.caeps-c-list tbody td {
	padding: var(--caeps-space-3) var(--caeps-space-4);
	font-size: var(--caeps-font-size-md);
	border-bottom: 1px solid var(--caeps-color-border-subtle);
	vertical-align: middle;
}

.caeps-c-list tbody tr:last-child td {
	border-bottom: none;
}

.caeps-c-list tbody tr:hover {
	background: var(--caeps-color-primary-soft);
}

.caeps-c-list tbody tr.is-sending td  { opacity: 0.6; background: var(--caeps-color-surface-sunken); }
.caeps-c-list tbody tr.is-sent td     { background: var(--caeps-color-success-soft); transition: background var(--caeps-duration-base) ease; }
.caeps-c-list tbody tr.is-failed td   { background: var(--caeps-color-danger-soft); }

.caeps-c-list__primary {
	font-weight: var(--caeps-font-weight-semibold);
	color: var(--caeps-color-text);
}
.caeps-c-list__secondary {
	font-size: var(--caeps-font-size-sm);
	color: var(--caeps-color-text-secondary);
}

/* ─────────────────────────────────────────────────────────────────────
 * SECTION — visual grouping inside a screen
 * ───────────────────────────────────────────────────────────────────── */

.caeps-c-section {
	margin: 0 0 var(--caeps-space-8);
}

.caeps-c-section__heading {
	display: flex;
	align-items: baseline;
	gap: var(--caeps-space-2);
	margin: 0 0 var(--caeps-space-3);
	font-size: var(--caeps-font-size-md);
	font-weight: var(--caeps-font-weight-semibold);
	color: var(--caeps-color-text);
	padding-left: var(--caeps-space-3);
	border-left: 3px solid var(--caeps-color-primary);
}

.caeps-c-section__heading--danger   { border-left-color: var(--caeps-color-danger); }
.caeps-c-section__heading--warning  { border-left-color: var(--caeps-color-warning); }
.caeps-c-section__heading--success  { border-left-color: var(--caeps-color-success); }
.caeps-c-section__heading--info     { border-left-color: var(--caeps-color-info); }

.caeps-c-section__count {
	font-size: var(--caeps-font-size-sm);
	font-weight: var(--caeps-font-weight-regular);
	color: var(--caeps-color-text-tertiary);
}

.caeps-c-section__hint {
	margin: 0 0 var(--caeps-space-3);
	font-size: var(--caeps-font-size-sm);
	color: var(--caeps-color-text-secondary);
}

/* ─────────────────────────────────────────────────────────────────────
 * PROGRESS BAR — segmented seat-fill visualization
 * ───────────────────────────────────────────────────────────────────── */

.caeps-c-progress {
	display: flex;
	height: 6px;
	background: var(--caeps-color-surface-sunken);
	border-radius: var(--caeps-radius-pill);
	overflow: hidden;
}

.caeps-c-progress__segment {
	height: 100%;
	transition: width var(--caeps-duration-slow) var(--caeps-ease-out);
}

.caeps-c-progress__segment--primary { background: var(--caeps-color-primary); }
.caeps-c-progress__segment--info    { background: var(--caeps-color-info); }
.caeps-c-progress__segment--warning { background: var(--caeps-color-warning); }
.caeps-c-progress__segment--success { background: var(--caeps-color-success); }
.caeps-c-progress__segment--danger  { background: var(--caeps-color-danger); }

/* ─────────────────────────────────────────────────────────────────────
 * STATUS DOT — small inline indicator
 * ───────────────────────────────────────────────────────────────────── */

.caeps-c-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: var(--caeps-radius-pill);
	background: var(--caeps-color-text-tertiary);
	vertical-align: middle;
}
.caeps-c-dot--success { background: var(--caeps-color-success); }
.caeps-c-dot--warning { background: var(--caeps-color-warning); }
.caeps-c-dot--danger  { background: var(--caeps-color-danger); }
.caeps-c-dot--info    { background: var(--caeps-color-info); }

/* ─────────────────────────────────────────────────────────────────────
 * GRID HELPERS
 * ───────────────────────────────────────────────────────────────────── */

.caeps-c-grid {
	display: grid;
	gap: var(--caeps-space-4);
}
.caeps-c-grid--3  { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.caeps-c-grid--4  { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.caeps-c-grid--6  { gap: var(--caeps-space-6); }

/* ─────────────────────────────────────────────────────────────────────
 * UTILITIES (sparing — most styling should go through components)
 * ───────────────────────────────────────────────────────────────────── */

.caeps-u-mt-0  { margin-top: 0; }
.caeps-u-mt-2  { margin-top: var(--caeps-space-2); }
.caeps-u-mt-4  { margin-top: var(--caeps-space-4); }
.caeps-u-mt-6  { margin-top: var(--caeps-space-6); }
.caeps-u-mt-8  { margin-top: var(--caeps-space-8); }

.caeps-u-mb-2  { margin-bottom: var(--caeps-space-2); }
.caeps-u-mb-4  { margin-bottom: var(--caeps-space-4); }
.caeps-u-mb-6  { margin-bottom: var(--caeps-space-6); }

.caeps-u-flex      { display: flex; }
.caeps-u-items-c   { align-items: center; }
.caeps-u-justify-b { justify-content: space-between; }
.caeps-u-gap-2     { gap: var(--caeps-space-2); }
.caeps-u-gap-3     { gap: var(--caeps-space-3); }
.caeps-u-gap-4     { gap: var(--caeps-space-4); }

.caeps-u-text-right { text-align: right; }
.caeps-u-tabular    { font-variant-numeric: tabular-nums; }