/*
 * AnnGhar UI — Modern Table
 * ------------------------------------------------------------------
 * .ag-table is the one tabular-data component used everywhere this
 * plugin renders a list of rows (transaction history, referral
 * history) — anywhere business logic can't be reduced to a card grid.
 *
 * Each <td> must carry a `data-label` attribute matching its column
 * header; on narrow viewports (see responsive.css) the table drops
 * its grid/row chrome and each row becomes its own stacked card,
 * with data-label printed via ::before as a mini label — a pure-CSS
 * "tables become cards" collapse, no JS and no duplicated markup for
 * a separate "mobile view".
 */

.ag-table-wrap {
	overflow-x: auto;
}

.ag-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--ag-white);
	border-radius: var(--ag-radius);
	overflow: hidden;
	box-shadow: var(--ag-shadow);
}

.ag-table th,
.ag-table td {
	text-align: left;
	padding: 12px 16px;
	border-bottom: 1px solid var(--ag-border);
	font-size: 13.5px;
}

.ag-table th {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ag-muted);
	background: var(--ag-cream);
}

.ag-table tbody tr:last-child td {
	border-bottom: none;
}

.ag-table .is-positive {
	color: #1f7a3d;
	font-weight: 600;
}

.ag-table .is-negative {
	color: #b13636;
	font-weight: 600;
}

/* Status badge — used inside tables and order/coupon cards alike. */

.ag-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.ag-badge--completed { background: var(--ag-success-bg); color: var(--ag-primary-dark); }
.ag-badge--processing { background: var(--ag-warning-bg); color: var(--ag-warning-text); }
.ag-badge--on-hold { background: var(--ag-info-bg); color: var(--ag-info-text); }
.ag-badge--pending { background: var(--ag-cream); color: var(--ag-muted); }
.ag-badge--cancelled,
.ag-badge--failed,
.ag-badge--refunded { background: var(--ag-danger-bg); color: var(--ag-danger); }

/* Pagination, shared by every paginated list in the product. */

.ag-pagination {
	display: flex;
	gap: 6px;
	margin-top: 14px;
	flex-wrap: wrap;
}

.ag-pagination__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	border-radius: 8px;
	border: 1px solid var(--ag-border);
	text-decoration: none;
	color: var(--ag-text);
	font-size: 13px;
}

.ag-pagination__link.is-active {
	background: var(--ag-primary);
	border-color: var(--ag-primary);
	color: var(--ag-white);
}