/* =============================================================================
   ArneIron wallet styling — TeraWallet, in the ArneIron design language
   =============================================================================
   Moved out of the `arneiron` theme's ds.css (§4k, §4m) on 2026-08-24. It lives
   with the portal now because it styles a plugin the canonical theme has no
   business knowing about — see includes/class-arnpx-wallet-transactions.php.

   WHY EVERY SELECTOR CARRIES THE CONTAINER CLASS TWICE
   -----------------------------------------------------------------------------
   §4k did not work. Not partially — at all, from the day it was written.

   Every TeraWallet rule is `.woo-wallet-my-wallet-container .woo-wallet-X`,
   specificity (0,2,0). Every rule in §4k was a bare `.woo-wallet-X`, (0,1,0).
   The theme lost all sixteen. Measured on dev 2026-08-24 with the dark variation
   active, while §4k claimed to have restated the wallet in tokens:

       stat card background   rgb(255,255,255)   token said #050203
       stat card value        rgb(31,45,61)      token said #ffd5cd
       balance card           rgb(72,61,224)     the plugin's #483de0
       nav tab                #f0f0f0 / #666     the plugin's greys
       container text         rgb(51,51,51)      the plugin's --wallet-text-color

   Matching the plugin's (0,2,0) would only TIE, and a tie is decided by load
   order — which is why the doubled class is here rather than a single one. The
   stylesheet does also declare `woo-wallet-style` as a dependency so it loads
   later, but relying on that alone means one dequeue, one plugin rename, or one
   enqueue-order change silently reverts the whole file to invisible. It already
   failed that way once; twice is a choice.

   Everything below is a token, so a Style Variation repaints the wallet with
   the rest of the site. Nothing here changes structure or behaviour: if
   TeraWallet renames a class the rule stops matching and the plugin's own
   styling returns, which is the correct failure direction for third-party
   chrome.
   ========================================================================== */

/* ---- 4k. TeraWallet block, in the theme's own language ---------------------
   The wallet ships its own look — dashicons, its own card treatment, its own
   nav-tab styling — which lands inside an account area built from §1 tokens and
   reads as a bolted-on plugin screen.

   Restated here rather than forked: the plugin keeps rendering, and every value
   below is a token, so a Style Variation repaints the wallet with everything
   else. Nothing here changes structure or behaviour; if TeraWallet renames a
   class the rule stops matching and the plugin's own styling returns, which is
   the correct failure direction for third-party chrome.
   -------------------------------------------------------------------------- */

.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container {
	color: var(--c-ink);
}

.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container .woo-wallet-header h2,
.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container h2 {
	margin-block: 0 var(--space-4);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	letter-spacing: -0.01em;
}
.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container h3 {
	margin-block: var(--space-5) var(--space-3);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--c-ink-3);
}

/* --- Balance card --- */

.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container .woo-wallet-balance-card {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-md, var(--r-sm));
	padding: var(--wp--preset--spacing--6);
}
.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container .woo-wallet-price,
.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container .woo-wallet-balance-card .woocommerce-Price-amount {
	font-size: var(--wp--preset--font-size--xl, 2rem);
	font-weight: 700;
	color: var(--c-ink);
	letter-spacing: -0.02em;
}

/* --- Stat cards --- */

.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container .woo-wallet-stat-card {
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: var(--r-sm);
	padding: var(--wp--preset--spacing--5);
}
.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container .woo-wallet-stat-card__label {
	color: var(--c-ink-3);
	font-size: var(--wp--preset--font-size--sm);
}
.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container .woo-wallet-stat-card__value {
	color: var(--c-ink);
	font-weight: 700;
}
.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container .woo-wallet-stat-card__icon {
	color: var(--c-ink-3);
}

/* --- The wallet's own nav tabs: match §4j's tablist so the two do not read as
       two different UIs stacked on each other. --- */

/* --- Backgrounds the theme's version never claimed ---------------------------
   §4k styled the nav tabs' type, spacing and active underline but left every
   background alone, so the whole strip stayed the plugin's #f0f0f0 — a light
   grey band across a dark page, which is what the owner reported on
   2026-08-24. The plugin paints the strip, each tab, and the active tab
   separately, so all three have to be answered. --- */

.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container .woo-wallet-nav-tabs,
.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container .woo-wallet-nav-item-wrapper,
.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container .woo-wallet-nav-tab {
	background: transparent;
	border-color: var(--c-border);
}

.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container .woo-wallet-nav-tab.active,
.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container .woo-wallet-nav-item-wrapper.active .woo-wallet-nav-tab {
	background: var(--c-bg);
}

.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container .woo-wallet-nav-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	margin-block: var(--space-4);
	border-bottom: 1px solid var(--c-border);
}
.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container .woo-wallet-nav-tab {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 44px;
	padding: var(--space-3) var(--space-4);
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	color: var(--c-ink-2);
	font-weight: 500;
	text-decoration: none;
}
.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container .woo-wallet-nav-tab:hover { color: var(--c-ink); }
.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container .woo-wallet-nav-tab:focus-visible {
	outline: 2px solid var(--c-accent-strong);
	outline-offset: -2px;
}
.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container .woo-wallet-nav-tab.active,
.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container .woo-wallet-nav-item-wrapper.active .woo-wallet-nav-tab {
	color: var(--c-accent-strong);
	border-bottom-color: var(--c-accent-strong);
	font-weight: 600;
}
/* Dashicons carry their own 20px box and baseline; align them to the label. */
.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container .woo-wallet-nav-tab .dashicons {
	width: 20px;
	height: 20px;
	font-size: 20px;
	line-height: 1;
}

/* --- The portal's usage panel sits directly under the wallet in the same tab;
       give its heading the same weight as the wallet's, not an h1's. --- */

.woocommerce-MyAccount-content .arnpx-portal__title {
	margin-block: var(--space-6) var(--space-3);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	letter-spacing: -0.01em;
}


/* --- The remaining white cards ----------------------------------------------
   Enumerated rather than guessed: a probe walked every element inside the
   container and reported each one still computing a light background. Three
   came back — the top section, the content area, and the DASHBOARD's own
   "Recent transactions" panel, which is a second `.woo-wallet-transactions-list`
   that never carries `.arneiron-wtx-list` because it is not our template.

   Its rows are the plugin's `.ww-txn-*` markup with their own declared colours
   (#2c3e50, #344054, #98a2b3), all chosen for a white card, so the panel needs
   its text answered as well as its background. --- */

.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container .woo-wallet-top-section,
.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container .woo-wallet-content-area,
.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container .woo-wallet-transactions-list {
	background: var(--c-surface);
	border-color: var(--c-border);
}

.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container .woo-wallet-section-title {
	background: transparent;
	color: var(--c-ink);
	border-bottom-color: var(--c-border);
}

.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container .ww-txn-head .ww-txn-title {
	color: var(--c-ink);
}

.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container .ww-txn-head .ww-txn-meta,
.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container .ww-txn-table .ww-txn-row--head .ww-txn-cell {
	color: var(--c-ink-3);
}

.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container .ww-txn-table .ww-txn-cell {
	color: var(--c-ink);
	border-color: var(--c-border);
}

.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container .ww-txn-row,
.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container .ww-txn-table .ww-txn-row {
	border-color: var(--c-border);
}

/* Direction stays carried by the sign as well as the colour; the plugin's
   #c0392b is a dark red chosen for a white card and drops to about 3:1 on the
   theme's near-black surface. */
.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container mark.debit {
	background: none;
	color: var(--c-ink);
}
.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container mark.credit {
	background: none;
	color: var(--c-success, #1a7f37);
}


/* --- Tinted chips ------------------------------------------------------------
   The last light patches, found by a luminance sweep rather than by eye: the
   stat-card icon tiles (#e7f6ec / #fdeced / #f1f3f6) and the dashboard's two
   badge variants (#f1f3f6 neutral, #ecebfb brand). All five are pale washes
   picked for a white card, and all five read as smudges on a near-black one.

   The amounts keep the transactions table's convention: direction is carried by
   the sign AND the colour, never by colour alone, and the debit tone is the
   normal ink rather than a red chosen for white — #d0342c lands at roughly
   3.3:1 on this surface. --- */

/* The tint comes from a MODIFIER rule —
   `.woo-wallet-my-wallet-container .woo-wallet-stat-card--success .woo-wallet-stat-card__icon`
   — which scores (0,3,0), the same as the doubled container plus the icon
   class. Another tie, decided by load order. Naming the card class as well
   takes it to (0,4,0) and settles it on specificity instead. */

.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container .woo-wallet-stat-card .woo-wallet-stat-card__icon {
	background: var(--c-bg);
	border: 1px solid var(--c-border);
}

.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container .ww-txn-table .ww-txn-row--head,
.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container .ww-txn-row.ww-txn-row--head {
	background: var(--c-bg);
}

.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container .ww-txn-badge {
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	color: var(--c-ink-2);
}

.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container .ww-txn-badge.ww-txn-badge--brand {
	color: var(--c-accent-strong, var(--c-ink));
}

.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container .ww-txn-cell .woocommerce-Price-amount,
.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container .ww-txn-amount--debit .woocommerce-Price-amount {
	color: var(--c-ink);
}

.woo-wallet-my-wallet-container.woo-wallet-my-wallet-container .ww-txn-amount--credit .woocommerce-Price-amount {
	color: var(--c-success, #1a7f37);
}

/* ---- 4m. Wallet transaction list + filter -----------------------------------
   hub#4639. The list is rendered by woo-wallet/transactions.php (this theme's
   override) rather than by Tabulator, so unlike §4k this is not a restatement of
   third-party chrome — it is markup this theme owns, and every value is a token
   so a Style Variation repaints it with everything else.

   The table is a real <table> because it is tabular data: four columns, a header
   row, and a screen reader that should be able to announce "Amount, column 4".
   The narrow layout below turns each row into a stacked card using the header
   label carried on `data-label`, rather than hiding columns — on a billing
   screen a column that disappears at 600px is money the customer cannot see.
   -------------------------------------------------------------------------- */

/* THE GROUND HAS TO COME FIRST, OR THE TOKENS LIE.
   TeraWallet paints `.woo-wallet-transactions-list` white in its own
   stylesheet. Measured on dev 2026-08-24 with the theme's dark variation
   active: container `rgb(255,255,255)`, `--c-ink` `#ffd5cd`. Styling the text
   in tokens without owning the surface put pale-pink amounts on white at about
   1.3:1 — the debit figures were effectively invisible, on the one screen where
   the numbers are the whole point.

   So the surface is claimed here too. Scoped to `.arneiron-wtx-list`, which
   woo-wallet/transactions.php adds ONLY when the theme's own list is rendering:
   a site that has turned this off, or a future plugin version whose markup
   stops matching, keeps its white card and its own legible defaults. */

.woo-wallet-my-wallet-container .woo-wallet-transactions-list.arneiron-wtx-list {
	background: var(--c-surface);
	color: var(--c-ink);
	border-color: var(--c-border);
	border-radius: var(--r-sm);
}

/* The plugin gives this heading its OWN white band
   (`.woo-wallet-my-wallet-container .woo-wallet-section-title{background:#fff}`),
   so recolouring the text alone just moves the contrast failure from the
   amounts to the title. Background and rule colour have to come with it. */

.woo-wallet-my-wallet-container .woo-wallet-transactions-list.arneiron-wtx-list .woo-wallet-section-title {
	background: transparent;
	color: var(--c-ink);
	border-bottom-color: var(--c-border);
}

/* Cell colours stated explicitly rather than left to inherit from the container
   above. Not strictly required today — measured after the surface fix, body
   cells already computed correctly — but the wallet sits inside both
   WooCommerce's account styles and the plugin's, either of which can start
   declaring a colour on table cells in a future release. An inherited value
   loses to any declared one, so relying on inheritance here means the amounts
   change colour on someone else's release. */

.arneiron-wtx-list .arneiron-wtx th,
.arneiron-wtx-list .arneiron-wtx td {
	color: var(--c-ink);
	border-bottom-color: var(--c-border);
}

.arneiron-wtx-list .arneiron-wtx thead th {
	color: var(--c-ink-3);
}

.arneiron-wtx-list .arneiron-wtx td.arneiron-wtx__col-date {
	color: var(--c-ink-2);
}

.arneiron-wtx-list .arneiron-wtx td.arneiron-wtx__col-amount mark.credit {
	color: var(--c-success, #1a7f37);
}

.arneiron-wtx-list .arneiron-wtx td.arneiron-wtx__col-amount mark.debit {
	color: var(--c-ink);
}

.arneiron-wtx-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--space-3) var(--space-4);
	margin-block: var(--space-4);
	padding: var(--wp--preset--spacing--5);
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: var(--r-sm);
}

.arneiron-wtx-filter__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	min-width: 0;
}

.arneiron-wtx-filter__field label {
	color: var(--c-ink-3);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
}

/* Date inputs size themselves to their own text and end up narrower than the
   selects beside them; a shared minimum keeps the row from looking ragged.
   `field-sizing` is progressive — where it is unsupported the min-width alone
   still does the job. */
.arneiron-wtx-filter__field input[type="date"],
.arneiron-wtx-filter__field select {
	min-width: 11rem;
	max-width: 100%;
	min-height: 44px;
	padding: var(--space-2) var(--space-3);
	background: var(--c-surface);
	color: var(--c-ink);
	border: 1px solid var(--c-border);
	border-radius: var(--r-sm);
}

.arneiron-wtx-filter__actions {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-inline-start: auto;
}

.arneiron-wtx-filter__clear {
	color: var(--c-ink-3);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.arneiron-wtx-filter__clear:hover { color: var(--c-ink); }

/* Select2 renders its own box next to the native one it hides; without this the
   enhanced control keeps the vendor's default height and sits a few pixels off
   the date inputs it shares a row with. */
.arneiron-wtx-filter .select2-container { min-width: 11rem; }
.arneiron-wtx-filter .select2-container.select2-container .select2-selection--single {
	height: 44px;
	display: flex;
	align-items: center;
	background: var(--c-surface);
	border-color: var(--c-border);
	border-radius: var(--r-sm);
}

/* --- The table --- */

.arneiron-wtx {
	width: 100%;
	border-collapse: collapse;
	margin-block: 0 var(--space-4);
}

.arneiron-wtx th,
.arneiron-wtx td {
	padding: var(--space-3) var(--space-4);
	text-align: start;
	vertical-align: top;
	border-bottom: 1px solid var(--c-border);
}

.arneiron-wtx thead th {
	color: var(--c-ink-3);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.arneiron-wtx__col-amount { text-align: end; white-space: nowrap; }

/* Tokens are a quantity, not prose: right-aligned and tabular so the digits
   line up column-wise and a 393,499 is visibly larger than a 10,000 at a
   glance. `is-empty` is muted rather than hidden — see columns() for why a
   blank cell here is a fact rather than a gap. */
.arneiron-wtx__col-tokens {
	text-align: end;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.arneiron-wtx__tokens.is-empty {
	color: var(--c-ink-3);
	cursor: help;
}
.arneiron-wtx__col-date { white-space: nowrap; color: var(--c-ink-2); }

/* Details is the only column with free text in it, so it takes the slack. */
.arneiron-wtx__col-details { width: 100%; }

.arneiron-wtx__source {
	display: inline-block;
	padding: 0.15em 0.6em;
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: 999px;
	color: var(--c-ink-2);
	font-size: var(--wp--preset--font-size--sm);
	white-space: nowrap;
}
.arneiron-wtx__source.is-empty {
	background: none;
	border-color: transparent;
	color: var(--c-ink-3);
}

/* Direction is carried by the sign and by colour, never by colour alone. */
.arneiron-wtx td.arneiron-wtx__col-amount mark {
	background: none;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.arneiron-wtx td.arneiron-wtx__col-amount mark.credit { color: var(--c-success, #1a7f37); }
.arneiron-wtx td.arneiron-wtx__col-amount mark.debit { color: var(--c-ink); }

.arneiron-wtx__empty {
	margin-block: var(--space-5);
	color: var(--c-ink-3);
}

/* --- Pagination --- */

.arneiron-wtx-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-block: var(--space-4);
}
.arneiron-wtx-pagination__count {
	margin: 0;
	color: var(--c-ink-3);
	font-size: var(--wp--preset--font-size--sm);
}
.arneiron-wtx-pagination__links {
	display: flex;
	gap: var(--space-2);
	margin-inline-start: auto;
}

/* --- Narrow: one card per transaction, no column dropped --- */

@media (max-width: 600px) {
	.arneiron-wtx thead {
		/* Visually hidden rather than `display: none`: the header cells are what
		   `data-label` duplicates, and removing them from the accessibility tree
		   would leave the stacked cells unlabelled for anyone not seeing the
		   ::before text. */
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.arneiron-wtx,
	.arneiron-wtx tbody,
	.arneiron-wtx tr,
	.arneiron-wtx td {
		display: block;
		width: auto;
	}

	.arneiron-wtx tr {
		padding: var(--space-3) 0;
		border-bottom: 1px solid var(--c-border);
	}

	.arneiron-wtx td {
		display: flex;
		justify-content: space-between;
		gap: var(--space-4);
		padding: var(--space-1) 0;
		border: 0;
		text-align: end;
	}

	.arneiron-wtx td::before {
		content: attr(data-label);
		flex: 0 0 auto;
		color: var(--c-ink-3);
		font-size: var(--wp--preset--font-size--sm);
		font-weight: 600;
		text-align: start;
	}

	.arneiron-wtx__col-details { width: auto; }

	.arneiron-wtx-filter__actions { margin-inline-start: 0; width: 100%; }
	.arneiron-wtx-filter__field { flex: 1 1 100%; }
}