/**
 * Trade Flow — Trade Account Dashboard (My Account)
 *
 * Thin, theme-friendly baseline for the card / stat-tile dashboard. Colours and typography
 * inherit from the active theme; the accent defaults to currentColor. Skinnable visual rules
 * use :where() (specificity 0,0,0) so a theme overrides them with any plain class. Structural
 * layout containers (.tf-cards, .tf-stats, .tf-stat--full) use plain single-class selectors.
 *
 * Override surface — CSS custom properties:
 *   --tf-gap, --tf-card-bg, --tf-card-border, --tf-card-radius, --tf-card-pad,
 *   --tf-card-shadow, --tf-stat-grid-min, --tf-accent, --tf-badge-bg
 *
 * This stylesheet can be disabled entirely via the `trade_flow_dashboard_styles_enabled`
 * filter. Functional bits (icon font, locked fields) live in frontend.css and remain.
 *
 * @package BloomStack\TradeFlow
 * @since 1.10.0
 */

/* ==========================================================================
   Card layout
   ========================================================================== */

.tf-cards {
	display: flex;
	flex-direction: column;
	gap: var(--tf-gap, 1.5rem);
}

:where(.tf-card) {
	background: var(--tf-card-bg, transparent);
	border: var(--tf-card-border, 1px solid rgba(0, 0, 0, 0.1));
	border-radius: var(--tf-card-radius, 8px);
	padding: var(--tf-card-pad, 1.25rem 1.5rem);
	box-shadow: var(--tf-card-shadow, none);
}

:where(.tf-card__title) {
	margin: 0 0 1rem;
	font-size: inherit;
	font-weight: 600;
}

/* ==========================================================================
   Stat tiles
   ========================================================================== */

.tf-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--tf-stat-grid-min, 160px), 1fr));
	gap: var(--tf-gap, 1.5rem);
}

.tf-stat--full {
	grid-column: 1 / -1;
}

:where(.tf-stat__label) {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.65;
}

:where(.tf-stat__value) {
	display: block;
	font-size: 1.25em;
	font-weight: 600;
}

:where(.tf-stat__value--accent) {
	color: var(--tf-accent, currentColor);
}

/* ==========================================================================
   Badge

   The current-tier badge also carries a per-tier modifier derived from the role
   name, e.g. a "Gold" tier renders `tf-badge tf-badge--gold`, so a theme can
   colour each tier individually (e.g. `.tf-badge--gold { --tf-accent: #c9a227; }`).
   ========================================================================== */

:where(.tf-badge) {
	display: inline-block;
	padding: 0.15em 0.6em;
	border-radius: 0.35em;
	font-size: 0.85em;
	font-weight: 600;
	color: var(--tf-accent, currentColor);
	background: var(--tf-badge-bg, transparent);
	border: 1px solid var(--tf-accent, currentColor);
}

/* ==========================================================================
   Profile form rows
   ========================================================================== */

:where(.tf-field-row) {
	margin-bottom: 1rem;
}

:where(.tf-field-row__label) {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
}

:where(.tf-field-row__control input, .tf-field-row__control select, .tf-field-row__control textarea) {
	width: 100%;
	box-sizing: border-box;
}

:where(.tf-field-choice) {
	display: block;
	margin-bottom: 0.25rem;
}

:where(.tf-field-actions) {
	margin: 1.25rem 0 0;
}