/* Shared admin shell: subnav + layout, used by users/invites/clients */

body {
	align-items: stretch;
}

/* Segmented pill subnav */
.admin-subnav {
	width: 100%;
	max-width: var(--page-width);
	margin: 0 auto var(--space-6);
	display: flex;
	gap: 0;
	background: var(--ink-sunken);
	border: 1px solid var(--paper-dim);
	padding: 3px;
}

.admin-subnav a {
	flex: 1;
	color: var(--paper-dim);
	text-decoration: none;
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: 0.05rem;
	padding: var(--space-2) var(--space-3);
	text-align: center;
	transition: all 0.15s;
	border: 1px solid transparent;
}

.admin-subnav a:hover {
	color: var(--paper);
	background: rgba(188, 141, 160, 0.08);
}

.admin-subnav a.active {
	color: var(--paper);
	background: rgba(171, 73, 103, 0.25);
	border-color: var(--accent);
}

/* Action button row (used by invites and clients) */
.invite-actions {
	display: flex;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}

.invite-btn {
	padding: var(--space-2) var(--space-4);
	background: var(--accent);
	color: var(--paper);
	border: none;
	cursor: pointer;
	font-family: inherit;
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: 0.03rem;
	transition: background 0.2s;
}

.invite-btn:hover {
	background: var(--accent-deep);
}

.invite-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Main content area */
.admin-main {
	width: 100%;
	max-width: var(--page-width);
	margin: 0 auto;
}

.admin-title {
	font-size: var(--text-xl);
	font-weight: 600;
	color: var(--paper);
	margin-bottom: var(--space-4);
	letter-spacing: -0.05rem;
}

.loading,
.empty {
	color: var(--paper-dim);
	font-size: var(--text-sm);
	padding: var(--space-4) 0;
}

.back-link {
	text-align: center;
	font-size: var(--text-sm);
}

.back-link a {
	color: var(--accent);
	text-decoration: none;
}

.back-link a:hover {
	text-decoration: underline;
}

/* Compact user rows */
.users-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.user-card {
	background: rgba(188, 141, 160, 0.05);
	border: 1px solid var(--paper-dim);
	padding: var(--space-3) var(--space-4);
	display: flex;
	gap: var(--space-3);
	align-items: center;
	transition: background 0.2s;
}

.user-card:hover {
	background: rgba(188, 141, 160, 0.1);
}

.user-card .user-avatar {
	width: 2.5rem;
	height: 2.5rem;
	font-size: 0.875rem;
}

.user-info {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	flex: 1;
	min-width: 0;
}

.user-name {
	font-size: var(--text-md);
	font-weight: 600;
	color: var(--paper);
}

.user-meta {
	font-size: var(--text-xs);
	color: var(--paper-dim);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.user-badges {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
}

.user-actions {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
}

.user-suspended {
	opacity: 0.5;
}