/**
 * User Dashboard — Modern Sidebar Layout (Linear/Notion-inspired).
 */

.listora-dashboard {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	min-height: 600px;
	gap: var(--listora-space-6);
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
}

/* Login prompt */
.listora-dashboard--logged-out {
	display: block;
}

.listora-dashboard__login-prompt {
	text-align: center;
	padding: var(--listora-space-12);
	background: var(--listora-bg-elevated);
	border: var(--listora-card-border);
	border-radius: var(--listora-radius-xl);
	animation: listora-fadeInScale 0.4s ease;
}

.listora-dashboard__login-prompt svg {
	color: var(--listora-fg-faint);
	margin-block-end: var(--listora-space-4);
}

.listora-dashboard__login-prompt h2 {
	margin: 0 0 0.5rem;
}

.listora-dashboard__login-prompt p {
	color: var(--listora-fg-muted);
	margin: 0 0 var(--listora-space-4);
}

/* ─── Sidebar ─── */

.listora-dashboard__sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-1);
	padding: var(--listora-space-4);
	/* Card chrome — same recipe as the listing card (elevated bg + 1px
	   border + shadow) so the nav rail reads as a premium panel rather
	   than a naked tint on the page background. */
	background: var(--listora-bg-elevated);
	border: 1px solid var(--listora-border-default);
	border-radius: var(--listora-radius-xl);
	box-shadow: var(--listora-shadow-sm);
	align-self: start;
	position: sticky;
	top: var(--listora-space-6);
}

.listora-dashboard__sidebar-header {
	padding: var(--listora-space-2) var(--listora-space-2) var(--listora-space-3);
	margin-block-end: var(--listora-space-2);
	border-block-end: 1px solid var(--listora-border-default);
}

.listora-dashboard__user-name {
	font-size: var(--listora-text-size-base);
	font-weight: var(--listora-weight-semibold);
	color: var(--listora-fg-default);
	margin: 0;
}

.listora-dashboard__user-email {
	font-size: var(--listora-text-size-xs);
	color: var(--listora-fg-faint);
}

/* ─── Sidebar nav-rail items ───
 *
 * Specificity-boosted via descendant chain
 * `.listora-dashboard__sidebar .listora-dashboard__nav-item` (0,2,0).
 * Beats theme.json compiled `.wp-element-button` rule (0,1,0) that
 * was painting every nav item brand-blue with coral borders —
 * making the rail read as 'row of CTAs' rather than 'navigation'.
 *
 * background-color, color, border, padding, font-size set EXPLICITLY
 * so they overwrite the theme.json compilation. Active state uses
 * a tinted primary fill + bold weight so the current tab reads
 * clearly from a row of subtle inactive items.
 * ──────────────────────────────────────────────────────────────── */
.listora-dashboard__sidebar .listora-dashboard__nav-item {
	all: unset;
	box-sizing: border-box;
	/* `all: unset` wipes the inherited floor too, so it is restated here.
	   Padding alone left these at 36px (BC 10208346300). */
	min-height: var(--listora-tap-target, 40px);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: var(--listora-space-2);
	width: 100%;
	padding: 0.55rem 0.85rem;
	font-family: inherit;
	font-size: var(--listora-text-size-sm);
	font-weight: var(--listora-weight-medium);
	line-height: 1.25;
	color: var(--listora-fg-muted);
	background-color: transparent;
	border: 0;
	border-radius: var(--listora-radius-md);
	text-align: start;
	transition:
		background-color var(--listora-transition-fast),
		color var(--listora-transition-fast);
}

.listora-dashboard__sidebar .listora-dashboard__nav-item:hover {
	background-color: color-mix(in srgb, var(--listora-fg-default) 6%, transparent);
	color: var(--listora-fg-default);
}

.listora-dashboard__sidebar .listora-dashboard__nav-item:focus-visible {
	outline: 2px solid var(--listora-primary);
	outline-offset: 2px;
}

.listora-dashboard__sidebar .listora-dashboard__nav-item.is-active {
	background-color: color-mix(in srgb, var(--listora-primary) 12%, transparent);
	/* Brand text on a wash of itself — the raw value measured 3.39:1 here
	   (BC 10208336512). Background keeps the true brand. */
	color: var(--listora-primary-text);
	font-weight: var(--listora-weight-semibold);
}

.listora-dashboard__sidebar .listora-dashboard__nav-item svg {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
}

/* Count badge — pushed to the right edge via auto inline-margin so
 * the icon+label cluster on the left stays aligned regardless of
 * whether a row has a count. */
.listora-dashboard__sidebar .listora-dashboard__nav-count {
	margin-inline-start: auto;
	padding: 0.1em 0.55em;
	min-width: 1.4em;
	text-align: center;
	font-size: var(--listora-text-size-xs);
	font-weight: var(--listora-weight-semibold);
	color: var(--listora-fg-muted);
	background-color: color-mix(in srgb, var(--listora-fg-default) 8%, transparent);
	border-radius: var(--listora-radius-full);
}

.listora-dashboard__sidebar .listora-dashboard__nav-item.is-active .listora-dashboard__nav-count {
	/* A neutral chip on the brand-tinted row. A brand wash here stacked on
	   the row's own tint and pulled the count under 4.5:1; it is a COUNT,
	   so it carries information. */
	color: var(--listora-primary-text);
	background-color: var(--listora-bg-elevated);
}

/* ─── Main Content ─── */

.listora-dashboard__main {
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-4);
	min-width: 0;
}

/* Header */
.listora-dashboard__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--listora-space-2);
}

/* Wrapper for the dashboard header's primary CTAs (Add Listing,
 * Post a Need, Browse Needs). Lets Pro append its marketplace
 * entry points alongside Free's Add Listing without breaking the
 * existing flex layout. */
.listora-dashboard__header-actions {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--listora-space-2);
	align-items: center;
}

/*
 * Subtitle, not a second heading. The greeting used to BE the h1; now that the
 * heading names the active section, the greeting sits under it and must read
 * as secondary — at near-heading size it just reproduces the two-competing-
 * titles problem this fixed (BC 10208510032).
 */
/* Heading and greeting stack as one unit; the header row keeps them on the
   left with the actions on the right, instead of the greeting becoming a
   third flex item beside the title. */
.listora-dashboard__heading-group {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.listora-dashboard__greeting {
	margin: 0.15rem 0 0;
	font-size: var(--listora-text-size-sm, 0.875rem);
	font-weight: 400;
	color: var(--listora-fg-muted);
}

.listora-dashboard__title {
	font-size: var(--listora-text-size-xl);
	font-weight: var(--listora-weight-bold);
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--listora-fg-default);
}

/* ─── Stats Cards ─── */

.listora-dashboard__stats {
	display: grid;
	/* As many tiles as fit: five tiles no longer strand one on a second row. */
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--listora-space-2);
	margin-block-end: var(--listora-space-6, 1.5rem);
}

.listora-dashboard__stat {
	display: flex;
	align-items: center;
	gap: var(--listora-space-4);
	padding: var(--listora-space-4);
	background: var(--listora-bg-elevated);
	border: var(--listora-card-border);
	border-radius: var(--listora-radius-lg);
	cursor: pointer;
	text-align: start;
	font: inherit;
	color: inherit;
	width: 100%;
	transition: transform var(--listora-transition-base), box-shadow var(--listora-transition-base), border-color var(--listora-transition-base);
}

.listora-dashboard__stat:hover,
.listora-dashboard__stat:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--listora-shadow-md);
	border-color: color-mix(in srgb, var(--listora-primary, var(--listora-wp-admin-link)) 35%, var(--listora-border));
	outline: none;
}

.listora-dashboard__stat:focus-visible {
	outline: 2px solid var(--listora-primary, var(--listora-wp-admin-link));
	outline-offset: 2px;
}

.listora-dashboard__stat:active {
	transform: translateY(0);
}

.listora-dashboard__stat-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--listora-radius-md);
	flex-shrink: 0;
}

.listora-dashboard__stat-icon--active {
	background: color-mix(in srgb, var(--listora-success) 12%, transparent);
	color: var(--listora-success);
}

.listora-dashboard__stat-icon--pending {
	background: color-mix(in srgb, var(--listora-warning) 12%, transparent);
	color: var(--listora-warning);
}

.listora-dashboard__stat-icon--reviews {
	background: color-mix(in srgb, var(--listora-primary) 12%, transparent);
	color: var(--listora-primary-text);
}

.listora-dashboard__stat-icon--saved {
	background: color-mix(in srgb, var(--listora-favorite) 12%, transparent);
	color: var(--listora-favorite);
}

.listora-dashboard__stat-content {
	display: flex;
	flex-direction: column;
}

.listora-dashboard__stat-value {
	font-size: var(--listora-text-size-xl);
	font-weight: var(--listora-weight-bold);
	font-family: var(--listora-card-title-font);
	color: var(--listora-fg-default);
	line-height: 1;
}

.listora-dashboard__stat-label {
	font-size: var(--listora-text-size-xs);
	color: var(--listora-fg-faint);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* ─── Claims list ─── */

.listora-dashboard__claims-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-4);
}

/* ─── Claims pagination (prev / status / next) ─── */
.listora-dashboard__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--listora-space-4);
	margin-block-start: var(--listora-space-5);
	flex-wrap: wrap;
}

.listora-dashboard__pagination .listora-pagination__status {
	font-size: var(--listora-text-size-sm);
	color: var(--listora-fg-muted);
	white-space: nowrap;
}

.listora-dashboard__pagination [aria-disabled="true"] {
	opacity: 0.5;
	pointer-events: none;
	cursor: default;
}

.listora-dashboard__claim-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--listora-space-4);
	padding: var(--listora-space-5);
	background: var(--listora-bg-elevated);
	border: 1px solid var(--listora-border-subtle);
	border-radius: var(--listora-radius-md);
	box-shadow: var(--listora-shadow-sm);
	flex-wrap: wrap;
}

.listora-dashboard__claim-main {
	flex: 1 1 240px;
	min-width: 0;
}

.listora-dashboard__claim-title {
	margin: 0 0 0.35rem;
	font-size: var(--listora-text-size-base);
	font-weight: var(--listora-weight-semibold);
	color: var(--listora-fg-default);
}

.listora-dashboard__claim-title a {
	color: inherit;
	text-decoration: none;
}

.listora-dashboard__claim-title a:hover {
	color: var(--listora-primary-text);
}

.listora-dashboard__claim-meta {
	display: flex;
	gap: var(--listora-space-2);
	align-items: center;
	flex-wrap: wrap;
}

.listora-dashboard__claim-submitted {
	font-size: var(--listora-text-size-xs);
	color: var(--listora-fg-faint);
}

.listora-dashboard__claim-notes {
	margin: 0.5rem 0 0;
	font-size: var(--listora-text-size-sm);
	line-height: 1.5;
	color: var(--listora-fg-muted);
}

.listora-dashboard__claim-notes--muted {
	color: var(--listora-fg-faint);
	font-style: italic;
}

.listora-dashboard__claim-notes--success {
	color: var(--listora-success-fg);
}

.listora-dashboard__claim-actions {
	flex-shrink: 0;
}

.listora-dashboard__nav-count--accent {
	background: var(--listora-primary-fill, var(--listora-primary));
	color: var(--listora-primary-fg);
}

/* ─── Listing Limit Card ─── */

.listora-dashboard__limit {
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-4);
	padding: var(--listora-space-4) var(--listora-space-6);
	margin-block-end: var(--listora-space-6, 1.5rem);
	background: var(--listora-bg-elevated);
	border: var(--listora-card-border);
	border-radius: var(--listora-radius-lg);
}

/* State conveyed by icon-colour modifier below — no decorative
 * left-stripe (read as an AI-tool status indicator and felt out of
 * place for a directory plugin). Exhausted state subtly tints the
 * whole card for emphasis. */
.listora-dashboard__limit--exhausted {
	background: color-mix(in srgb, var(--listora-danger) 4%, var(--listora-bg-elevated));
}

.listora-dashboard__limit-main {
	display: flex;
	align-items: center;
	gap: var(--listora-space-4);
}

.listora-dashboard__limit-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--listora-radius-md);
	background: color-mix(in srgb, var(--listora-primary) 12%, transparent);
	color: var(--listora-primary-text);
	flex-shrink: 0;
}

.listora-dashboard__limit--low .listora-dashboard__limit-icon {
	background: color-mix(in srgb, var(--listora-warning) 14%, transparent);
	color: var(--listora-warning);
}

.listora-dashboard__limit--exhausted .listora-dashboard__limit-icon {
	background: color-mix(in srgb, var(--listora-danger, var(--listora-danger)) 14%, transparent);
	color: var(--listora-danger, var(--listora-danger));
}

.listora-dashboard__limit--unlimited .listora-dashboard__limit-icon {
	background: color-mix(in srgb, var(--listora-success) 14%, transparent);
	color: var(--listora-success);
}

.listora-dashboard__limit-stats {
	flex: 1 1 auto;
	min-width: 0;
}

.listora-dashboard__limit-title {
	margin: 0 0 var(--listora-space-1);
	font-size: var(--listora-text-size-sm);
	font-weight: var(--listora-weight-semibold);
	color: var(--listora-fg-default);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.listora-dashboard__limit-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--listora-space-4);
}

.listora-dashboard__limit-metric {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.listora-dashboard__limit-value {
	font-size: var(--listora-text-size-xl);
	font-weight: var(--listora-weight-bold);
	font-family: var(--listora-card-title-font);
	color: var(--listora-fg-default);
	line-height: 1.1;
	word-break: break-word;
}

.listora-dashboard__limit-label {
	font-size: var(--listora-text-size-xs);
	color: var(--listora-fg-faint);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.listora-dashboard__limit-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--listora-space-2);
	padding-block-start: var(--listora-space-2);
	border-block-start: 1px dashed var(--listora-border, rgba(0, 0, 0, 0.08));
}

.listora-dashboard__limit-message {
	flex: 1 1 240px;
	margin: 0;
	font-size: var(--listora-text-size-sm);
	color: var(--listora-fg-muted);
}

/* ─── Panels ─── */

.listora-dashboard__panel {
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-5);
	animation: listora-fadeIn 0.2s ease;
}

/* When a panel is hidden (inactive tab), preserve `display: none` from the
   native [hidden] attribute — flex column above would otherwise win. */
.listora-dashboard__panel[hidden] {
	display: none;
}

.listora-dashboard__section-title {
	font-size: var(--listora-text-size-base);
	font-weight: var(--listora-weight-semibold);
	margin: 0 0 var(--listora-space-2);
	color: var(--listora-fg-default);
}

/* ─── Empty States ─── */

.listora-dashboard__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--listora-space-12) var(--listora-space-5);
	background: var(--listora-bg-elevated);
	border: 1px solid var(--listora-border-subtle);
	border-radius: var(--listora-radius-md);
	box-shadow: var(--listora-shadow-sm);
	color: var(--listora-fg-faint);
	animation: listora-fadeInScale 0.4s ease;
}

.listora-dashboard__empty svg {
	margin-block-end: var(--listora-space-4);
	opacity: 0.4;
}

.listora-dashboard__empty h3 {
	margin: 0 0 0.3rem;
	color: var(--listora-fg-default);
	font-weight: var(--listora-weight-semibold);
}

.listora-dashboard__empty p {
	margin: 0 0 var(--listora-space-4);
}

/* ─── Listing Rows (Card-Based) ─── */

.listora-dashboard__listing-list {
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-4);
}

.listora-dashboard__listing-row {
	display: flex;
	align-items: center;
	gap: var(--listora-space-4);
	padding: var(--listora-space-5);
	background: var(--listora-bg-elevated);
	border: 1px solid var(--listora-border-subtle);
	border-radius: var(--listora-radius-md);
	box-shadow: var(--listora-shadow-sm);
	transition: box-shadow var(--listora-transition-base);
	animation: listora-fadeInUp 0.3s both;
	animation-delay: calc(var(--row-index, 0) * 0.05s);
}

.listora-dashboard__listing-row:hover {
	box-shadow: var(--listora-shadow-md);
}

.listora-dashboard__listing-thumb {
	width: 80px;
	height: 80px;
	border-radius: var(--listora-radius-md);
	overflow: hidden;
	flex-shrink: 0;
	background: var(--listora-bg-muted);
}

.listora-dashboard__listing-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.listora-dashboard__listing-thumb-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.listora-dashboard__listing-thumb-placeholder .dashicons {
	color: var(--listora-fg-faint);
}

.listora-dashboard__listing-info {
	flex: 1;
	min-width: 0;
}

.listora-dashboard__listing-title {
	font-size: var(--listora-text-size-base);
	margin: 0 0 0.2rem;
	font-weight: var(--listora-weight-semibold);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.listora-dashboard__listing-title a {
	color: var(--listora-fg-default);
	text-decoration: none;
}

.listora-dashboard__listing-title a:hover {
	color: var(--listora-primary-text);
}

.listora-dashboard__listing-meta {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	font-size: var(--listora-text-size-sm);
	color: var(--listora-fg-faint);
}

/* Status pill badges */
.listora-dashboard__status {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	font-weight: var(--listora-weight-medium);
	padding: 0.1em 0.5em;
	border-radius: var(--listora-radius-full);
	font-size: var(--listora-text-size-xs);
}

.listora-dashboard__status--publish {
	background: color-mix(in srgb, var(--listora-success) 12%, transparent);
	color: var(--listora-success);
}

.listora-dashboard__status--pending {
	background: color-mix(in srgb, var(--listora-warning) 12%, transparent);
	color: var(--listora-warning);
}

.listora-dashboard__status--draft {
	background: color-mix(in srgb, var(--listora-fg-faint) 12%, transparent);
	/* fg-faint on a 12% wash of itself lands at 4.38:1. A status is
	   information, not decoration, so it takes the stronger muted value. */
	color: var(--listora-fg-muted);
}

.listora-dashboard__status--expired,
.listora-dashboard__status--rejected {
	background: color-mix(in srgb, var(--listora-danger) 12%, transparent);
	color: var(--listora-danger);
}

.listora-dashboard__status--deactivated {
	background: color-mix(in srgb, var(--listora-fg-faint) 12%, transparent);
	color: var(--listora-fg-faint);
}

/* Featured-until tag — inline in listing meta row */
.listora-dashboard__featured-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	font-weight: var(--listora-weight-medium);
	padding: 0.1em 0.5em;
	border-radius: var(--listora-radius-full);
	font-size: var(--listora-text-size-xs);
	background: color-mix(in srgb, var(--listora-premium, var(--listora-warning)) 14%, transparent);
	color: var(--listora-premium, var(--listora-warning));
	white-space: nowrap;
}

.listora-dashboard__featured-tag svg {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
}

@media (max-width: 640px) {
	.listora-dashboard__featured-tag {
		font-size: 0.6875rem;
		padding: 0.1em 0.45em;
	}
}

/* ─── Meta cluster — unified vocabulary ───
 *
 * Every dashboard listing-row meta strip uses ONLY pills + muted text.
 * The interactive "Manage Services" button moved to the row's actions
 * cluster (right edge) where every row-level action lives. The meta
 * cluster now reads as pure status/info, not a mix of pills + buttons.
 *
 *   Status pill        →  .listora-dashboard__status
 *   Type pill          →  .listora-dashboard__type-tag (new — neutral)
 *   Featured pill      →  .listora-dashboard__featured-tag
 *   Expiring pill      →  .listora-dashboard__status--expiring
 *   Expires text       →  .listora-dashboard__listing-expires (new — muted)
 *   N-services tag     →  .listora-dashboard__services-count (new — subtle)
 * ──────────────────────────────────────────────────────────────────── */

/* Type pill — neutral pill matching the status-pill size + radius so
 * the meta strip reads as a row of badges of equal weight. */
.listora-dashboard__type-tag {
	display: inline-flex;
	align-items: center;
	padding: 0.15em 0.65em;
	font-size: var(--listora-text-size-xs);
	font-weight: var(--listora-weight-medium);
	color: var(--listora-fg-muted);
	background: var(--listora-bg-muted);
	border-radius: var(--listora-radius-full);
	white-space: nowrap;
}

/* Expires-on text — secondary info, not a pill. Muted colour so it
 * recedes behind the status pill. */
.listora-dashboard__listing-expires {
	font-size: var(--listora-text-size-xs);
	color: var(--listora-fg-faint);
	white-space: nowrap;
}

/* Services count — subtle outlined chip with the wrench icon. Indicates
 * the listing has N services without competing visually with the status
 * pill. The interactive "Manage" affordance lives in the actions cluster. */
.listora-dashboard__services-count,
.listora-dashboard__view-count {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: 0.1em 0.55em;
	font-size: var(--listora-text-size-xs);
	font-weight: var(--listora-weight-medium);
	color: var(--listora-fg-muted);
	background: transparent;
	border: 1px solid var(--listora-border);
	border-radius: var(--listora-radius-full);
	white-space: nowrap;
}

.listora-dashboard__services-count svg,
.listora-dashboard__view-count svg {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
}

/* Zero-views state — kept visible (so owners trust the metric is live) but
 * recessed: fainter text + a subtle dashed border so it reads as "nothing
 * yet" rather than competing with listings that actually have traffic. */
.listora-dashboard__view-count--empty {
	color: var(--listora-fg-faint);
	border-style: dashed;
	border-color: var(--listora-border-subtle, var(--listora-border));
}

/* Actions: icon buttons + three-dot menu */
.listora-dashboard__listing-actions {
	display: flex;
	align-items: center;
	gap: var(--listora-space-1);
	flex-shrink: 0;
}

.listora-dashboard__listing-actions .listora-btn--icon {
	width: 2rem;
	height: 2rem;
}

/* Labelled row actions (card 10337190578): icon + word, compact. */
.listora-dashboard__listing-actions .listora-dashboard__row-action {
	gap: 0.3em;
	padding-inline: 0.65em;
	white-space: nowrap;
}

/* Three-dot menu */
.listora-dashboard__menu-wrap {
	position: relative;
}

.listora-dashboard__menu-dropdown {
	position: absolute;
	top: 100%;
	inset-inline-end: 0;
	min-width: 150px;
	background: var(--listora-bg-elevated);
	border-radius: var(--listora-radius-lg);
	box-shadow: var(--listora-shadow-xl);
	padding: var(--listora-space-1) 0;
	z-index: 50;
	animation: listora-fadeInScale 0.15s ease;
}

.listora-dashboard__menu-dropdown[hidden] {
	display: none;
}

.listora-dashboard__menu-item {
	all: unset;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: var(--listora-space-2);
	width: 100%;
	padding: var(--listora-space-2) var(--listora-space-4);
	font-size: var(--listora-text-size-sm);
	color: var(--listora-fg-muted);
	transition: background var(--listora-transition-fast), color var(--listora-transition-fast);
	box-sizing: border-box;
}

.listora-dashboard__menu-item:hover {
	background: var(--listora-bg-surface);
	color: var(--listora-fg-default);
}

.listora-dashboard__menu-item--danger {
	color: var(--listora-danger);
}

.listora-dashboard__menu-item--danger:hover {
	background: color-mix(in srgb, var(--listora-danger) 8%, transparent);
}

/* ─── Review Rows ─── */

/* Review list — uniform space-4 gap matching every other dashboard list */
.listora-dashboard__review-list {
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-4);
}

.listora-dashboard__review-row {
	padding: var(--listora-space-5);
	background: var(--listora-bg-elevated);
	border: 1px solid var(--listora-border-subtle);
	border-radius: var(--listora-radius-md);
	box-shadow: var(--listora-shadow-sm);
}

/* The row itself stays full width to match every other dashboard tab's
   rows (see .listora-dashboard__profile-form's own note on this) — but a
   short review + reply is only a few lines of text, so leaving THAT
   content unconstrained left it hugging the top-left corner of a mostly
   empty box on anything wider than a phone. Cap the readable content to
   a normal reading measure; the row's background/border still fills the
   column, it just isn't emptily wide around the text anymore. The header
   is the exception — see below, it now spends that width on the
   Reply/Edit-reply action instead of leaving it blank. */
.listora-dashboard__review-content,
.listora-dashboard__owner-reply,
.listora-dashboard__reply-form {
	max-width: 640px;
}

/* Meta (rating + listing + date) on the left, the reply action on the
   right — the same left-content/right-actions shape every sibling
   dashboard row (My Listings, Favorites) already uses, so a short review
   spends the row's width on something instead of leaving it empty below
   a stranded "Edit reply" link. */
.listora-dashboard__review-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-block-end: 0.3rem;
	font-size: var(--listora-card-meta-size);
}

.listora-dashboard__review-meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.listora-dashboard__review-listing {
	font-weight: var(--listora-weight-medium);
	color: var(--listora-fg-default);
}

.listora-dashboard__review-date {
	color: var(--listora-fg-faint);
}

.listora-dashboard__review-content {
	margin: 0.3rem 0 0;
	color: var(--listora-fg-muted);
	font-size: var(--listora-text-size-base);
}

/* ─── Profile Form (Two-Column) ─── */

.listora-dashboard__profile-form {
	/* No max-width — spread to fill the column so the page matches the
	 * other dashboard tabs (Reviews, Listings, Favorites, Claims,
	 * Credits, Overview). The inner .listora-dashboard__profile-grid
	 * already uses minmax(0, 1fr) minmax(0, 1fr), so fields scale
	 * proportionally with the container instead of stretching as a
	 * single wide column. */
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-5);
}

/* Card 1 — basic profile fields (Display Name / Email / Bio).
   Matches the same card chrome used by .listora-dashboard__balance-card +
   .listora-dashboard__limit-card so the Profile tab reads as cards-on-
   page-bg per Pattern A. */
.listora-dashboard__profile-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--listora-space-4);
	padding: var(--listora-space-5);
	background: var(--listora-bg-elevated);
	border: 1px solid var(--listora-border-subtle);
	border-radius: var(--listora-radius-md);
	box-shadow: var(--listora-shadow-sm);
}

.listora-dashboard__profile-grid .listora-submission__field--full {
	grid-column: 1 / -1;
}

/* Card 2 — Email Notifications. Same chrome as card 1, internal padding +
   border-top separator dropped (the card itself provides the separation). */
.listora-dashboard__profile-section {
	padding: var(--listora-space-5);
	background: var(--listora-bg-elevated);
	border: 1px solid var(--listora-border-subtle);
	border-radius: var(--listora-radius-md);
	box-shadow: var(--listora-shadow-sm);
}

.listora-dashboard__profile-section-title {
	font-size: var(--listora-text-size-base);
	font-weight: var(--listora-weight-semibold);
	margin: 0 0 var(--listora-space-4);
	color: var(--listora-fg-default);
}

.listora-dashboard__profile-actions {
	display: flex;
	justify-content: flex-end;
}

/* Generic dashboard content card — used by Analytics + any other Pro tab
   that needs to render a single bordered surface. Matches the chrome on
   .listora-dashboard__profile-grid + balance-card so every dashboard tab
   reads as cards-on-page-bg per Pattern A. */
.listora-dashboard__analytics-card {
	padding: var(--listora-space-5);
	background: var(--listora-bg-elevated);
	border: 1px solid var(--listora-border-subtle);
	border-radius: var(--listora-radius-md);
	box-shadow: var(--listora-shadow-sm);
}

@media (max-width: 640px) {
	.listora-dashboard__profile-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Notification toggles */
.listora-dashboard__notification-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--listora-space-2) 0;
}

.listora-dashboard__notification-toggle + .listora-dashboard__notification-toggle {
	border-block-start: 1px solid var(--listora-border);
}

.listora-dashboard__notification-label {
	font-size: var(--listora-text-size-sm);
	color: var(--listora-fg-muted);
}

/* ─── Credits Tab ─── */

/*
 * A healthy balance is INFORMATION, not an alert.
 *
 * This used to paint a full-bleed gradient of `--listora-primary`. That colour
 * belongs to the site, and on any red-brand theme (BuddyX's default #ee4036,
 * for one) a perfectly healthy balance rendered as a large red slab that reads
 * as an error.
 *
 * Worse, the signal was INVERTED: the `--low` variant below uses amber, so a
 * red-brand site showed a calmer colour for the state that actually needs
 * attention than for the one that does not. Colour cannot carry meaning when
 * its base value is chosen by the owner.
 *
 * The card is now a neutral elevated surface. Brand still reads through the
 * balance figure and the Buy button, and colour is reserved for `--low`, where
 * it means something.
 */
.listora-dashboard__balance-card {
	position: relative;
	padding: var(--listora-space-6);
	border-radius: var(--listora-radius-xl);
	color: var(--listora-fg-default);
	background: var(--listora-bg-elevated);
	border: 1px solid var(--listora-border-default);
	box-shadow: var(--listora-shadow-sm);
	overflow: hidden;
	animation: listora-fadeInScale 0.35s ease;
}

/* The figure carries the brand, so the card still feels like the product. */
.listora-dashboard__balance-card .listora-dashboard__balance-value {
	color: var(--listora-primary-text);
}

.listora-dashboard__balance-card .listora-dashboard__balance-label {
	color: var(--listora-fg-muted);
}

/* The white radial sheen existed to lift a saturated background. On a neutral
   surface it is invisible at best and a grey smear at worst. */
.listora-dashboard__balance-card--low::after {
	content: "";
	position: absolute;
	inset-block-start: -40%;
	inset-inline-end: -10%;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, transparent 70%);
	pointer-events: none;
}

/* Low balance is the ONE state that warrants colour — it is asking the member
   to act. Text is forced back to the inverse token because the neutral default
   above would otherwise sit on a saturated amber field. */
.listora-dashboard__balance-card--low {
	color: var(--listora-fg-inverse, #ffffff);
	border-color: transparent;
	background: linear-gradient(
		135deg,
		var(--listora-warning) 0%,
		color-mix(in srgb, var(--listora-warning) 70%, var(--listora-wp-admin-text-strong) 30%) 100%
	);
}

.listora-dashboard__balance-card--low .listora-dashboard__balance-value,
.listora-dashboard__balance-card--low .listora-dashboard__balance-label {
	color: inherit;
}

.listora-dashboard__balance-card-inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--listora-space-4);
	flex-wrap: wrap;
}

.listora-dashboard__balance-content {
	flex: 1 1 220px;
	min-width: 0;
}

.listora-dashboard__balance-label {
	margin: 0;
	font-size: var(--listora-text-size-xs);
	font-weight: var(--listora-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.85;
}

.listora-dashboard__balance-value {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0.3rem 0 0;
	line-height: 1;
}

.listora-dashboard__balance-number {
	font-size: clamp(2.5rem, 6vw, 3.75rem);
	font-weight: var(--listora-weight-bold);
	font-family: var(--listora-card-title-font);
	letter-spacing: -0.02em;
}

.listora-dashboard__balance-unit {
	font-size: var(--listora-text-size-base);
	font-weight: var(--listora-weight-medium);
	opacity: 0.9;
	text-transform: lowercase;
}

.listora-dashboard__balance-warning {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: var(--listora-space-2) 0 0;
	padding: 0.35rem 0.7rem;
	border-radius: var(--listora-radius-full);
	/* A solid chip with its own colour pair, readable on the plain card and on
	   the low-balance gradient alike. A translucent black overlay with the
	   card's inherited text read about 2.6:1 on white (card 10337028634). */
	background: var(--listora-bg-elevated);
	border: 1px solid var(--listora-warning-fg);
	color: var(--listora-warning-fg);
	font-size: var(--listora-text-size-xs);
	font-weight: var(--listora-weight-semibold);
}

.listora-dashboard__balance-warning--owed {
	border-color: var(--listora-danger-fg);
	color: var(--listora-danger-fg);
}

.listora-dashboard__balance-actions {
	flex-shrink: 0;
}

.listora-dashboard__balance-actions .listora-btn--primary {
	background: var(--listora-fg-inverse, var(--listora-bg-elevated));
	color: var(--listora-primary-text);
	border-color: var(--listora-fg-inverse, var(--listora-bg-elevated));
}

.listora-dashboard__balance-card--low .listora-dashboard__balance-actions .listora-btn--primary {
	color: var(--listora-warning);
}

.listora-dashboard__balance-actions .listora-btn--primary:hover,
.listora-dashboard__balance-actions .listora-btn--primary:focus-visible {
	background: rgba(255, 255, 255, 0.92);
	color: inherit;
}

/* Credits sections */
.listora-dashboard__credits-section {
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-4);
}

/* Credit packs grid */
.listora-dashboard__credit-packs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--listora-space-4);
}

.listora-dashboard__credit-pack {
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-4);
	padding: var(--listora-space-5);
	background: var(--listora-bg-elevated);
	border: 1px solid var(--listora-border-subtle);
	border-radius: var(--listora-radius-md);
	box-shadow: var(--listora-shadow-sm);
	transition: transform var(--listora-transition-base), box-shadow var(--listora-transition-base), border-color var(--listora-transition-base);
	animation: listora-fadeInUp 0.3s both;
	animation-delay: calc(var(--row-index, 0) * 0.05s);
}

.listora-dashboard__credit-pack:hover {
	transform: translateY(-2px);
	box-shadow: var(--listora-shadow-md);
	border-color: color-mix(in srgb, var(--listora-primary) 30%, transparent);
}

.listora-dashboard__credit-pack-header {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.listora-dashboard__credit-pack-badge {
	align-self: flex-start;
	padding: 0.15em 0.6em;
	border-radius: var(--listora-radius-full);
	font-size: var(--listora-text-size-xs);
	font-weight: var(--listora-weight-medium);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background: color-mix(in srgb, var(--listora-primary) 10%, transparent);
	color: var(--listora-primary-text);
}

.listora-dashboard__credit-pack-title {
	margin: 0;
	font-size: var(--listora-text-size-base);
	font-weight: var(--listora-weight-semibold);
	color: var(--listora-fg-default);
	line-height: 1.25;
}

.listora-dashboard__credit-pack-body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	flex: 1 1 auto;
}

.listora-dashboard__credit-pack-credits {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	margin: 0;
	line-height: 1;
}

.listora-dashboard__credit-pack-credits-number {
	font-size: var(--listora-text-size-xl);
	font-weight: var(--listora-weight-bold);
	font-family: var(--listora-card-title-font);
	color: var(--listora-primary-text);
}

.listora-dashboard__credit-pack-credits-label {
	font-size: var(--listora-text-size-sm);
	color: var(--listora-fg-faint);
	text-transform: lowercase;
}

.listora-dashboard__credit-pack-price {
	margin: 0;
	font-size: var(--listora-text-size-sm);
	color: var(--listora-fg-muted);
}

.listora-dashboard__credit-pack-price .amount,
.listora-dashboard__credit-pack-price bdi {
	font-weight: var(--listora-weight-semibold);
	color: var(--listora-fg-default);
}

.listora-dashboard__credit-pack-footer {
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-1, 0.5rem);
	align-items: stretch;
	justify-content: flex-end;
	width: 100%;
}

.listora-dashboard__credit-pack-footer .listora-btn {
	width: 100%;
	justify-content: center;
}

.listora-dashboard__credit-pack-buy-direct[disabled],
.listora-dashboard__credit-pack-buy-direct.is-busy {
	opacity: 0.65;
	cursor: progress;
}

.listora-dashboard__credit-pack-unavailable {
	width: 100%;
	text-align: center;
	padding: 0.5rem 0;
	font-size: var(--listora-text-size-xs);
	color: var(--listora-fg-faint);
	font-style: italic;
}

.listora-dashboard__credit-pack-error {
	margin: var(--listora-space-1, 0.5rem) 0 0;
	font-size: var(--listora-text-size-xs);
	color: var(--listora-danger, var(--listora-danger-fg));
	text-align: center;
}

/* ─── Post-checkout banner (success / cancel / error) ─── */

.listora-dashboard__credits-banner {
	position: relative;
	margin: 0 0 var(--listora-space-6, 1.5rem);
	/* Inline-end padding leaves room for the dismiss control so long copy
	   never runs underneath it. */
	padding: var(--listora-space-4, 1rem) calc(var(--listora-space-6, 1.5rem) + 28px) var(--listora-space-4, 1rem) var(--listora-space-6, 1.5rem);
	border-radius: var(--listora-radius-md, 0.5rem);
	font-size: var(--listora-text-base, 1rem);
	border: 1px solid transparent;
	line-height: 1.55;
}

/* Dismiss. A link, so it still works without JS (card 10322935144). */
.listora-dashboard__credits-banner-dismiss {
	position: absolute;
	inset-block-start: var(--listora-space-2, 0.5rem);
	inset-inline-end: var(--listora-space-2, 0.5rem);
	display: flex;
	align-items: center;
	justify-content: center;
	/* Customer-facing control: the 40px tap-target floor applies. */
	min-width: 40px;
	min-height: 40px;
	font-size: 1.35rem;
	line-height: 1;
	color: inherit;
	opacity: 0.65;
	text-decoration: none;
	border-radius: var(--listora-radius-sm, 0.25rem);
}

.listora-dashboard__credits-banner-dismiss:hover,
.listora-dashboard__credits-banner-dismiss:focus-visible {
	opacity: 1;
	text-decoration: none;
}

.listora-dashboard__credits-banner strong {
	display: inline-block;
	margin-inline-end: 0.35rem;
}

.listora-dashboard__credits-banner-balance {
	display: block;
	margin-block-start: 0.25rem;
	font-size: var(--listora-text-sm, 0.875rem);
	opacity: 0.85;
}

.listora-dashboard__credits-banner--success {
	background: var(--listora-success-soft, rgba(16, 163, 74, 0.08));
	color: var(--listora-success, var(--listora-success-fg));
	border-color: var(--listora-success, var(--listora-success-fg));
}

.listora-dashboard__credits-banner--cancel {
	background: var(--listora-warning-soft, rgba(217, 119, 6, 0.08));
	color: var(--listora-warning, var(--listora-warning-fg));
	border-color: var(--listora-warning, var(--listora-warning-fg));
}

.listora-dashboard__credits-banner--error {
	background: var(--listora-danger-bg, rgba(220, 38, 38, 0.08));
	color: var(--listora-danger, var(--listora-danger-fg));
	border-color: var(--listora-danger, var(--listora-danger-fg));
}

/* Transactions list (table-style on desktop, cards on mobile) */
.listora-dashboard__transactions {
	container: listora-transactions / inline-size;
	display: flex;
	flex-direction: column;
	background: var(--listora-bg-elevated);
	border: var(--listora-card-border);
	border-radius: var(--listora-radius-lg);
	overflow: hidden;
}

.listora-dashboard__transactions-head,
.listora-dashboard__transaction {
	display: grid;
	grid-template-columns: minmax(140px, 1.1fr) minmax(110px, 0.9fr) minmax(90px, 0.7fr) minmax(140px, 1.6fr);
	align-items: center;
	gap: var(--listora-space-4);
	padding: var(--listora-space-2) var(--listora-space-4);
}

/* With a Pro Receipt link column, add a 5th fixed-width actions track. */
.listora-dashboard__transactions--has-actions .listora-dashboard__transactions-head,
.listora-dashboard__transactions--has-actions .listora-dashboard__transaction {
	grid-template-columns: minmax(140px, 1.1fr) minmax(110px, 0.9fr) minmax(90px, 0.7fr) minmax(120px, 1.4fr) minmax(80px, 0.6fr);
}

.listora-dashboard__transactions-head {
	background: var(--listora-bg-surface);
	font-size: var(--listora-text-size-xs);
	font-weight: var(--listora-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--listora-fg-faint);
}

.listora-dashboard__transactions-amount-col {
	text-align: end;
}

.listora-dashboard__transaction {
	border-block-start: 1px solid var(--listora-border, rgba(0, 0, 0, 0.06));
	font-size: var(--listora-text-size-sm);
	animation: listora-fadeIn 0.2s both;
	animation-delay: calc(var(--row-index, 0) * 0.03s);
}

.listora-dashboard__transactions-head + .listora-dashboard__transaction {
	border-block-start: none;
}

.listora-dashboard__transaction-date {
	color: var(--listora-fg-muted);
	font-variant-numeric: tabular-nums;
}

.listora-dashboard__transaction-type-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.15em 0.6em;
	border-radius: var(--listora-radius-full);
	font-size: var(--listora-text-size-xs);
	font-weight: var(--listora-weight-medium);
	background: var(--listora-bg-muted);
	color: var(--listora-fg-muted);
}

.listora-dashboard__transaction-type-pill--topup,
.listora-dashboard__transaction-type-pill--refund {
	background: color-mix(in srgb, var(--listora-success) 12%, transparent);
	color: var(--listora-success-fg); /* the solid colour read 2.65:1 on its tint */
}

.listora-dashboard__transaction-type-pill--deduction,
.listora-dashboard__transaction-type-pill--hold {
	background: color-mix(in srgb, var(--listora-danger) 12%, transparent);
	color: var(--listora-danger-fg);
}

.listora-dashboard__transaction-amount {
	text-align: end;
	font-weight: var(--listora-weight-semibold);
	font-variant-numeric: tabular-nums;
}

.listora-dashboard__transaction--positive .listora-dashboard__transaction-amount {
	color: var(--listora-success-fg);
}

.listora-dashboard__transaction--negative .listora-dashboard__transaction-amount {
	color: var(--listora-danger-fg);
}

.listora-dashboard__transaction-note {
	color: var(--listora-fg-muted);
	word-break: break-word;
}

/* ─── Responsive ─── */

/* 900px, not 768: an iPad held upright (820) kept the 260px rail and left
   about 500px for the content (card 10337190578). */
@media (max-width: 900px) {
	.listora-dashboard {
		grid-template-columns: minmax(0, 1fr);
		min-height: auto;
	}

	.listora-dashboard__nav-group {
		display: contents;
	}

	.listora-dashboard__nav-group-title {
		display: none;
	}

	/* Sidebar becomes horizontal scroll tabs on mobile */
	.listora-dashboard__sidebar {
		flex-direction: row;
		overflow-x: auto;
		scrollbar-width: none;
		padding: var(--listora-space-2);
		gap: var(--listora-space-1);
		position: static;
		border-radius: var(--listora-radius-lg);
	}

	.listora-dashboard__sidebar::-webkit-scrollbar {
		display: none;
	}

	/*
	 * Scroll-fade hint on the trailing edge.
	 *
	 * The direction goes through a custom property because rtlcss does NOT
	 * flip gradients inside mask-image — it handles background-image, but the
	 * mask properties are not in its default set. So the generated RTL twin
	 * kept `to right` and the fade appeared on the wrong edge, hinting at
	 * content in the direction the sidebar does not scroll (BC 10208376041).
	 *
	 * `[dir="rtl"]` is read from the document rather than the stylesheet, so
	 * this stays correct in the generated twin AND on any site that flips
	 * direction per-section without swapping stylesheets.
	 */
	.listora-dashboard__sidebar {
		--listora-scroll-fade-dir: to right;
		-webkit-mask-image: linear-gradient(var(--listora-scroll-fade-dir), var(--listora-wp-admin-text-strong) 85%, transparent 100%);
		mask-image: linear-gradient(var(--listora-scroll-fade-dir), var(--listora-wp-admin-text-strong) 85%, transparent 100%);
		padding-inline-end: 2rem;
	}

	[dir="rtl"] .listora-dashboard__sidebar {
		--listora-scroll-fade-dir: to left;
	}

	.listora-dashboard__sidebar-header {
		display: none;
	}

	.listora-dashboard__nav-item {
		white-space: nowrap;
		padding: 0.4rem 0.8rem;
		font-size: var(--listora-text-size-xs);
	}

	.listora-dashboard__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.listora-dashboard__limit {
		padding: var(--listora-space-4);
	}

	.listora-dashboard__limit-main {
		align-items: flex-start;
	}

	.listora-dashboard__limit-grid {
		gap: var(--listora-space-2);
	}

	.listora-dashboard__limit-value {
		font-size: var(--listora-text-size-lg);
	}

	.listora-dashboard__limit-cta {
		flex-direction: column;
		align-items: stretch;
	}

	.listora-dashboard__limit-cta .listora-btn {
		justify-content: center;
	}

	.listora-dashboard__listing-row {
		flex-wrap: wrap;
	}

	.listora-dashboard__listing-actions {
		width: 100%;
		justify-content: flex-end;
	}

	.listora-dashboard__header {
		flex-direction: column;
		align-items: flex-start;
	}

	.listora-dashboard__profile-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.listora-dashboard__balance-card {
		padding: var(--listora-space-4);
	}

	.listora-dashboard__balance-card-inner {
		flex-direction: column;
		align-items: stretch;
	}

	.listora-dashboard__balance-actions .listora-btn {
		width: 100%;
		justify-content: center;
	}

	.listora-dashboard__credit-packs {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Transactions stack as cards when the LIST is narrow, not the viewport:
   beside the dashboard sidebar the list is ~450px at an 820px viewport,
   under the grid's ~640px minimum, and the Note column was clipped. */
@container listora-transactions (max-width: 660px) {
	/* Transactions: stack as cards. */
	.listora-dashboard__transactions-head {
		display: none;
	}

	.listora-dashboard__transaction {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"type amount"
			"date amount"
			"note note";
		gap: 0.35rem var(--listora-space-2);
		padding: var(--listora-space-4);
	}

	.listora-dashboard__transaction-type {
		grid-area: type;
	}

	.listora-dashboard__transaction-date {
		grid-area: date;
		font-size: var(--listora-text-size-xs);
		color: var(--listora-fg-faint);
	}

	.listora-dashboard__transaction-amount {
		grid-area: amount;
		font-size: var(--listora-text-size-base);
		align-self: start;
	}

	.listora-dashboard__transaction-note {
		grid-area: note;
		font-size: var(--listora-text-size-xs);
		color: var(--listora-fg-faint);
	}

	.listora-dashboard__transaction-note:empty {
		display: none;
	}

	/* Receipt actions stack as their own row in the mobile card. */
	.listora-dashboard__transactions--has-actions .listora-dashboard__transaction {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"type amount"
			"date amount"
			"note note"
			"actions actions";
	}

	.listora-dashboard__transaction-actions {
		grid-area: actions;
	}
}

@media (max-width: 480px) {
	.listora-dashboard__listing-thumb {
		width: 60px;
		height: 60px;
	}

	.listora-dashboard__stats {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.listora-dashboard__limit-icon {
		width: 2.25rem;
		height: 2.25rem;
	}

	.listora-dashboard__limit-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.listora-dashboard__favorites-grid {
		--listora-grid-columns: 1 !important;
	}

	.listora-dashboard__balance-number {
		font-size: 2.25rem;
	}

	.listora-dashboard__credit-pack {
		padding: var(--listora-space-4);
	}
}

/* ─── Verify-email pending state in My Listings ─── */
.listora-dashboard__status--pending-verification {
	background: var(--listora-warning-bg);
	color: var(--listora-warning-fg);
}

.listora-dashboard__verify-note {
	margin-top: 0.6rem;
	padding: 0.6rem 0.85rem;
	background: var(--listora-warning-bg);
	border: 1px solid var(--listora-warning-bg);
	border-radius: 6px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
}

.listora-dashboard__verify-message {
	margin: 0;
	color: var(--listora-warning-fg);
	font-size: 0.85rem;
	flex: 1 1 100%;
}

.listora-dashboard__verify-resend {
	font-size: 0.85rem;
	padding: 0.4rem 0.85rem;
}

.listora-dashboard__verify-status {
	color: var(--listora-wp-admin-text);
	font-size: 0.8rem;
}

/* ─── Awaiting-credits paused-listing recovery row ─── */
/* Neutral, muted surface — credits being short is informational, not
 * an error. Avoid aggressive warning amber/red so the row reads as a
 * calm "needs your attention" callout, not a system alert. */
.listora-dashboard__status--awaiting-credits {
	background: var(--listora-bg-muted, #f5f5f5);
	color: var(--listora-fg-muted, #555);
}

.listora-dashboard__paused-note {
	margin-top: 0.75rem;
	padding: 0.85rem 1rem;
	background: var(--listora-bg-muted, #f5f5f5);
	border: 1px solid var(--listora-border-default, #e0e0e0);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.listora-dashboard__paused-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--listora-fg-default, #1a1a1a);
}

.listora-dashboard__paused-title {
	font-size: 0.95rem;
	font-weight: var(--listora-weight-semibold, 600);
}

.listora-dashboard__paused-message {
	margin: 0;
	font-size: 0.875rem;
	color: var(--listora-fg-muted, #555);
}

.listora-dashboard__paused-credits {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	padding: 0.5rem 0.75rem;
	background: var(--listora-bg-elevated, #fff);
	border: 1px solid var(--listora-border-subtle, #e2e8f0);
	border-radius: 6px;
}

.listora-dashboard__paused-credits-row {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35rem;
	font-size: 0.85rem;
}

.listora-dashboard__paused-credits-label {
	color: var(--listora-fg-muted, #555);
}

.listora-dashboard__paused-credits-value {
	font-weight: var(--listora-weight-semibold, 600);
	color: var(--listora-fg-default, #1a1a1a);
}

.listora-dashboard__paused-credits-row--short .listora-dashboard__paused-credits-value {
	color: var(--listora-fg-default, #1a1a1a);
}

.listora-dashboard__paused-explainer {
	margin: 0;
	font-size: 0.8rem;
	color: var(--listora-fg-muted, #555);
	line-height: 1.45;
}

.listora-dashboard__paused-cta {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.listora-dashboard__paused-details {
	margin-top: 0.25rem;
	font-size: 0.8rem;
}

.listora-dashboard__paused-details summary {
	cursor: pointer;
	color: var(--listora-fg-muted, #555);
}

.listora-dashboard__paused-details-body {
	margin: 0.4rem 0 0;
	padding: 0.5rem 0.65rem;
	background: var(--listora-bg-elevated, #fff);
	border: 1px solid var(--listora-border-subtle, #e2e8f0);
	border-radius: 4px;
	color: var(--listora-fg-default, #1a1a1a);
}

/* ─── Renewal flow ─── */

.listora-dashboard__filters {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1rem;
}

.listora-dashboard__filters-label {
	font-size: var(--listora-text-size-sm);
	color: var(--listora-fg-faint);
	font-weight: var(--listora-weight-medium);
}

.listora-dashboard__filter-select {
	max-width: 240px;
}

.listora-dashboard__status--expiring {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	background: color-mix(in srgb, var(--listora-warning, var(--listora-warning)) 16%, transparent);
	color: var(--listora-warning, var(--listora-warning-fg));
	font-weight: var(--listora-weight-medium);
}

.listora-dashboard__renew-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	white-space: nowrap;
}

.listora-dashboard__renew-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.listora-dashboard__renew-modal[hidden] {
	display: none;
}

.listora-dashboard__renew-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
	backdrop-filter: blur(2px);
}

.listora-dashboard__renew-modal-panel {
	position: relative;
	background: var(--listora-bg-elevated);
	color: var(--listora-text, var(--listora-wp-admin-text-strong));
	border-radius: var(--listora-radius-lg, 12px);
	padding: 1.5rem;
	width: min(480px, calc(100vw - 2rem));
	box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
}

.listora-dashboard__renew-modal-close {
	position: absolute;
	top: 0.75rem;
	inset-inline-end: 0.75rem;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	color: var(--listora-fg-faint, var(--listora-wp-admin-text-muted));
	padding: 0;
	transition: background 0.15s, color 0.15s;
}

.listora-dashboard__renew-modal-close:hover,
.listora-dashboard__renew-modal-close:focus-visible {
	background: var(--listora-bg-surface, var(--listora-wp-admin-bg-row-hover));
	color: var(--listora-text, var(--listora-wp-admin-text));
	outline: none;
}

.listora-dashboard__renew-modal-close:focus-visible {
	box-shadow: 0 0 0 2px var(--listora-primary, var(--listora-primary));
}

.listora-dashboard__renew-modal-close svg {
	pointer-events: none;
}

.listora-dashboard__renew-modal-title {
	margin: 0 0 0.6rem;
	font-size: 1.25rem;
}

.listora-dashboard__renew-modal-listing {
	margin: 0 0 1rem;
	color: var(--listora-fg-faint);
	font-size: 0.95rem;
	font-weight: 500;
}

.listora-dashboard__renew-modal-grid {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 0.5rem 1rem;
	margin: 0 0 1rem;
	font-size: 0.92rem;
}

.listora-dashboard__renew-modal-grid dt {
	color: var(--listora-fg-faint);
	font-weight: 500;
}

.listora-dashboard__renew-modal-grid dd {
	margin: 0;
	color: var(--listora-fg-default);
	font-weight: 600;
}

.listora-dashboard__renew-modal-error {
	background: color-mix(in srgb, var(--listora-danger, var(--listora-danger)) 10%, transparent);
	color: var(--listora-danger, var(--listora-danger-fg));
	border-radius: var(--listora-radius-sm, 6px);
	padding: 0.6rem 0.8rem;
	font-size: 0.88rem;
	margin: 0 0 0.5rem;
}

.listora-dashboard__renew-modal-actions {
	display: flex;
	gap: 0.5rem;
	justify-content: flex-end;
	flex-wrap: wrap;
}

.listora-dashboard__toast-stack {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	z-index: 10000;
	pointer-events: none;
}

.listora-dashboard__toast {
	background: var(--listora-text, var(--listora-wp-admin-text-strong));
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	padding: 0.7rem 1rem;
	border-radius: var(--listora-radius-sm, 6px);
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2);
	font-size: 0.9rem;
	max-width: 360px;
	pointer-events: auto;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.listora-dashboard__toast--success {
	background: var(--listora-success, var(--listora-success));
}

.listora-dashboard__toast--error {
	background: var(--listora-danger, var(--listora-danger));
}

.listora-dashboard__toast.is-fading {
	opacity: 0;
	transform: translateY(8px);
}

@media (max-width: 640px) {
	.listora-dashboard__renew-modal-panel {
		padding: 1.2rem;
	}
	.listora-dashboard__renew-modal-actions {
		flex-direction: column;
	}
	.listora-dashboard__renew-modal-actions .listora-btn {
		width: 100%;
	}
}

/* ─── Inline review reply form (My Listings → Reviews) ─── */
.listora-dashboard__reply-form {
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-2);
	margin-block-start: var(--listora-space-2);
	padding: var(--listora-space-4);
	background: var(--listora-bg-surface);
	border-radius: var(--listora-radius-md);
}

.listora-dashboard__reply-form.is-hidden,
.listora-dashboard__reply-trigger.is-hidden,
.listora-dashboard__owner-reply.is-hidden,
.listora-dashboard__reply-form .is-hidden {
	display: none;
}

.listora-dashboard__reply-textarea {
	width: 100%;
	font-family: inherit;
	resize: vertical;
}

.listora-dashboard__reply-actions {
	display: flex;
	gap: var(--listora-space-2);
	align-items: center;
}

.listora-dashboard__reply-error {
	color: var(--listora-danger, var(--listora-danger));
	font-size: var(--listora-text-size-sm);
	margin: 0;
}

/* Card-style, not a colored-left-border callout: matches the SAME reply
   treatment on the public listing page (.listora-reviews__owner-reply) —
   background + radius only. A solid brand-color left border on a quoted
   block is the generic AI-chat/markdown citation look; this plugin
   already has its own, better-established pattern for "owner reply" and
   the dashboard should use the one it has, not a chat-app default. */
.listora-dashboard__owner-reply {
	margin: var(--listora-space-2) 0 0;
	padding: var(--listora-space-2) var(--listora-space-4);
	background: var(--listora-bg-surface);
	border-radius: var(--listora-radius-md);
}

.listora-dashboard__owner-reply strong {
	display: block;
	font-size: var(--listora-text-size-sm);
	color: var(--listora-primary-text);
	font-weight: var(--listora-weight-medium);
	margin-block-end: 0.25rem;
}

.listora-dashboard__owner-reply p {
	margin: 0.3rem 0 0;
	color: var(--listora-fg-muted);
}

/* Moved out of inline styles in tab-reviews.php. */
.listora-dashboard__section-title--spaced {
	margin-block-start: var(--listora-space-6);
}

.listora-dashboard__reply-trigger {
	font-size: var(--listora-text-size-sm);
}

/* ─── Services modal (BC #9976599203) ───
   The per-listing services panel renders in a sibling foreach AFTER all
   listing rows in tab-listings.php, so revealing it in place dropped the
   owner far below the row they clicked. It now presents as a fixed
   overlay, mirroring the renew-modal mechanics above. Open/close/Esc/focus
   wiring lives in src/interactivity/store.js (toggleDashServices /
   closeDashServices). Logical properties only — the RTL twin carries the
   identical block. */
.listora-dashboard__services-panel {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--listora-space-4);
}

.listora-dashboard__services-panel[hidden] {
	display: none;
}

/* Logged-in members see the WordPress admin bar, which sits above this panel.
   Centre the dialog in the space under it, and size it to that space, so its
   top edge is never tucked behind the bar. */
.listora-dashboard__services-panel {
	padding-block-start: calc(var(--wp-admin--admin-bar--height, 0px) + var(--listora-space-4));
}

.listora-dashboard__services-panel .listora-dashboard__services-dialog {
	max-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 2 * var(--listora-space-4));
}

.listora-dashboard__services-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
	backdrop-filter: blur(2px);
}

.listora-dashboard__services-dialog {
	position: relative;
	background: var(--listora-bg-elevated);
	color: var(--listora-text, var(--listora-wp-admin-text-strong));
	border-radius: var(--listora-radius-lg, 12px);
	padding: var(--listora-space-6);
	width: min(720px, calc(100vw - 2 * var(--listora-space-4)));
	max-height: 85vh;
	overflow-y: auto;
	box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
}

/* 40px tap target (frontend responsive contract Rule 4). */
.listora-dashboard__services-close {
	position: absolute;
	top: var(--listora-space-2);
	inset-inline-end: var(--listora-space-2);
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	background: transparent;
	border: 0;
	border-radius: var(--listora-radius-full, 50%);
	cursor: pointer;
	color: var(--listora-fg-faint, var(--listora-wp-admin-text-muted));
	padding: 0;
	transition: background var(--listora-transition-base, 0.15s), color var(--listora-transition-base, 0.15s);
}

.listora-dashboard__services-close:hover,
.listora-dashboard__services-close:focus-visible {
	background: var(--listora-bg-surface, var(--listora-wp-admin-bg-row-hover));
	color: var(--listora-text, var(--listora-wp-admin-text));
	outline: none;
}

.listora-dashboard__services-close:focus-visible {
	box-shadow: 0 0 0 2px var(--listora-primary);
}

.listora-dashboard__services-close svg {
	pointer-events: none;
}

.listora-dashboard__services-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--listora-space-2) var(--listora-space-4);
	margin-block-end: var(--listora-space-4);
	/* Keep the title clear of the absolutely-positioned close button. */
	padding-inline-end: var(--listora-space-6);
}

.listora-dashboard__services-header h4 {
	margin: 0;
	font-size: var(--listora-text-size-base);
	font-weight: var(--listora-weight-semibold);
	color: var(--listora-fg-default);
	overflow-wrap: anywhere;
}

.listora-dashboard__service-form {
	margin-block-end: var(--listora-space-4);
	padding: var(--listora-space-4);
	background: var(--listora-bg-surface);
	border-radius: var(--listora-radius-md);
}

.listora-dashboard__service-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--listora-space-3, 0.75rem) var(--listora-space-4);
}

.listora-dashboard__service-form-grid .listora-submission__field--full {
	grid-column: 1 / -1;
}

/* Card 10350405749 — frontend photo picker, mirrors the admin metabox's
   choose/change/remove control at a component scale that matches this
   form's own inputs. */
.listora-dashboard__service-photo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border: 1px dashed var(--listora-border);
	border-radius: var(--listora-radius-md);
	background: var(--listora-bg-elevated);
	cursor: pointer;
	overflow: hidden;
}

.listora-dashboard__service-photo-preview {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.listora-dashboard__service-photo-empty {
	font-size: var(--listora-text-size-xs);
	color: var(--listora-fg-faint);
	text-align: center;
	padding: 0 var(--listora-space-2);
}

.listora-dashboard__service-form-actions {
	display: flex;
	gap: var(--listora-space-2);
	margin-block-start: var(--listora-space-4);
	flex-wrap: wrap;
}

.listora-dashboard__services-list {
	display: flex;
	flex-direction: column;
}

.listora-dashboard__service-row {
	display: flex;
	align-items: center;
	gap: var(--listora-space-2);
	padding-block: var(--listora-space-2);
	border-block-end: 1px solid var(--listora-border-subtle, var(--listora-border));
}

.listora-dashboard__service-row:last-child {
	border-block-end: 0;
}

.listora-dashboard__service-drag {
	color: var(--listora-fg-faint);
	display: inline-flex;
	flex-shrink: 0;
}

.listora-dashboard__service-thumb {
	border-radius: var(--listora-radius-md);
	object-fit: cover;
	flex-shrink: 0;
}

.listora-dashboard__service-title {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: var(--listora-weight-medium);
	color: var(--listora-fg-default);
	overflow-wrap: anywhere;
}

.listora-dashboard__service-price,
.listora-dashboard__service-duration {
	color: var(--listora-fg-muted);
	font-size: var(--listora-text-size-sm);
	white-space: nowrap;
}

.listora-dashboard__service-actions {
	display: flex;
	gap: var(--listora-space-1);
	margin-inline-start: auto;
	flex-shrink: 0;
}

.listora-dashboard__services-empty p {
	margin: 0;
	color: var(--listora-fg-faint);
}

@media (max-width: 640px) {
	.listora-dashboard__services-panel {
		padding: var(--listora-space-2);
		padding-block-start: calc(var(--wp-admin--admin-bar--height, 0px) + var(--listora-space-2));
	}

	.listora-dashboard__services-panel .listora-dashboard__services-dialog {
		max-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 2 * var(--listora-space-2));
	}

	.listora-dashboard__services-dialog {
		padding: var(--listora-space-4);
		max-height: 92vh;
		width: 100%;
	}

	.listora-dashboard__service-form-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.listora-dashboard__service-form-actions .listora-btn {
		flex: 1 1 auto;
	}
}

/* ─── Blocked Members (Profile tab) ───
 *
 * The section markup and its unblock handler shipped in 1.7.0 with no CSS at
 * all, so it rendered as bare h3/p at browser defaults with theme bullets on
 * the list - visibly breaking out of the Profile tab it sits in
 * (card 10322692957). `__section-title` was already styled; the container, the
 * description and the list were not.
 *
 * Chrome matches .listora-dashboard__profile-section, the sub-sections
 * directly above it, so the tab reads as one design.
 */
.listora-dashboard__section {
	padding: var(--listora-space-5);
	background: var(--listora-bg-elevated);
	border: 1px solid var(--listora-border-subtle);
	border-radius: var(--listora-radius-md);
	box-shadow: var(--listora-shadow-sm);
}

.listora-dashboard__section-desc {
	margin: 0 0 var(--listora-space-4);
	font-size: var(--listora-text-size-sm);
	line-height: 1.5;
	color: var(--listora-fg-muted);
}

/* Empty state. Also the element the IAPI store swaps in when the last blocked
   member is unblocked, so it has to look right without a reload. */
.listora-dashboard__blocked-empty {
	margin: 0;
	font-size: var(--listora-text-size-sm);
	color: var(--listora-fg-muted);
}

.listora-dashboard__blocked-list {
	margin: 0;
	padding: 0;
	list-style: none; /* A theme's bullets were showing through. */
}

.listora-dashboard__blocked-row {
	display: flex;
	align-items: center;
	gap: var(--listora-space-3);
	padding: var(--listora-space-3) 0;
}

.listora-dashboard__blocked-row + .listora-dashboard__blocked-row {
	border-block-start: 1px solid var(--listora-border-subtle);
}

.listora-dashboard__blocked-avatar {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
}

.listora-dashboard__blocked-name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: var(--listora-text-size-sm);
	color: var(--listora-fg-default);
	overflow-wrap: anywhere; /* A long display name must not push the button off. */
}

.listora-dashboard__unblock-btn {
	flex: 0 0 auto;
	/* Customer-facing control: the 40px tap-target floor applies. */
	min-height: 40px;
}

@media (max-width: 640px) {
	.listora-dashboard__blocked-row {
		flex-wrap: wrap;
	}

	/* Name takes the rest of the avatar's row; the button drops beneath so it
	   keeps a full-width target instead of being squeezed. */
	.listora-dashboard__blocked-name {
		flex: 1 1 calc(100% - 32px - var(--listora-space-3));
	}

	.listora-dashboard__unblock-btn {
		flex: 1 0 100%;
	}
}

/* ─── Nav groups (card 10337190578) ───
   Desktop only: at 900px and under the rail is a horizontal strip and the
   groups dissolve (display: contents, in the media query above). */

@media (min-width: 901px) {
	.listora-dashboard__nav-group {
		display: flex;
		flex-direction: column;
		gap: var(--listora-space-1);
	}

	.listora-dashboard__nav-group + .listora-dashboard__nav-group {
		margin-block-start: var(--listora-space-3);
	}
}

.listora-dashboard__nav-group-title {
	margin: 0 0 var(--listora-space-1);
	padding-inline: 0.85rem;
	font-size: var(--listora-text-size-xs);
	font-weight: var(--listora-weight-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--listora-fg-faint);
}

/* ─── Unknown-tab notice ─── */

.listora-dashboard__notice {
	margin: 0;
	padding: var(--listora-space-3) var(--listora-space-4);
	border: 1px solid var(--listora-border-default);
	border-inline-start: 3px solid var(--listora-warning, var(--listora-primary));
	border-radius: var(--listora-radius-md);
	background: var(--listora-bg-elevated);
	color: var(--listora-fg-default);
	font-size: var(--listora-text-size-sm);
}

/* ─── Overview: next steps ─── */

.listora-dashboard__todos {
	padding: var(--listora-space-4);
	background: var(--listora-bg-elevated);
	border: 1px solid var(--listora-border-default);
	border-inline-start: 3px solid var(--listora-primary);
	border-radius: var(--listora-radius-lg);
	margin-block-end: var(--listora-space-4);
}

.listora-dashboard__todos .listora-dashboard__section-title {
	margin: 0 0 var(--listora-space-2);
}

.listora-dashboard__todo-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-1);
}

.listora-dashboard__todo-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--listora-space-3);
	min-height: var(--listora-tap-target, 40px);
	padding: 0.4rem 0.6rem;
	border-radius: var(--listora-radius-md);
	color: var(--listora-fg-default);
	text-decoration: none;
	font-size: var(--listora-text-size-sm);
	font-weight: var(--listora-weight-medium);
}

.listora-dashboard__todo-link:hover {
	background: color-mix(in srgb, var(--listora-primary) 8%, transparent);
	color: var(--listora-primary-text);
}

.listora-dashboard__todo-link svg {
	flex-shrink: 0;
	color: var(--listora-fg-faint);
}

/* ─── My Listings filters ─── */

.listora-dashboard__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--listora-space-2);
	margin-block-end: var(--listora-space-4);
}

.listora-dashboard__filters .listora-dashboard__filter-search {
	flex: 1 1 200px;
	min-width: 160px;
}

.listora-dashboard__filters .listora-dashboard__filter-select {
	flex: 0 1 auto;
	width: auto;
}

/* ─── Numbered pager ─── */

.listora-pagination__pages {
	display: inline-flex;
	align-items: center;
	gap: var(--listora-space-1);
	flex-wrap: wrap;
}

.listora-pagination__page {
	min-width: var(--listora-tap-target, 40px);
	justify-content: center;
}

.listora-pagination__gap {
	padding-inline: 0.25rem;
	color: var(--listora-fg-faint);
}

/* ─── Profile: avatar ─── */

.listora-dashboard__avatar {
	display: flex;
	align-items: center;
	gap: var(--listora-space-4);
	margin-block-end: var(--listora-space-5);
}

.listora-dashboard__avatar-img {
	width: 72px;
	height: 72px;
	border-radius: var(--listora-radius-full);
	object-fit: cover;
	flex-shrink: 0;
}

.listora-dashboard__avatar-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
}

.listora-dashboard__avatar-title {
	font-weight: var(--listora-weight-semibold);
	color: var(--listora-fg-default);
}

.listora-dashboard__avatar-hint {
	font-size: var(--listora-text-size-sm);
	color: var(--listora-fg-muted);
}

/* ─── Profile: grouped notification toggles ─── */

.listora-dashboard__notification-group {
	margin: 0 0 var(--listora-space-4);
	padding: 0;
	border: 0;
	min-width: 0;
}

.listora-dashboard__notification-group-title {
	padding: 0;
	margin-block-end: var(--listora-space-2);
	font-size: var(--listora-text-size-sm);
	font-weight: var(--listora-weight-semibold);
	color: var(--listora-fg-default);
}