/* Earnings, purchases and dashboard cards. Tokens from sae-brand.css, with fallbacks if that file is missing. */
.sae-earnings {
	max-width: 960px;
	margin: 20px auto;
	font-family: var(--sae-font, inherit);
	color: var(--sae-text, #333);
}
.sae-earnings a {
	color: var(--sae-brand, #e88b4b);
}
.sae-preview-notice {
	background: #fff8e5;
	border-left: 4px solid #dba617;
	padding: 10px 15px;
}
.sae-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;
	margin-bottom: 20px;
}
.sae-card {
	background: #fff;
	border: 1px solid var(--sae-border, #e5e5e5);
	border-radius: var(--sae-radius, 4px);
	box-shadow: none;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.sae-earnings .sae-card.sae-card-highlight {
	border-top: 3px solid var(--sae-brand, #e88b4b);
	border-top-color: var(--sae-brand, #e88b4b);
}
.sae-card-label {
	font-size: 13px;
	font-weight: bold;
	color: var(--sae-muted, #666);
}
.sae-card-value {
	font-size: 24px;
	font-weight: bold;
	color: var(--sae-text, #333);
	font-family: inherit;
}
.sae-balance {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: 1px solid var(--sae-border, #e5e5e5);
	border-radius: var(--sae-radius, 4px);
	margin-bottom: 20px;
	overflow: hidden;
	background: #fff;
}
.sae-balance > div {
	padding: 12px 18px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.sae-balance > div + div {
	border-left: 1px solid var(--sae-border, #e5e5e5);
}
.sae-balance span {
	font-size: 13px;
	color: var(--sae-muted, #666);
}
.sae-balance strong {
	font-size: 18px;
}
.sae-earnings .sae-balance > .sae-balance-due {
	background: var(--sae-brand-soft, rgba(232, 139, 75, 0.1));
	background-color: var(--sae-brand-soft, rgba(232, 139, 75, 0.1));
}
.sae-payouts-heading {
	margin: 25px 0 10px;
	font-family: inherit;
	font-weight: inherit;
}
.sae-bank-status {
	border: 1px solid var(--sae-border, #e5e5e5);
	border-radius: var(--sae-radius, 4px);
	padding: 12px 15px;
	margin-bottom: 20px;
}
.sae-bank-status.is-added {
	background: #edf7ed;
}
.sae-bank-status.is-missing {
	background: #fff8e5;
}
.sae-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 15px;
}
.woocommerce-account .woocommerce-MyAccount-content .sae-filter label,
.sae-earnings .sae-filter label {
	display: inline;
	justify-content: flex-start;
	text-align: left;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	margin: 0;
	color: var(--sae-text, #333);
}
.sae-filter select,
.sae-filter input[type="date"] {
	padding: 8px;
	border: 1px solid var(--sae-border, #e5e5e5);
	border-radius: var(--sae-radius, 4px);
	background: #fff;
	color: var(--sae-text, #333);
	font-family: var(--sae-font, inherit);
	width: auto;
}
.sae-custom-range {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.sae-earnings .sae-filter button[type="submit"],
.sae-earnings .sae-filter button[type="submit"]:hover,
.sae-earnings .sae-filter button[type="submit"]:focus,
.sae-earnings .sae-filter button[type="submit"]:active,
.sae-earnings .sae-filter button[type="submit"]:not(:hover):not(:active):not(.has-background) {
	background-color: var(--sae-brand, #e88b4b);
	color: #fff;
	border: none;
	padding: 9px 18px;
	border-radius: var(--sae-radius, 4px);
	font-family: var(--sae-font, inherit);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
}
.sae-earnings .sae-filter button[type="submit"]:hover,
.sae-earnings .sae-filter button[type="submit"]:focus-visible {
	background-color: var(--sae-brand-dark, #cc7a42);
	color: #fff;
}
.sae-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid var(--sae-border, #e5e5e5);
}
.sae-table th,
.sae-table td {
	padding: 10px;
	border-bottom: 1px solid var(--sae-border, #e5e5e5);
	text-align: left;
	vertical-align: top;
}
.sae-table th {
	background: #f6f6f6;
	font-size: 13px;
	color: var(--sae-text, #333);
}
.sae-table .num {
	text-align: right;
	white-space: nowrap;
}
.sae-status {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 12px;
	background: #e5e5e5;
}
.sae-status-earned,
.sae-status-paid {
	background: #edf7ed;
	color: #1e6b1e;
}
.sae-status-partially_refunded {
	background: #fff8e5;
	color: #8a6100;
}
.sae-status-refunded {
	background: #fbeaea;
	color: #a00;
}
.sae-pagination {
	margin: 15px 0;
	text-align: center;
}
.sae-pagination .page-numbers {
	display: inline-block;
	padding: 5px 10px;
	margin: 0 2px;
	border-radius: var(--sae-radius, 4px);
	text-decoration: none;
	color: var(--sae-brand, #e88b4b);
}
.sae-pagination .current {
	background: var(--sae-brand, #e88b4b);
	color: #fff;
}
.sae-empty {
	text-align: center;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--sae-border, #e5e5e5);
	border-radius: var(--sae-radius, 4px);
}
.sae-note {
	font-size: 13px;
	color: var(--sae-muted, #666);
	margin-top: 15px;
}

@media (max-width: 768px) {
	.sae-cards {
		grid-template-columns: repeat(2, 1fr);
	}
	.sae-balance {
		grid-template-columns: 1fr;
	}
	.sae-balance > div + div {
		border-left: none;
		border-top: 1px solid var(--sae-border, #e5e5e5);
	}
	/* Stack table rows as cards; each cell shows its column name */
	.sae-table thead {
		display: none;
	}
	.sae-table,
	.sae-table tbody,
	.sae-table tr,
	.sae-table td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}
	.sae-table tr {
		border: 1px solid var(--sae-border, #e5e5e5);
		border-radius: var(--sae-radius, 4px);
		margin-bottom: 10px;
		padding: 5px 0;
	}
	.sae-table td {
		border: none;
		padding: 6px 12px;
		display: flex;
		justify-content: space-between;
		gap: 10px;
		text-align: right;
	}
	.sae-table td::before {
		content: attr(data-label);
		font-weight: bold;
		text-align: left;
	}
	.sae-table .num {
		text-align: right;
	}
}

/* P2-5d: small grey footer note, stronger than theme paragraph sizes */
.woocommerce-account .woocommerce-MyAccount-content p.sae-note,
.sae-earnings p.sae-note,
p.sae-note {
	font-size: 13px !important;
	line-height: 1.5 !important;
	font-weight: normal;
	color: var(--sae-muted, #666);
	margin: 15px 0 0;
}