/**
 * Jetonomy — BuddyPress integration styles.
 * Only loaded when BuddyPress is active.
 *
 * Colors route through the --jt-* token cascade so this integration adopts the
 * active theme's palette and dark mode. The token layer (jetonomy-tokens.css)
 * is enqueued as a dependency of this file, so every --jt-* resolves and the
 * dark overrides apply here exactly as they do on Jetonomy's own pages.
 * The hex after each var() is the original value, kept only as a belt-and-
 * braces fallback; it should never be reached now that the dependency is
 * declared. The two `#fff` on accent buttons are intentional on-accent
 * contrast.
 *
 * @package Jetonomy
 */

/* ── No token definitions here, deliberately ──
 * This file used to re-declare the whole --jt-* set on its own containers,
 * because jetonomy-tokens.css was not enqueued on BuddyPress pages. That
 * premise is gone: the PHP now declares `jetonomy-tokens` as a DEPENDENCY of
 * this stylesheet, so the tokens are always present and inherited from :root.
 *
 * The re-declaration was not merely redundant, it was the bug. A custom
 * property declared ON an element beats one inherited from an ancestor no
 * matter the specificity, and that local chain resolved only light values with
 * no dark counterpart. So when the host theme went dark and `.jt-dark` landed
 * on <body>, these containers kept serving themselves light tokens — body text
 * at 1.12:1 against a dark background, and a glaring white stats panel.
 *
 * This is the same failure the plugin's CSS rules already name: never declare
 * tokens on a component, because a nested element that re-declares the set
 * stops inheriting the dark overrides its siblings get. Tokens live in
 * jetonomy-tokens.css, on :root, once. */

/* ── Group Forum Tab ── */
.jt-bp-forum { padding: 0; }

.jt-bp-forum-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--jt-border, #e5e7eb);
}
.jt-bp-forum-head strong {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--jt-text, #1e293b);
}
.jt-bp-forum-head .bp-primary-action {
	background: var(--jt-accent, #3b82f6);
	color: var(--jt-accent-fg, #fff); /* follows the accent, so a light accent still reads */
	border: none;
	border-radius: 6px;
	padding: 8px 18px;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s;
}
.jt-bp-forum-head .bp-primary-action:hover {
	background: var(--jt-accent-hover, #2563eb);
	color: var(--jt-accent-fg, #fff); /* follows the accent, so a light accent still reads */
}

.jt-bp-empty {
	text-align: center;
	color: var(--jt-text-tertiary, #94a3b8);
	font-size: 0.9375rem;
	padding: 48px 20px;
	background: var(--jt-bg-subtle, #f8fafc);
	border-radius: 8px;
	border: 1px dashed var(--jt-border, #e2e8f0);
}

/* Topic list */
.jt-bp-topics {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}
.jt-bp-topics th {
	text-align: start;
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
	color: var(--jt-text-tertiary, #94a3b8);
	padding: 10px 16px;
	border-bottom: 2px solid var(--jt-border, #e2e8f0);
	background: var(--jt-bg-subtle, #f8fafc);
}
.jt-bp-topics th:first-child { border-radius: 8px 0 0 0; }
.jt-bp-topics th:last-child { border-radius: 0 8px 0 0; }

.jt-bp-topics td {
	padding: 14px 16px;
	border-bottom: 1px solid var(--jt-border, #f1f5f9);
	font-size: 0.9375rem;
	vertical-align: middle;
}
.jt-bp-topics tr:last-child td { border-bottom: none; }
.jt-bp-topics tr:hover td { background: var(--jt-bg-subtle, #f8fafc); }

.jt-bp-topics td a {
	text-decoration: none;
	font-weight: 600;
	color: var(--jt-text, #1e293b);
	font-size: 0.9375rem;
}
.jt-bp-topics td a:hover { color: var(--jt-accent, #3b82f6); }

.jt-bp-topics td small {
	display: block;
	color: var(--jt-text-tertiary, #94a3b8);
	font-size: 0.8125rem;
	margin-top: 2px;
	font-weight: 400;
}
.jt-bp-topics .jt-bp-replies,
.jt-bp-topics .jt-bp-activity {
	color: var(--jt-text-secondary, #64748b);
	font-size: 0.875rem;
	white-space: nowrap;
}

/* Topic row (group forum list) */
.jt-bp-topic-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jt-bp-topic-meta { font-size: 0.8125rem; color: var(--jt-text-tertiary, #94a3b8); margin-top: 2px; }

.jt-bp-view-all {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--jt-border, #e2e8f0);
	font-size: 0.875rem;
	text-align: center;
}
.jt-bp-view-all a {
	font-weight: 600;
	text-decoration: none;
	color: var(--jt-accent, #3b82f6);
}
.jt-bp-view-all a:hover { text-decoration: underline; }

/* ── Member Profile Forum Tab ── */
.jt-bp-profile { padding: 0; }

/* A wrapping grid, not a single clipping row.
   As a one-row flex with overflow:hidden, the four cells needed 369px inside a
   358px box at 390px wide - so the last cell (TRUST, the one stat that explains
   a member's permissions) was cut off and lost its border.

   The column minimum has to be big enough for the CONTENT, not just big enough
   to fit four columns. At minmax(84px, ...) four columns still fit a 358px
   container (about 89px each) and the text clipped INSIDE its cell instead -
   "REPUTATIO", "LEVE" - which is the same bug one level down. 7rem is wider
   than the longest label ("Reputation") at the size it renders, so on a narrow
   container the row folds to 2x2 instead. min(100%, 7rem) keeps a single very
   narrow cell from overflowing its own container.

   Content wrapping is the backstop: a longer translation or a 4-digit
   reputation wraps within the cell rather than being cut off, so no future
   string can reintroduce the clip. */
.jt-bp-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr));
	gap: 0;
	padding: 0;
	margin-bottom: 24px;
	border: 1px solid var(--jt-border, #e2e8f0);
	border-radius: 8px;
	overflow: hidden;
}
.jt-bp-stat {
	min-width: 0;
	overflow-wrap: anywhere;
	text-align: center;
	padding: 16px 12px;
	border-inline-end: 1px solid var(--jt-border, #e2e8f0);
	background: var(--jt-bg-subtle, #f8fafc);
}
.jt-bp-stat:last-child { border-inline-end: none; }
.jt-bp-stat strong {
	display: block;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--jt-text, #1e293b);
	line-height: 1.2;
}
.jt-bp-stat span,
.jt-bp-stat {
	font-size: 0.75rem;
	color: var(--jt-text-tertiary, #94a3b8);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.jt-bp-profile h4 {
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--jt-text-secondary, #64748b);
	margin: 0 0 12px;
}

.jt-bp-recent {
	list-style: none;
	padding: 0;
	margin: 0 0 20px;
}
.jt-bp-recent li {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--jt-border, #f1f5f9);
}
.jt-bp-recent li:last-child { border-bottom: none; }
.jt-bp-recent a {
	text-decoration: none;
	font-weight: 500;
	color: var(--jt-text, #1e293b);
	font-size: 0.9375rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.jt-bp-recent a:hover { color: var(--jt-accent, #3b82f6); }
.jt-bp-time {
	color: var(--jt-text-tertiary, #94a3b8);
	font-size: 0.8125rem;
	white-space: nowrap;
	text-align: end;
}
.jt-bp-space-tag {
	display: inline-block;
	font-size: 0.75rem;
	color: var(--jt-text-secondary, #64748b);
	background: var(--jt-bg-muted, #f1f5f9);
	padding: 1px 8px;
	border-radius: 4px;
	margin-inline-start: 6px;
	vertical-align: middle;
}

/* ── Back to Group Link ── */
.jt-bp-back-banner {
	font-size: 0.8125rem;
	margin-bottom: 12px;
}
.jt-bp-back-banner a {
	text-decoration: none;
	color: var(--jt-text-secondary, #64748b);
}
.jt-bp-back-banner a:hover {
	color: var(--jt-accent, #3b82f6);
}

/* ── Profile Link ── */
.jt-bp-profile-link { margin-top: 20px; }

/* ── Group Create/Manage Forum Settings ── */
.jt-bp-forum-settings {
	margin-top: 20px;
	padding: 20px;
	border: 1px solid var(--jt-border, #e2e8f0);
	border-radius: 8px;
	background: var(--jt-bg-subtle, #f8fafc);
}
.jt-bp-forum-settings h4 {
	margin: 0 0 4px;
	font-size: 1rem;
	font-weight: 700;
	color: var(--jt-text, #1e293b);
}
.jt-bp-forum-settings .description {
	color: var(--jt-text-secondary, #64748b);
	font-size: 0.875rem;
	margin: 0 0 14px;
}
.jt-bp-forum-settings label {
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--jt-text, #374151);
	display: block;
	margin-bottom: 6px;
}
.jt-bp-forum-settings select {
	width: 100%;
	max-width: 400px;
	padding: 8px 12px;
	border: 1px solid var(--jt-border, #d1d5db);
	border-radius: 6px;
	font-size: 0.9375rem;
	background: var(--jt-bg, #fff);
}