/**
 * GamiPress Extension leaderboard styles.
 *
 * Scoped under .gpext-* to avoid collisions with Oxygen / OxyExtras / GamiPress.
 */

.gpext-top-contributors {
	--gpext-accent: #12a594;
	--gpext-text: #1c2b2d;
	--gpext-muted: #7c8a8c;
	--gpext-border: #eef1f1;
	--gpext-gold: #d9a441;
	--gpext-silver: #9aa7a9;
	--gpext-bronze: #b06a3b;

	box-sizing: border-box;
	padding: 22px 24px;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 18px 40px -24px rgba(18, 60, 55, 0.45);
	font-family: inherit;
	color: var(--gpext-text);
}

.gpext-top-contributors *,
.gpext-top-contributors *::before,
.gpext-top-contributors *::after {
	box-sizing: border-box;
}

/* Header */
.gpext-tc-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}

.gpext-tc-head-main {
	display: flex;
	align-items: center;
	gap: 12px;
}

.gpext-tc-trophy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: rgba(18, 165, 148, 0.12);
	color: var(--gpext-accent);
	flex: 0 0 auto;
}

.gpext-tc-titles {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.gpext-tc-title {
	font-size: 17px;
	font-weight: 700;
}

.gpext-tc-subtitle {
	font-size: 13px;
	color: var(--gpext-muted);
}

.gpext-tc-viewall {
	font-size: 14px;
	font-weight: 600;
	color: var(--gpext-accent);
	text-decoration: none;
	white-space: nowrap;
	padding-top: 4px;
}

.gpext-tc-viewall:hover,
.gpext-tc-viewall:focus {
	text-decoration: underline;
}

/* List
 * Selectors are scoped under .gpext-top-contributors to out-rank theme/Oxygen
 * content styles (e.g. `.entry-content ol li`) that would otherwise reset the
 * row's `display` and break the flex layout. */
.gpext-top-contributors .gpext-tc-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gpext-top-contributors .gpext-tc-item {
	/* !important is required to beat a theme/UA reset that forces
	 * `:is(li, div._important) { display: list-item !important }`. */
	display: flex !important;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 14px 0;
	list-style: none;
	border-top: 1px solid var(--gpext-border);
}

.gpext-top-contributors .gpext-tc-item::before {
	display: none;
}

.gpext-top-contributors .gpext-tc-item:first-child {
	border-top: 0;
}

.gpext-tc-rank {
	width: 16px;
	flex: 0 0 auto;
	text-align: center;
	font-size: 15px;
	font-weight: 700;
	color: var(--gpext-muted);
}

.gpext-tc-item.gpext-rank-1 .gpext-tc-rank {
	color: var(--gpext-gold);
}

.gpext-tc-item.gpext-rank-2 .gpext-tc-rank {
	color: var(--gpext-silver);
}

.gpext-tc-item.gpext-rank-3 .gpext-tc-rank {
	color: var(--gpext-bronze);
}

.gpext-tc-avatar {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: 50%;
	font-size: 14px;
	font-weight: 700;
	color: #10403b;
	text-decoration: none;
}

.gpext-tc-avatar.has-image {
	background: none;
}

.gpext-tc-avatar .gpext-tc-avatar-img,
.gpext-tc-avatar img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

/* Rank medals on the top-3 avatars */
.gpext-tc-medal {
	position: absolute;
	right: -2px;
	bottom: -2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	color: #fff;
	background: var(--gpext-muted);
	box-shadow: 0 0 0 2px #fff;
}

.gpext-tc-medal svg {
	width: 10px;
	height: 10px;
}

.gpext-medal-1 {
	background: var(--gpext-gold);
}

.gpext-medal-2 {
	background: var(--gpext-silver);
}

.gpext-medal-3 {
	background: var(--gpext-bronze);
}

.gpext-tc-meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
	line-height: 1.3;
}

.gpext-tc-name {
	font-size: 15px;
	font-weight: 700;
	color: var(--gpext-text);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gpext-tc-name:hover,
.gpext-tc-name:focus {
	color: var(--gpext-accent);
}

.gpext-tc-sub {
	font-size: 12.5px;
	color: var(--gpext-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gpext-tc-points {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	flex: 0 0 auto;
	line-height: 1.2;
}

.gpext-tc-points-value {
	font-size: 16px;
	font-weight: 800;
	color: var(--gpext-text);
	font-variant-numeric: tabular-nums;
}

.gpext-tc-points-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--gpext-accent);
}

.gpext-tc-empty {
	margin: 8px 0 0;
	font-size: 14px;
	color: var(--gpext-muted);
}

/* ---------------------------------------------------------------------------
 * Shared palette for the filter + table (kept in sync with the card above).
 * ------------------------------------------------------------------------- */
.gpext-lb-filter,
.gpext-lb-table-wrap,
.gpext-podium,
.gpext-leaderboard {
	--gpext-accent: #12a594;
	--gpext-text: #1c2b2d;
	--gpext-muted: #7c8a8c;
	--gpext-border: #eef1f1;
	--gpext-gold: #d9a441;
	--gpext-silver: #9aa7a9;
	--gpext-bronze: #b06a3b;
	--gpext-dark: #0f3d38;
	--gpext-dark-2: #0c322e;
	--gpext-teal-light: #4bc4b2;
	color: var(--gpext-text);
	font-family: inherit;
	box-sizing: border-box;
}

.gpext-lb-filter *,
.gpext-lb-table-wrap *,
.gpext-podium *,
.gpext-leaderboard *,
.gpext-lb-filter *::before,
.gpext-lb-table-wrap *::before,
.gpext-podium *::before,
.gpext-leaderboard *::before,
.gpext-lb-filter *::after,
.gpext-lb-table-wrap *::after,
.gpext-podium *::after,
.gpext-leaderboard *::after {
	box-sizing: border-box;
}

/* Spacing between the stacked pieces of the combined [gpext_leaderboard]. */
.gpext-leaderboard .gpext-lb-filter {
	margin-bottom: 22px;
}

.gpext-leaderboard .gpext-podium {
	margin-bottom: 28px;
}

/* ---------------------------------------------------------------------------
 * Time-period filter (segmented pill control) — screenshot 3.
 * ------------------------------------------------------------------------- */
.gpext-lb-filter {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 4px;
	background: #eef2f2;
	border-radius: 999px;
}

.gpext-lb-filter-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 7px 16px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: var(--gpext-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.gpext-lb-filter-pill:hover,
.gpext-lb-filter-pill:focus {
	color: var(--gpext-text);
}

.gpext-lb-filter-pill.is-active {
	background: var(--gpext-accent);
	color: #fff;
	box-shadow: 0 4px 10px -4px rgba(18, 165, 148, 0.7);
}

.gpext-lb-filter-pill.is-active:hover,
.gpext-lb-filter-pill.is-active:focus {
	color: #fff;
}

/* ---------------------------------------------------------------------------
 * Extended leaderboard table — screenshot styling.
 * ------------------------------------------------------------------------- */
.gpext-lb-table-wrap {
	background: #fff;
	border: 1px solid var(--gpext-border);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 20px 45px -32px rgba(18, 60, 55, 0.4);
}

.gpext-lb-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.gpext-lb-table thead th {
	padding: 16px 22px;
	text-align: left;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--gpext-muted);
	background: #f6f9f9;
	border-bottom: 1px solid var(--gpext-border);
}

.gpext-lb-table tbody td {
	padding: 18px 22px;
	border-bottom: 1px solid var(--gpext-border);
	vertical-align: middle;
}

.gpext-lb-table tbody tr:last-child td {
	border-bottom: 0;
}

/* Subtle zebra striping like the reference. */
.gpext-lb-table tbody tr:nth-child(even) td {
	background: #fafcfc;
}

.gpext-lb-table tbody tr:hover td {
	background: #f2f8f7;
}

/* Rank column */
.gpext-lb-col-rank {
	width: 76px;
	text-align: left;
}

.gpext-lb-col-rank .gpext-tc-rank {
	display: inline-block;
	width: auto;
	font-size: 20px;
	font-weight: 700;
	color: #647577;
}

.gpext-lb-row.gpext-rank-1 .gpext-tc-rank {
	color: var(--gpext-gold);
}

.gpext-lb-row.gpext-rank-2 .gpext-tc-rank {
	color: var(--gpext-silver);
}

.gpext-lb-row.gpext-rank-3 .gpext-tc-rank {
	color: var(--gpext-bronze);
}

/* Member column */
.gpext-lb-member {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.gpext-lb-member .gpext-tc-avatar {
	width: 44px;
	height: 44px;
	font-size: 15px;
}

.gpext-lb-member .gpext-tc-name {
	font-size: 16px;
}

/* Stat columns (points + replies) */
.gpext-lb-col-points,
.gpext-lb-col-answers {
	width: 130px;
	text-align: center;
	white-space: nowrap;
}

.gpext-lb-stat-value {
	display: block;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.15;
	color: var(--gpext-text);
	font-variant-numeric: tabular-nums;
}

.gpext-lb-points-value {
	color: var(--gpext-accent);
}

.gpext-lb-stat-label {
	display: block;
	margin-top: 3px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gpext-muted);
}

/* Narrow screens: drop the replies column, let the name wrap, truncate the
 * subtitle, and use a fixed layout so columns fit the viewport (no overflow). */
@media (max-width: 560px) {
	.gpext-lb-table {
		table-layout: fixed;
		width: 100%;
	}

	.gpext-lb-table thead th,
	.gpext-lb-table tbody td {
		padding: 14px 10px;
	}

	.gpext-lb-col-answers {
		display: none;
	}

	.gpext-lb-col-rank {
		width: 42px;
	}

	.gpext-lb-col-points {
		width: 86px;
	}

	/* Member column takes the remaining space. */
	.gpext-lb-col-member {
		width: auto;
	}

	.gpext-lb-member {
		gap: 10px;
	}

	.gpext-lb-member .gpext-tc-avatar {
		width: 38px;
		height: 38px;
		font-size: 14px;
	}

	.gpext-lb-member .gpext-tc-meta {
		min-width: 0;
	}

	/* Allow the name to wrap onto a second line instead of being clipped. */
	.gpext-lb-member .gpext-tc-name {
		font-size: 15px;
		line-height: 1.2;
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}

	/* Keep the title/company on one line, truncated with an ellipsis. */
	.gpext-lb-member .gpext-tc-sub {
		display: block;
		max-width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.gpext-lb-stat-value {
		font-size: 17px;
	}
}

/* ---------------------------------------------------------------------------
 * Top-3 podium — screenshot 2.
 * ------------------------------------------------------------------------- */
.gpext-podium {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 20px;
}

.gpext-podium-card {
	position: relative;
	flex: 1 1 0;
	max-width: 320px;
	padding: 44px 24px 26px;
	border-radius: 18px;
	text-align: center;
	background: var(--gpext-dark);
	color: #eaf3f1;
	box-shadow: 0 22px 45px -28px rgba(9, 40, 36, 0.9);
}

/* Visual order: #2 left, #1 centre, #3 right. */
.gpext-podium-1 {
	order: 2;
}

.gpext-podium-2 {
	order: 1;
}

.gpext-podium-3 {
	order: 3;
}

/* The winner card is larger, elevated and teal. */
.gpext-podium-1 {
	padding: 56px 28px 32px;
	background: linear-gradient(160deg, #16b0a0 0%, #0f8e7f 100%);
	color: #fff;
	box-shadow: 0 26px 55px -26px rgba(15, 120, 108, 0.95);
}

/* Rank badge at the top of each card. */
.gpext-podium-rank {
	position: absolute;
	top: -16px;
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-size: 14px;
	font-weight: 800;
	color: #fff;
	background: var(--gpext-silver);
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9);
}

.gpext-podium-1 .gpext-podium-rank {
	background: #e5912f;
	width: 34px;
	height: 34px;
}

.gpext-podium-2 .gpext-podium-rank {
	background: var(--gpext-silver);
}

.gpext-podium-3 .gpext-podium-rank {
	background: var(--gpext-bronze);
}

/* Avatar */
.gpext-podium-avatar {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin: 4px auto 14px;
	border-radius: 50%;
	font-size: 22px;
	font-weight: 700;
	color: #10403b;
	text-decoration: none;
}

.gpext-podium-1 .gpext-podium-avatar {
	width: 84px;
	height: 84px;
	font-size: 26px;
}

.gpext-podium-avatar img,
.gpext-podium-avatar .gpext-tc-avatar-img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

/* Crown on the winner. */
.gpext-podium-crown {
	position: absolute;
	right: -2px;
	bottom: -2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	color: #fff;
	background: #e5912f;
	box-shadow: 0 0 0 3px rgba(15, 142, 127, 1);
}

.gpext-podium-name {
	display: block;
	font-size: 18px;
	font-weight: 700;
	color: inherit;
	text-decoration: none;
}

.gpext-podium-name:hover,
.gpext-podium-name:focus {
	text-decoration: underline;
}

.gpext-podium-sub {
	margin-top: 4px;
	font-size: 13px;
	opacity: 0.72;
}

.gpext-podium-points {
	margin-top: 18px;
}

.gpext-podium-points-value {
	display: block;
	font-size: 34px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: 0.02em;
	color: var(--gpext-teal-light);
	font-variant-numeric: tabular-nums;
}

.gpext-podium-1 .gpext-podium-points-value {
	font-size: 40px;
	color: #fff;
}

.gpext-podium-points-label {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.75;
}

.gpext-podium-stats {
	display: flex;
	justify-content: center;
	gap: 28px;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.gpext-podium-stat {
	display: flex;
	flex-direction: column;
}

.gpext-podium-stat-num {
	font-size: 17px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.gpext-podium-stat-lbl {
	margin-top: 3px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.7;
}

/* Stack on narrow screens: winner first, then #2, then #3. */
@media (max-width: 640px) {
	.gpext-podium {
		flex-direction: column;
		align-items: stretch;
	}

	.gpext-podium-card,
	.gpext-podium-1 {
		max-width: none;
		padding-top: 40px;
	}

	.gpext-podium-1 {
		order: 1;
	}

	.gpext-podium-2 {
		order: 2;
	}

	.gpext-podium-3 {
		order: 3;
	}
}