/*
 * Member dashboard.
 *
 * Kept in its own file rather than main.css: the dashboard only loads on
 * UsersWP pages, and the single-listing redesign is moving through main.css at
 * the same time.
 *
 * Every value here is a token from tokens.css. Nothing new is invented.
 */

/* --- Tabs ------------------------------------------------------------- */

.own-dash-nav {
	margin: 0 0 var(--own-space-6);
	border-bottom: 1px solid var(--own-color-border);
}

.own-dash-nav__toggle {
	display: none;
	width: 100%;
	padding: var(--own-space-3) var(--own-space-4);
	font: inherit;
	font-weight: var(--own-weight-medium);
	color: var(--own-color-text);
	text-align: left;
	background: var(--own-color-surface-muted);
	border: 1px solid var(--own-color-border);
	border-radius: var(--own-radius-md);
	appearance: none;
	cursor: pointer;
}

.own-dash-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--own-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.own-dash-nav__link {
	display: inline-flex;
	align-items: center;
	gap: var(--own-space-2);
	padding: var(--own-space-3) var(--own-space-4);
	color: var(--own-color-muted);
	font-weight: var(--own-weight-medium);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.own-dash-nav__link:hover,
.own-dash-nav__link:focus-visible {
	color: var(--own-color-text);
	background: var(--own-color-surface-muted);
}

.own-dash-nav__item.is-active .own-dash-nav__link {
	color: var(--own-color-accent);
	border-bottom-color: var(--own-color-accent);
}

/*
 * A locked tab is muted but still a link. Rich's rule since May 2025 is that a
 * locked feature is greyed AND carries a notification, so the padlock is
 * paired with a real panel behind the link rather than replacing it.
 */
.own-dash-nav__item.is-locked .own-dash-nav__link {
	color: var(--own-color-placeholder);
}

.own-dash-nav__item.is-locked.is-active .own-dash-nav__link {
	color: var(--own-color-text-2);
	border-bottom-color: var(--own-color-border);
}

.own-dash-nav__lock {
	font-size: 0.8em;
	line-height: 1;
}

/* --- Panel and tab heading -------------------------------------------- */

.own-dash-panel {
	scroll-margin-top: var(--own-space-8);
}

.own-dash-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--own-space-4);
	margin: 0 0 var(--own-space-6);
}

.own-dash-head__title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: var(--own-weight-heading);
	color: var(--own-color-primary);
}

.own-dash-head__lede {
	margin: var(--own-space-2) 0 0;
	max-width: 56ch;
	color: var(--own-color-muted);
}

.own-dash-head__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--own-space-2);
}

/* --- Manage rows ------------------------------------------------------- */

.own-dash-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--own-color-border);
	border-radius: var(--own-radius-lg);
	overflow: hidden;
}

.own-dash-list__item {
	display: flex;
	align-items: center;
	gap: var(--own-space-4);
	padding: var(--own-space-4);
	background: var(--own-color-surface);
}

.own-dash-list__item + .own-dash-list__item {
	border-top: 1px solid var(--own-color-hairline);
}

.own-dash-list__media {
	flex: 0 0 72px;
	width: 72px;
	height: 72px;
	overflow: hidden;
	background: var(--own-color-surface-muted);
	border-radius: var(--own-radius-sm);
}

.own-dash-list__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.own-dash-list__text {
	flex: 1 1 auto;
	min-width: 0;
}

.own-dash-list__title {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: var(--own-weight-heading);
}

.own-dash-list__title a {
	color: var(--own-color-primary);
	text-decoration: none;
}

.own-dash-list__title a:hover {
	color: var(--own-color-accent);
	text-decoration: underline;
}

.own-dash-list__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--own-space-2);
	margin: var(--own-space-2) 0 0;
	font-size: 0.875rem;
	color: var(--own-color-muted);
}

.own-dash-status {
	display: inline-block;
	padding: 2px var(--own-space-2);
	font-size: 0.8125rem;
	font-weight: var(--own-weight-medium);
	border-radius: var(--own-radius-pill);
	background: var(--own-color-surface-muted);
	color: var(--own-color-text-2);
}

.own-dash-status--publish {
	background: var(--own-color-accent-pale);
	color: var(--own-color-accent-hover);
}

.own-dash-status--pending,
.own-dash-status--draft {
	background: var(--own-color-cream);
	color: var(--own-color-text);
}

.own-dash-list__plan {
	color: var(--own-color-featured);
	font-weight: var(--own-weight-medium);
}

.own-dash-list__actions {
	flex: 0 0 auto;
}

/* --- Empty states ------------------------------------------------------ */

.own-dash-empty {
	margin: 0;
	padding: var(--own-space-6);
	max-width: 60ch;
	color: var(--own-color-muted);
	background: var(--own-color-surface-muted);
	border: 1px dashed var(--own-color-border);
	border-radius: var(--own-radius-lg);
}

/* --- Locked panel and Go Pro ------------------------------------------ */

.own-dash-lock,
.own-dash-pro {
	max-width: 62ch;
	padding: var(--own-space-6);
	background: var(--own-color-surface-panel);
	border: 1px solid var(--own-color-border);
	border-radius: var(--own-radius-lg);
}

.own-dash-pro {
	margin-top: var(--own-space-6);
}

.own-dash-lock__badge {
	margin: 0 0 var(--own-space-2);
	font-size: 0.8125rem;
	font-weight: var(--own-weight-medium);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--own-color-featured);
}

.own-dash-lock__title,
.own-dash-pro__title {
	margin: 0 0 var(--own-space-3);
	font-size: 1.375rem;
	font-weight: var(--own-weight-heading);
	color: var(--own-color-primary);
}

.own-dash-lock__body,
.own-dash-pro__lede {
	margin: 0 0 var(--own-space-4);
	color: var(--own-color-text-2);
}

.own-dash-lock__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--own-space-2) var(--own-space-4);
	margin: 0 0 var(--own-space-5);
	padding: 0 0 0 var(--own-space-5);
	color: var(--own-color-text-2);
}

.own-dash-lock__cta {
	margin: 0 0 var(--own-space-3);
}

.own-dash-lock__note {
	margin: 0;
	font-size: 0.875rem;
	color: var(--own-color-muted);
}

/* --- Guides ------------------------------------------------------------ */

.own-dash-guides {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--own-space-5);
}

.own-dash-guide__link {
	display: block;
	text-decoration: none;
}

.own-dash-guide__image {
	width: 100%;
	aspect-ratio: 16 / 10;
	max-width: 100%;
	object-fit: cover;
	border-radius: var(--own-radius-md);
}

.own-dash-guide__title {
	margin: var(--own-space-3) 0 0;
	font-size: 1.0625rem;
	font-weight: var(--own-weight-heading);
	color: var(--own-color-primary);
}

.own-dash-guide__link:hover .own-dash-guide__title {
	color: var(--own-color-accent);
}

.own-dash-guide__excerpt {
	margin: var(--own-space-2) 0 0;
	font-size: 0.9375rem;
	color: var(--own-color-muted);
}

/* --- Analytics --------------------------------------------------------- */

.own-dash-analytics + .own-dash-analytics {
	margin-top: var(--own-space-6);
	padding-top: var(--own-space-6);
	border-top: 1px solid var(--own-color-hairline);
}

.own-dash-analytics__title {
	margin: 0 0 var(--own-space-3);
	font-size: 1.125rem;
	font-weight: var(--own-weight-heading);
	color: var(--own-color-primary);
}

/* --- Narrow screens ---------------------------------------------------- */

@media (max-width: 782px) {
	.own-dash-nav__toggle {
		display: block;
	}

	.own-dash-nav__list {
		display: none;
		flex-direction: column;
		gap: 0;
		margin-top: var(--own-space-2);
	}

	.own-dash-nav__list.is-open {
		display: flex;
	}

	.own-dash-nav__link {
		border-bottom: 1px solid var(--own-color-hairline);
	}

	.own-dash-list__item {
		flex-wrap: wrap;
	}

	.own-dash-list__actions {
		flex: 1 0 100%;
	}

	.own-dash-lock__list {
		grid-template-columns: 1fr;
	}
}

/* --- Pagination -------------------------------------------------------- */

.own-dash-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--own-space-3);
	margin-top: var(--own-space-4);
}

.own-dash-pager__count {
	font-size: 0.875rem;
	color: var(--own-color-muted);
}

/* --- Account and billing ----------------------------------------------- */

.own-dash-billing + .own-dash-billing {
	margin-top: var(--own-space-6);
	padding-top: var(--own-space-6);
	border-top: 1px solid var(--own-color-hairline);
}

.own-dash-billing__title {
	margin: 0 0 var(--own-space-3);
	font-size: 1.125rem;
	font-weight: var(--own-weight-heading);
	color: var(--own-color-primary);
}

.own-dash-plan {
	margin: 0 0 var(--own-space-6);
	padding: var(--own-space-4);
	color: var(--own-color-text-2);
	background: var(--own-color-surface-panel);
	border: 1px solid var(--own-color-border);
	border-radius: var(--own-radius-md);
}

/*
 * UsersWP and GetPaid render their own markup here. The theme sets the type
 * and spacing it sits in and otherwise leaves it alone, rather than fighting
 * two plugins' stylesheets.
 */
.own-dash-embed {
	max-width: var(--own-width-content);
}

.own-dash-embed table {
	width: 100%;
	border-collapse: collapse;
}

.own-dash-embed th,
.own-dash-embed td {
	padding: var(--own-space-3);
	text-align: left;
	border-bottom: 1px solid var(--own-color-hairline);
}

/*
 * Plugin buttons and tables inside the dashboard.
 *
 * UsersWP and GetPaid render AyeCode's Bootstrap. Two things came out wrong in
 * the preview and both look like faults rather than styling:
 *
 *  - "Update Account" rendered mid-grey, which reads as a disabled button on
 *    the primary action of the screen, while "Save Address" two sections down
 *    rendered blue. Same class, different result, so the colour is pinned here
 *    instead of chased through AyeCode's variables.
 *  - AyeCode's blue is #1E73BE, the old Elementor kit's brand colour. The
 *    redesign moved to --own-color-accent, so these follow it.
 */

.own-dash-embed .btn-primary,
.own-dash-embed input.btn-primary {
	/*
	 * appearance:none is load-bearing, not tidiness. An input[type=submit]
	 * without it keeps its native control painting and ignores
	 * background-color entirely, which is why "Update Account" rendered mid
	 * grey while "Save Address" — same .btn-primary, but also .form-control,
	 * which resets appearance — rendered blue two sections below it.
	 */
	appearance: none;
	-webkit-appearance: none;
	--bs-btn-bg: var(--own-color-accent);
	--bs-btn-color: #fff;
	--bs-btn-border-color: var(--own-color-accent);
	--bs-btn-hover-bg: var(--own-color-accent-hover);
	--bs-btn-hover-border-color: var(--own-color-accent-hover);
	background-color: var(--own-color-accent);
	border-color: var(--own-color-accent);
	color: #fff;
}

.own-dash-embed .btn-primary:hover,
.own-dash-embed input.btn-primary:hover {
	background-color: var(--own-color-accent-hover);
	border-color: var(--own-color-accent-hover);
}

.own-dash-embed .btn-outline-primary {
	--bs-btn-color: var(--own-color-accent);
	--bs-btn-border-color: var(--own-color-accent);
	color: var(--own-color-accent);
	border-color: var(--own-color-accent);
}

/*
 * GetPaid repeats the subscriptions table's header in a <tfoot>. On a table
 * with one row that reads as a second, empty subscription.
 */
.own-dash-embed table tfoot {
	display: none;
}

/*
 * UsersWP hard-codes its own grey on form submits:
 *
 *   .uwp_page .uwp-account-form input[type="submit"] { background: #717171 }
 *
 * Three class-level parts, so it beats any sensible selector of ours, and it
 * is a literal colour rather than a variable — there is nothing to re-point.
 * That is why "Update Account", the primary action of the account screen,
 * rendered mid-grey and read as disabled. !important here is aimed at one
 * declaration in one plugin stylesheet, not used as a habit.
 */
.own-dash-embed input[type="submit"].btn-primary,
.own-dash-embed input[type="submit"].uwp_button {
	appearance: none;
	-webkit-appearance: none;
	background: var(--own-color-accent) !important;
	border-color: var(--own-color-accent) !important;
	color: #fff !important;
}

.own-dash-embed input[type="submit"].btn-primary:hover,
.own-dash-embed input[type="submit"].uwp_button:hover {
	background: var(--own-color-accent-hover) !important;
	border-color: var(--own-color-accent-hover) !important;
}

/* --- Dashboard header -------------------------------------------------- */

.own-dash-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--own-space-4);
	margin: 0 0 var(--own-space-6);
	padding-bottom: var(--own-space-5);
	border-bottom: 1px solid var(--own-color-hairline);
}

.own-dash-header__identity {
	display: flex;
	align-items: center;
	gap: var(--own-space-4);
	min-width: 0;
}

.own-dash-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--own-color-accent-tint);
	color: var(--own-color-accent-hover);
	font-size: 1.375rem;
	font-weight: var(--own-weight-heading);
	letter-spacing: 0.02em;
}

.own-dash-avatar--image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.own-dash-header__title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: var(--own-weight-heading);
	color: var(--own-color-primary);
}

.own-dash-header__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--own-space-2);
	margin: var(--own-space-2) 0 0;
	font-size: 0.875rem;
	color: var(--own-color-muted);
}

.own-dash-plan-badge {
	display: inline-block;
	padding: 2px var(--own-space-3);
	font-weight: var(--own-weight-medium);
	color: var(--own-color-text-2);
	background: var(--own-color-surface-muted);
	border-radius: var(--own-radius-pill);
}

.own-dash-plan-badge.is-paid {
	color: #fff;
	background: var(--own-color-featured);
}

.own-dash-header__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--own-space-2);
}

.own-dash-header__avatar-change {
	padding: var(--own-space-3) var(--own-space-5);
	font: inherit;
	font-weight: var(--own-weight-medium);
	color: var(--own-color-accent);
	background: transparent;
	border: 1px solid var(--own-color-border);
	border-radius: var(--own-radius-md);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.own-dash-header__avatar-change:hover {
	background: var(--own-color-accent-tint);
}

@media (max-width: 640px) {
	.own-dash-header,
	.own-dash-header__actions {
		width: 100%;
	}

	.own-dash-header__actions .own-btn,
	.own-dash-header__avatar-change {
		flex: 1 1 auto;
		text-align: center;
	}
}