/**
 * Dude No — myCred skin.
 * Styles myCred shortcode output ([mycred_my_balance], [mycred_balance],
 * [mycred_history], [mycred_leaderboard]) in the established Dude No
 * visual language. Same phthalo palette and double-border framing as
 * dni-frontend.css so currency displays read as part of the engine.
 * Loads automatically wherever the plugin's styles enqueue. No wrapper
 * classes or custom CSS required.
 */

.mycred-my-balance-wrapper,
.mycred-balance-wrapper,
.mycred-history-wrapper,
.mycred-leaderboard {
	--dni-bg: #0a3d2e;
	--dni-bg-lift: #0f4a37;
	--dni-bg-deep: #072a20;
	--dni-title: #a8d5b8;
	--dni-body: #ffffff;
	--dni-link: #d4f5d4;
	--dni-link-hover: #a8d8ff;
	--dni-border: #1a5a44;
	--dni-border-lift: #2a7a5f;
	--dni-glow: 0 0 12px rgba(168, 216, 255, 0.35);
	box-sizing: border-box;
	font-family: inherit;
}

.mycred-my-balance-wrapper *,
.mycred-balance-wrapper *,
.mycred-history-wrapper *,
.mycred-leaderboard * {
	box-sizing: border-box;
}

/* ============================================================
   Balance panels ([mycred_my_balance], [mycred_balance])
   ============================================================ */
.mycred-my-balance-wrapper,
.mycred-balance-wrapper {
	background: var(--dni-bg);
	color: var(--dni-title);
	border: 2px solid var(--dni-border-lift);
	border-radius: 4px;
	padding: 12px 18px;
	position: relative;
	display: inline-block;
	min-width: 160px;
	text-align: center;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.85em;
}

/* Inner hairline frame, same double-border device as the inventory */
.mycred-my-balance-wrapper::before,
.mycred-balance-wrapper::before {
	content: "";
	position: absolute;
	inset: 4px;
	border: 1px solid rgba(168, 213, 184, 0.15);
	pointer-events: none;
	border-radius: 2px;
}

/* The balance number */
.mycred-my-balance-wrapper .mycred-balance,
.mycred-balance-wrapper .mycred-balance,
.mycred-balance {
	display: block;
	color: var(--dni-body);
	font-size: 1.8em;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: none;
	font-variant-numeric: tabular-nums;
	text-shadow: var(--dni-glow);
}

/* ============================================================
   History table ([mycred_history])
   ============================================================ */
.mycred-history-wrapper table,
table.mycred-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--dni-bg);
	color: var(--dni-body);
	border: 2px solid var(--dni-border-lift);
	border-radius: 4px;
	overflow: hidden;
}

.mycred-history-wrapper th,
table.mycred-table th {
	background: var(--dni-bg-deep);
	color: var(--dni-title);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.78em;
	padding: 10px 14px;
	text-align: left;
	border-bottom: 1px solid var(--dni-border);
}

.mycred-history-wrapper td,
table.mycred-table td {
	padding: 9px 14px;
	border-bottom: 1px solid var(--dni-border);
	font-size: 0.9em;
}

.mycred-history-wrapper tr:last-child td,
table.mycred-table tr:last-child td {
	border-bottom: none;
}

.mycred-history-wrapper tbody tr:hover td,
table.mycred-table tbody tr:hover td {
	background: var(--dni-bg-lift);
}

/* Earn and spend amounts */
.mycred-history-wrapper td.creds,
table.mycred-table td.creds {
	font-weight: 700;
	color: var(--dni-link);
	font-variant-numeric: tabular-nums;
}

/* Pagination links under the history table */
.mycred-history-wrapper .pagination a,
.mycred-history-wrapper .mycred-page-links a {
	color: var(--dni-link);
	text-decoration: none;
}
.mycred-history-wrapper .pagination a:hover,
.mycred-history-wrapper .mycred-page-links a:hover {
	color: var(--dni-link-hover);
}

/* ============================================================
   Leaderboard ([mycred_leaderboard])
   ============================================================ */
.mycred-leaderboard {
	list-style: none;
	margin: 0;
	padding: 0;
	color: var(--dni-body);
}

.mycred-leaderboard li {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--dni-bg);
	border: 2px solid var(--dni-border);
	border-radius: 4px;
	padding: 9px 14px;
	margin-bottom: 6px;
	font-size: 0.92em;
}

.mycred-leaderboard li:hover {
	border-color: var(--dni-border-lift);
	background: var(--dni-bg-lift);
}

/* Rank number */
.mycred-leaderboard .item-number,
.mycred-leaderboard .position {
	color: var(--dni-title);
	font-weight: 700;
	min-width: 2.2ch;
	font-variant-numeric: tabular-nums;
}

/* Balance on the right */
.mycred-leaderboard .cred,
.mycred-leaderboard .amount {
	margin-left: auto;
	font-weight: 700;
	color: var(--dni-body);
	text-shadow: var(--dni-glow);
	font-variant-numeric: tabular-nums;
}

/* Current user's own row, myCred marks it .mycred-current-user */
.mycred-leaderboard li.mycred-current-user {
	border-color: var(--dni-link-hover);
	box-shadow: 0 0 0 1px rgba(168, 216, 255, 0.25) inset;
}

/* Links inside any myCred output */
.mycred-my-balance-wrapper a,
.mycred-history-wrapper a,
.mycred-leaderboard a {
	color: var(--dni-link);
	text-decoration: none;
}
.mycred-my-balance-wrapper a:hover,
.mycred-history-wrapper a:hover,
.mycred-leaderboard a:hover {
	color: var(--dni-link-hover);
}

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 640px) {
	.mycred-my-balance-wrapper,
	.mycred-balance-wrapper {
		padding: 10px 14px;
		min-width: 130px;
	}
	.mycred-my-balance-wrapper .mycred-balance,
	.mycred-balance-wrapper .mycred-balance {
		font-size: 1.5em;
	}
	.mycred-history-wrapper {
		overflow-x: auto;
	}
}