/*
 * Australcode Points and Rewards — plugin-domain admin CSS.
 *
 * Layered ON TOP of the Australcode Admin Kit (assets/acds/admin-kit.css —
 * Verde Austral tokens + acds-* primitives, installed by acds-sync.sh). Only
 * what is specific to this plugin lives here: the KPI grid, the create-form
 * grid, the checklist, the customers search box, and a restyle of the native
 * WP_List_Table / form-table that the kit does not own. Everything consumes
 * --acds-* tokens (zero own hex) and is scoped to .acrwd-page. Never edit
 * admin-kit.css — re-running acds-sync.sh would overwrite it.
 */

/* ---- Layout ---- */
.acrwd-page .acds-wrap { max-width: 1080px; }

/* Native checkboxes/radios follow the brand accent (L-030: not covered by the
   kit; without accent-color they fall back to the browser/WP blue). */
.acrwd-page input[type="checkbox"],
.acrwd-page input[type="radio"] { accent-color: var(--acds-accent-bg); }

/* ---- KPI grid (the kit ships the tile, the plugin owns the grid) ---- */
.acrwd-page .acrwd-kpi-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--acds-sp-5);
	margin: var(--acds-sp-6) 0;
}

/* Info affordance for KPIs whose value needs a caveat (e.g. lifetime totals). */
.acrwd-page .acrwd-kpi-info {
	font-size: var(--acds-fs-14);
	width: 14px;
	height: 14px;
	line-height: 14px;
	color: var(--acds-fg-subtle);
	vertical-align: text-bottom;
	cursor: help;
}
.acrwd-page .acrwd-kpi-info:hover,
.acrwd-page .acrwd-kpi-info:focus {
	color: var(--acds-accent-fg);
	outline: none;
}

/* ---- Dashboard: hero band + trend (data-first) ---- */
.acrwd-page .acrwd-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
	gap: var(--acds-sp-7);
	align-items: center;
	background: var(--acds-bg-surface);
	border: 1px solid var(--acds-border-default);
	border-radius: var(--acds-radius-lg);
	padding: var(--acds-sp-6) var(--acds-sp-7);
	margin: var(--acds-sp-6) 0;
}
.acrwd-page .acrwd-hero__label {
	font-size: var(--acds-fs-12);
	color: var(--acds-fg-muted);
	text-transform: uppercase;
	letter-spacing: var(--acds-tracking-caps);
	margin-bottom: var(--acds-sp-2);
}
.acrwd-page .acrwd-hero__row { display: flex; align-items: baseline; gap: var(--acds-sp-4); flex-wrap: wrap; }
.acrwd-page .acrwd-hero__value {
	font-family: var(--acds-font-mono);
	font-size: 40px;
	font-weight: var(--acds-fw-semibold);
	line-height: 1;
	color: var(--acds-fg-strong);
}
.acrwd-page .acrwd-hero__sub { font-size: var(--acds-fs-12); color: var(--acds-fg-muted); margin-top: var(--acds-sp-3); }
.acrwd-page .acrwd-hero__spark-label { font-size: var(--acds-fs-11); color: var(--acds-fg-muted); margin-bottom: var(--acds-sp-2); }

/* Trend delta badge */
.acrwd-page .acrwd-delta {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: var(--acds-fs-13);
	font-weight: var(--acds-fw-medium);
	border-radius: var(--acds-radius-pill);
	padding: 2px 9px;
}
.acrwd-page .acrwd-delta .dashicons { font-size: 15px; width: 15px; height: 15px; line-height: 15px; }
.acrwd-page .acrwd-delta--up { color: var(--acds-accent-fg); background: var(--acds-accent-bg-subtle); }
.acrwd-page .acrwd-delta--down { color: var(--acds-status-error-fg); background: var(--acds-status-error-bg); }

/* Inline server-rendered sparkline (no JS, no library) */
.acrwd-page .acrwd-spark { display: block; width: 100%; height: 64px; color: var(--acds-accent-fg); }
.acrwd-page .acrwd-spark__line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.acrwd-page .acrwd-spark__area { fill: currentColor; fill-opacity: 0.08; stroke: none; }

/* Secondary KPIs demoted beneath the hero */
.acrwd-page .acrwd-kpi-grid--secondary .acds-kpi__value { font-size: var(--acds-fs-20); }

/* Actionable band: top movers / expiring soon */
.acrwd-page .acrwd-surface-meta { color: var(--acds-fg-muted); font-size: var(--acds-fs-12); font-weight: var(--acds-fw-regular); white-space: nowrap; }
.acrwd-page .acrwd-dash-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--acds-sp-5);
	margin-top: var(--acds-sp-5);
}
/* Los paneles van lado a lado en el grid (gap ya los separa). Anula el margin-top
   de adyacencia del kit (.acds-surface + .acds-surface, pensado para surfaces
   APILADAS) que si no empuja el 2º panel ~16px abajo y rompe la igualdad de altura
   de la fila (medido en sandbox: top 784/304 vs 800/288). */
.acrwd-page .acrwd-dash-cols > .acds-surface { margin-top: 0; }
.acrwd-page .acrwd-feed { margin: 0; }
.acrwd-page .acrwd-feed__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--acds-sp-4);
	padding: var(--acds-sp-3) 0;
	border-bottom: 1px solid var(--acds-border-subtle);
}
.acrwd-page .acrwd-feed__row:last-child { border-bottom: 0; }
.acrwd-page .acrwd-feed__num { font-family: var(--acds-font-mono); font-weight: var(--acds-fw-medium); }
.acrwd-page .acrwd-feed__num--up { color: var(--acds-accent-fg); }
.acrwd-page .acrwd-feed__num--down { color: var(--acds-status-error-fg); }
.acrwd-page .acrwd-feed__meta { font-family: var(--acds-font-mono); font-size: var(--acds-fs-12); color: var(--acds-fg-muted); }

/* ---- Quick-start checklist (Dashboard) ---- */
.acrwd-page .acrwd-checklist-item {
	display: flex;
	align-items: center;
	gap: var(--acds-sp-3);
	margin: var(--acds-sp-4) 0;
	color: var(--acds-fg-default);
}
.acrwd-page .acrwd-checklist-item .dashicons { color: var(--acds-fg-subtle); }
.acrwd-page .acrwd-checklist-item .dashicons-yes-alt { color: var(--acds-accent-fg); }

/* ---- Inline create-form grid (Tiers / Campaigns) ---- */
.acrwd-page .acrwd-form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--acds-sp-6);
	align-items: start;
	margin-bottom: var(--acds-sp-6);
}
.acrwd-page .acrwd-form-grid label {
	display: block;
	font-size: var(--acds-fs-13);
	font-weight: var(--acds-fw-semibold);
	margin-bottom: var(--acds-sp-2);
	color: var(--acds-fg-strong);
}
.acrwd-page .acrwd-form-grid input { width: 100%; }

/* ---- Customers search box ---- */
.acrwd-page .acrwd-search-form { margin: var(--acds-sp-6) 0; }
.acrwd-page .acrwd-search-form .search-box {
	display: flex;
	align-items: center;
	gap: var(--acds-sp-4);
	float: none;
}
/* Let the search input grow and never clip its placeholder (D1: the bare flex
   item was sizing to its tiny intrinsic width). */
.acrwd-page .acrwd-search-form input[type="search"] {
	flex: 1 1 auto;
	min-width: 280px;
	max-width: 420px;
	padding: 5px 10px;
}

/* ---- Settings tabs (show/hide; JS adds .acrwd-tabs-js to enable hiding) ---- */
.acrwd-page .acrwd-tab-nav { margin-bottom: var(--acds-sp-5); }
.acrwd-page .acrwd-tabs-js .acrwd-tab-panel { display: none; }
.acrwd-page .acrwd-tabs-js .acrwd-tab-panel.is-active { display: block; }

/* ---- Role-multiplier repeater (Settings → Earning) ---- */
.acrwd-page .acrwd-role-repeater { margin-top: var(--acds-sp-3); }
.acrwd-page .acrwd-role-row {
	display: flex;
	align-items: center;
	gap: var(--acds-sp-3);
	margin-bottom: var(--acds-sp-3);
}
.acrwd-page .acrwd-role-row .acrwd-role-select { min-width: 200px; }
.acrwd-page .acrwd-role-row .acrwd-role-value { width: 84px; }
.acrwd-page .acrwd-role-repeater.is-empty::before {
	content: attr(data-empty);
	display: block;
	color: var(--acds-fg-muted);
	font-size: var(--acds-fs-12);
	margin-bottom: var(--acds-sp-3);
}

/* Table-row action cells (delete buttons) stay on one line. */
.acrwd-page .acrwd-table-actions { white-space: nowrap; }
.acrwd-page .acrwd-inline-form { display: inline-block; margin-right: var(--acds-sp-4); }

/* Customers list — export button row (right-aligned) and the Pro bulk toolbar
   above the table. The per-row block/unblock action links sit on one line. */
.acrwd-page .acrwd-list-actions { display: flex; justify-content: flex-end; margin: 0 0 var(--acds-sp-4); }
.acrwd-page .acrwd-customers-bulk-toolbar {
	display: flex;
	align-items: center;
	gap: var(--acds-sp-3);
	flex-wrap: wrap;
	padding: var(--acds-sp-4);
	border-bottom: 1px solid var(--acds-border-subtle);
}
.acrwd-page .acrwd-customers-actions { white-space: nowrap; }

/* ---- Native form controls — kit-consistent typography/colors ---- */
.acrwd-page input[type="text"],
.acrwd-page input[type="search"],
.acrwd-page input[type="number"],
.acrwd-page input[type="color"],
.acrwd-page input[type="datetime-local"],
.acrwd-page select {
	font-family: var(--acds-font-sans);
	font-size: var(--acds-fs-13);
	color: var(--acds-fg-default);
	border: 1px solid var(--acds-border-default);
	border-radius: var(--acds-radius-sm);
	background: var(--acds-bg-surface);
	box-shadow: none;
}
.acrwd-page input[type="text"]:focus,
.acrwd-page input[type="search"]:focus,
.acrwd-page input[type="number"]:focus,
.acrwd-page input[type="datetime-local"]:focus,
.acrwd-page select:focus {
	border-color: var(--acds-border-focus);
	box-shadow: var(--acds-shadow-focus);
	outline: none;
}

/* Native secondary buttons (search, Clear, pagination fallbacks). The kit only
   restyles .button-primary (L-028); give .button the kit's neutral look. */
.acrwd-page .button:not(.button-primary) {
	font-family: var(--acds-font-sans);
	font-size: var(--acds-fs-13);
	font-weight: var(--acds-fw-medium);
	color: var(--acds-fg-default);
	border: 1px solid var(--acds-border-default);
	border-radius: var(--acds-radius-sm);
	background: var(--acds-bg-surface);
	box-shadow: none;
}
.acrwd-page .button:not(.button-primary):hover {
	background: var(--acds-bg-hover);
	border-color: var(--acds-border-strong);
}
.acrwd-page .button-link { color: var(--acds-accent-fg); }

/* ---- form-table (Settings) — kit-consistent labels and help text ---- */
.acrwd-page .form-table th {
	font-size: var(--acds-fs-13);
	font-weight: var(--acds-fw-semibold);
	color: var(--acds-fg-strong);
}
.acrwd-page .form-table .description,
.acrwd-page .description {
	font-size: var(--acds-fs-12);
	color: var(--acds-fg-muted);
}

/* ---- Native WP_List_Table restyle (the kit does not own it) ---- */
.acrwd-page .wp-list-table { border: 0; background: transparent; }
.acrwd-page .wp-list-table thead th,
.acrwd-page .wp-list-table thead td {
	background: var(--acds-bg-sunken);
	border-bottom: 1px solid var(--acds-border-default);
	color: var(--acds-fg-muted);
	font-size: var(--acds-fs-11);
	font-weight: var(--acds-fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--acds-tracking-caps);
	padding: 10px 16px;
}
.acrwd-page .wp-list-table tbody td,
.acrwd-page .wp-list-table tbody th {
	border-bottom: 1px solid var(--acds-border-subtle);
	color: var(--acds-fg-default);
	font-size: var(--acds-fs-13);
	padding: 11px 16px;
	vertical-align: middle;
}
.acrwd-page .wp-list-table.striped > tbody > :nth-child(odd) { background: transparent; }
.acrwd-page .wp-list-table tbody tr:hover { background: var(--acds-bg-hover); }
.acrwd-page .wp-list-table tbody tr:last-child td { border-bottom: 0; }
.acrwd-page .wp-list-table td a { color: var(--acds-accent-fg); }

/* ---- Responsive ---- */
@media screen and (max-width: 782px) {
	.acrwd-page .acrwd-form-grid { grid-template-columns: 1fr; }
}

/* Data tables on phones. Labelled tables (.acrwd-table-cards) collapse each row
   to a card with its key figure promoted (T-002); the rest fall back to
   horizontal scroll over character-breaking (F-003). */
@media screen and (max-width: 600px) {
	.acrwd-page .wp-list-table:not(.acrwd-table-cards) {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		table-layout: auto;
		white-space: nowrap;
	}

	.acrwd-page .acrwd-table-cards thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}
	.acrwd-page .acrwd-table-cards,
	.acrwd-page .acrwd-table-cards tbody { display: block; }
	.acrwd-page .acrwd-table-cards tbody tr {
		display: block;
		background: var(--acds-bg-surface);
		border: 1px solid var(--acds-border-default);
		border-radius: var(--acds-radius-md);
		padding: var(--acds-sp-4) var(--acds-sp-5);
		margin-bottom: var(--acds-sp-4);
	}
	.acrwd-page .acrwd-table-cards tbody tr:hover { background: var(--acds-bg-surface); }
	.acrwd-page .acrwd-table-cards tbody td {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--acds-sp-4);
		border: 0;
		padding: var(--acds-sp-2) 0;
	}
	/* !important overrides WP core's own responsive list-table rule
	   (.wp-list-table td::before — high specificity via its :not() chain). Core
	   sets content: attr(data-colname) (empty for us) and absolutely-positions the
	   label; we restore our label and make it a normal in-flow flex item so the
	   row reads "label … value". */
	.acrwd-page .acrwd-table-cards tbody td::before {
		content: attr(data-label) !important;
		position: static !important;
		width: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		text-align: left !important;
		color: var(--acds-fg-muted);
		font-size: var(--acds-fs-12);
	}
	.acrwd-page .acrwd-table-cards tbody td:first-child {
		display: block;
		font-size: var(--acds-fs-15);
		font-weight: var(--acds-fw-semibold);
		padding-bottom: var(--acds-sp-3);
		margin-bottom: var(--acds-sp-3);
		border-bottom: 1px solid var(--acds-border-subtle);
	}
	.acrwd-page .acrwd-table-cards tbody td:first-child::before { content: none !important; }
	.acrwd-page .acrwd-table-cards tbody td.acrwd-cell-key {
		font-family: var(--acds-font-mono);
		font-size: var(--acds-fs-20);
		font-weight: var(--acds-fw-semibold);
		color: var(--acds-fg-strong);
	}
	.acrwd-page .acrwd-table-cards tbody td.acrwd-cell-key::before {
		font-family: var(--acds-font-sans);
		font-size: var(--acds-fs-12);
		font-weight: var(--acds-fw-regular);
		color: var(--acds-fg-muted);
	}

	.acrwd-page .acrwd-hero { grid-template-columns: 1fr; }
}

/* Inline code token — shortcodes, endpoints and hook signatures on the Help page,
   and the YITH meta keys on Import. Monospace chip over the sunken surface. */
.acrwd-page .acrwd-code {
	display: inline-block;
	font-family: var(--acds-font-mono);
	font-size: var(--acds-fs-12);
	color: var(--acds-fg-strong);
	background: var(--acds-bg-sunken);
	border: 1px solid var(--acds-border-subtle);
	border-radius: var(--acds-radius-sm);
	padding: 2px 6px;
}

/* Reference tables (Help): top-aligned cells and wrapping code so long signatures
   and descriptions read cleanly. */
.acrwd-page .acrwd-ref-table td { vertical-align: top; }
.acrwd-page .acrwd-ref-table td .acrwd-code { white-space: normal; word-break: break-word; }
