/* WpSocialManager frontend portal — Cloudflare-dashboard aesthetic:
   zinc/slate neutrals, 1px borders, dense, square corners.
   Every class here is prefixed kcd_wp-social-manager_ and defined only
   in this file — this plugin owns its own dense-table/badge/drawer/tab
   primitives rather than depending on the shared kcdev-framework's
   assets/kcdev-admin.css classes, so this plugin's console/DataGrid
   markup (shared between the frontend portal and the wp-admin Members
   Console — see assets/wpsm.js) always looks the same and never goes
   unstyled if that other stylesheet isn't loaded. This is loaded
   alongside the active theme's own CSS, not instead of it — an earlier
   version tried to dequeue every other stylesheet on the page to force
   a theme-independent look and broke the surrounding page layout
   instead (the theme's header/nav/wrapper markup is still there; only
   the .kcd_wp-social-manager subtree below is this plugin's). Scoping
   through unique, plugin-prefixed class names is what actually keeps
   this markup safe from the theme, not fighting over the style queue. */

.kcd_wp-social-manager {
	--wpsm-bg: #fafafa;
	--wpsm-surface: #ffffff;
	--wpsm-border: #e4e4e7;
	--wpsm-text: #18181b;
	--wpsm-muted: #71717a;
	--wpsm-accent: #2563eb;
	--wpsm-accent-dark: #1d4ed8;
	--wpsm-danger: #dc2626;
	color: var(--wpsm-text);
	font-size: 14px;
}

/* Centered, focused-task width for the guest auth screens (Login/
   Register) only — wp-admin's Members Console reuses this same
   wrapper (for the --wpsm-* custom properties above) but keeps this
   plugin's site-wide dense, full-width admin panel convention instead
   (see CLAUDE.md); the logged-in dashboard (kcd_wp-social-manager_is-
   dashboard, added by renderDashboard() once someone's signed in) is
   full-width for the same "maximize screen real estate" reason — see
   .kcd_wp-social-manager_shell below. */
body:not(.wp-admin) .kcd_wp-social-manager:not(.kcd_wp-social-manager_is-dashboard) {
	max-width: 960px;
	margin: 0 auto;
	/* Centers the login/register card both horizontally (align-items,
	   across the max-width above) and vertically (min-height +
	   justify-content) rather than just sitting left-aligned at the
	   top of a wide block. */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 70vh;
	padding: 24px 16px;
}

.kcd_wp-social-manager * {
	box-sizing: border-box;
}

.kcd_wp-social-manager [hidden] {
	display: none !important;
}

/* Base link color — without this, an active theme's own bare `a { }`
   rule (e.g. the KC-Dev theme's) is the only thing that ever matches
   an unclassed <a> this plugin renders (the "Resend verification
   email" link, CSV/Excel export links, ...), since a plain element
   selector loses to nothing here otherwise. Every other reusable
   component in this file is its own class already; a link is the one
   element plain enough that plugins conventionally style it this way
   instead of classing every occurrence. */
.kcd_wp-social-manager a {
	color: var(--wpsm-accent);
}
.kcd_wp-social-manager a:hover {
	color: var(--wpsm-accent-dark);
}

.kcd_wp-social-manager_card {
	background: var(--wpsm-surface);
	border: 1px solid var(--wpsm-border);
	padding: 16px;
	margin-bottom: 12px;
}

.kcd_wp-social-manager_notice {
	padding: 8px 12px;
	border: 1px solid var(--wpsm-border);
	background: #eff6ff;
	color: #1e3a8a;
	font-size: 13px;
	margin-bottom: 12px;
}
.kcd_wp-social-manager_notice.is-error {
	background: #fef2f2;
	color: #991b1b;
	border-color: #fecaca;
}
.kcd_wp-social-manager_notice.is-success {
	background: #f0fdf4;
	color: #166534;
	border-color: #bbf7d0;
}

/* Auth forms */
.kcd_wp-social-manager_auth-tabs {
	display: flex;
	gap: 0;
	margin-bottom: 12px;
	border: 1px solid var(--wpsm-border);
	width: fit-content;
}
.kcd_wp-social-manager_auth-tabs button {
	background: var(--wpsm-surface);
	border: none;
	padding: 7px 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--wpsm-muted);
	cursor: pointer;
	border-right: 1px solid var(--wpsm-border);
}
.kcd_wp-social-manager_auth-tabs button:last-child {
	border-right: none;
}
.kcd_wp-social-manager_auth-tabs button.is-active {
	background: var(--wpsm-accent);
	color: #fff;
}

.kcd_wp-social-manager_form {
	display: grid;
	gap: 10px;
	max-width: 420px;
}
.kcd_wp-social-manager_form.is-wide {
	max-width: 640px;
	grid-template-columns: 1fr 1fr;
}
.kcd_wp-social-manager_form.is-wide .kcd_wp-social-manager_field.is-full {
	grid-column: 1 / -1;
}
@media (max-width: 560px) {
	.kcd_wp-social-manager_form.is-wide {
		grid-template-columns: 1fr;
	}
	.kcd_wp-social-manager_form.is-wide .kcd_wp-social-manager_field.is-full {
		grid-column: auto;
	}
	.kcd_wp-social-manager_phone-group select {
		width: 108px;
	}
}
.kcd_wp-social-manager_field label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--wpsm-muted);
	margin-bottom: 3px;
}
.kcd_wp-social-manager_field input,
.kcd_wp-social-manager_field select,
.kcd_wp-social-manager_field textarea {
	width: 100%;
	border: 1px solid var(--wpsm-border);
	padding: 6px 8px;
	font-size: 13px;
	background: #fff;
	color: var(--wpsm-text);
}
.kcd_wp-social-manager_field textarea {
	min-height: 60px;
}
.kcd_wp-social-manager_phone-group {
	display: flex;
	gap: 6px;
}
.kcd_wp-social-manager_phone-group select {
	flex: 0 0 auto;
	width: 128px;
}
.kcd_wp-social-manager_phone-group input {
	flex: 1 1 auto;
	min-width: 0;
}
.kcd_wp-social-manager_field input:focus,
.kcd_wp-social-manager_field select:focus,
.kcd_wp-social-manager_field textarea:focus {
	outline: 2px solid var(--wpsm-accent);
	outline-offset: -1px;
}

.kcd_wp-social-manager_btn {
	display: inline-block;
	background: var(--wpsm-accent);
	color: #fff;
	border: 1px solid var(--wpsm-accent);
	padding: 7px 16px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.kcd_wp-social-manager_btn:hover {
	background: var(--wpsm-accent-dark);
	border-color: var(--wpsm-accent-dark);
}
.kcd_wp-social-manager_btn.is-secondary {
	background: #fff;
	color: var(--wpsm-text);
	border-color: var(--wpsm-border);
}
.kcd_wp-social-manager_btn.is-danger {
	background: #fff;
	color: var(--wpsm-danger);
	border-color: #fecaca;
}
.kcd_wp-social-manager_btn:disabled {
	opacity: 0.5;
	cursor: default;
}
.kcd_wp-social-manager_btn.is-small {
	padding: 3px 9px;
	font-size: 12px;
}

/* Admin "view as member" switcher */
.kcd_wp-social-manager_switcher {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	margin-bottom: 12px;
	background: #18181b;
	color: #fafafa;
	font-size: 12px;
}
.kcd_wp-social-manager_switcher strong {
	color: #fde047;
}
.kcd_wp-social-manager_switcher button {
	margin-left: auto;
	background: #27272a;
	color: #fff;
	border: 1px solid #3f3f46;
	padding: 4px 10px;
	font-size: 12px;
	cursor: pointer;
}
.kcd_wp-social-manager_switcher button:hover {
	background: #3f3f46;
}

/* ---------------------------------------------------------------------
   Dashboard shell (Cloudflare-dashboard style): a fixed-width left
   sidebar (identity + vertical tab nav + Log Out, pinned to the
   bottom) and a full-width dense main content area, so the DataGrid/
   reports/forms inside get the whole rest of the viewport instead of
   competing for space in a narrow centered column. Collapses to a
   horizontal top bar below the 782px breakpoint (matches wp-admin's
   own responsive breakpoint, see kcdev-admin.css). Only used once
   someone's actually signed in — renderDashboard() adds
   kcd_wp-social-manager_is-dashboard to the root wrapper, which is
   also what turns off the guest auth screens' narrow centered width
   above.
   ------------------------------------------------------------------ */

.kcd_wp-social-manager_shell {
	display: flex;
	align-items: stretch;
	min-height: 60vh;
	background: var(--wpsm-surface);
	border: 1px solid var(--wpsm-border);
}

.kcd_wp-social-manager_sidebar {
	flex: 0 0 208px;
	display: flex;
	flex-direction: column;
	background: #fafafa;
	border-right: 1px solid var(--wpsm-border);
}

.kcd_wp-social-manager_sidebar-user {
	padding: 14px 16px;
	border-bottom: 1px solid var(--wpsm-border);
}
.kcd_wp-social-manager_sidebar-user strong {
	display: block;
	font-size: 14px;
	margin-bottom: 6px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.kcd_wp-social-manager_sidebar-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
.kcd_wp-social-manager_sidebar-badges .kcd_wp-social-manager_badge-pill {
	text-transform: capitalize;
}

.kcd_wp-social-manager_sidebar-foot {
	margin-top: auto;
	padding: 10px;
	border-top: 1px solid var(--wpsm-border);
}
.kcd_wp-social-manager_sidebar-foot .kcd_wp-social-manager_btn {
	display: block;
	width: 100%;
	text-align: center;
}

.kcd_wp-social-manager_main {
	flex: 1 1 auto;
	min-width: 0;
	padding: 16px 20px;
	overflow-x: auto;
}

@media (max-width: 782px) {
	.kcd_wp-social-manager_shell {
		flex-direction: column;
		min-height: 0;
	}
	.kcd_wp-social-manager_sidebar {
		flex: 0 0 auto;
		flex-direction: row;
		flex-wrap: wrap;
		border-right: none;
		border-bottom: 1px solid var(--wpsm-border);
	}
	.kcd_wp-social-manager_sidebar-user {
		flex: 1 1 auto;
		border-bottom: none;
		border-right: 1px solid var(--wpsm-border);
	}
	.kcd_wp-social-manager_sidebar-foot {
		margin-top: 0;
		border-top: none;
		border-left: 1px solid var(--wpsm-border);
	}
	.kcd_wp-social-manager_sidebar-foot .kcd_wp-social-manager_btn {
		width: auto;
	}
	.kcd_wp-social-manager_main {
		padding: 12px;
	}
}

/* Profile tab: the profile card on the left capped to half the
   viewport width, Change Password to its right in the remaining
   space — stacks full-width below the 782px breakpoint (matching the
   dashboard shell's own breakpoint) rather than squeezing two columns
   into a phone-width screen. */
.kcd_wp-social-manager_profile-layout {
	display: flex;
	gap: 24px;
	align-items: flex-start;
}
.kcd_wp-social-manager_profile-main {
	flex: 0 0 50vw;
	max-width: 50vw;
	min-width: 0;
}
.kcd_wp-social-manager_profile-side {
	flex: 1 1 auto;
	min-width: 0;
}
/* The view/form itself reads as an actual card here (unlike inside a
   family-card, which is already the card and would double-border) —
   Profile is the only .kcd_wp-social-manager_view usage that isn't
   already inside some other bordered container. */
.kcd_wp-social-manager_profile-main > .kcd_wp-social-manager_view,
.kcd_wp-social-manager_profile-main > form {
	border: 1px solid var(--wpsm-border);
	background: var(--wpsm-surface);
	padding: 14px 16px;
}
@media (max-width: 782px) {
	.kcd_wp-social-manager_profile-layout {
		flex-direction: column;
	}
	.kcd_wp-social-manager_profile-main {
		flex-basis: auto;
		max-width: 100%;
		width: 100%;
	}
}

/* ---------------------------------------------------------------------
   Compact read-only "view" — Profile tab's default display (with an
   Edit button that swaps in the existing editable form) and each
   family member's card content below. A grid of small label/value
   pairs that wraps to however many columns fit, rather than one
   field per line, so a view with several fields stays dense instead
   of turning into a tall list.
   ------------------------------------------------------------------ */
.kcd_wp-social-manager_view-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}
.kcd_wp-social-manager_view-head h3,
.kcd_wp-social-manager_view-head h4 {
	margin: 0;
	font-size: 14px;
}
.kcd_wp-social-manager_view-head .kcd_wp-social-manager_btn {
	margin-left: auto;
}
.kcd_wp-social-manager_view-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 10px 16px;
}
.kcd_wp-social-manager_view-item label {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--wpsm-muted);
	margin-bottom: 2px;
}
.kcd_wp-social-manager_view-item span {
	display: block;
	font-size: 13px;
	color: var(--wpsm-text);
	overflow-wrap: break-word;
}
/* Address can run long — give it two grid tracks' worth of width
   instead of wrapping awkwardly in one narrow column like every
   other (short) field here. */
.kcd_wp-social-manager_view-item.is-wide {
	grid-column: span 2;
}

/* Family: the signed-in member's own summary sits in a full-width row
   above the family-member cards (see renderFamilyTab in wpsm.js) —
   same view-grid content, just not boxed as its own narrower card. */
.kcd_wp-social-manager_family-self {
	border: 1px solid var(--wpsm-border);
	background: #fafafa;
	padding: 12px 14px;
	margin-bottom: 14px;
}

/* Family member cards — auto-fill keeps every card in a row the same
   width; minmax is wide enough for the view-grid below to lay out 2
   columns of fields per card instead of 1, so a card's fuller content
   (relationship, DOB, gender, custom fields, groups) actually fills
   it rather than leaving it mostly empty under just a name and a
   one-line summary. Cards don't get an explicit height — flex column
   plus each card's own content is what keeps a row's cards the same
   height as each other (the tallest one), while different rows are
   free to size to their own content. */
.kcd_wp-social-manager_family-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 10px;
	margin-bottom: 12px;
	align-items: stretch;
}
.kcd_wp-social-manager_family-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--wpsm-border);
	padding: 12px 14px;
	position: relative;
}
.kcd_wp-social-manager_family-card h4 {
	margin: 0 0 8px;
	padding-right: 52px;
	font-size: 14px;
}
.kcd_wp-social-manager_family-card .kcd_wp-social-manager_view-grid {
	flex: 1 1 auto;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}
.kcd_wp-social-manager_family-card .kcd_wp-social-manager_family-actions {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	gap: 4px;
}
.kcd_wp-social-manager_family-actions button {
	/* Explicit background + color (not "background:none" relying on
	   inherited text color) — buttons don't reliably inherit color from
	   their ancestors across browsers, which was leaving the ✎/× glyphs
	   effectively invisible against the card. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #f4f4f5;
	color: var(--wpsm-text);
	border: 1px solid var(--wpsm-border);
	width: 22px;
	height: 22px;
	line-height: 1;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}
.kcd_wp-social-manager_family-actions button.kcd_wp-social-manager_btn-edit:hover {
	background: #e4e4e7;
}
/* Selector matches ".kcd_wp-social-manager_family-actions button" in
   specificity (0,1,1 vs 0,1,1) but wins on source order — bumped to two
   classes so it isn't fragile to that rule being reordered later. */
.kcd_wp-social-manager_family-actions button.kcd_wp-social-manager_btn-delete {
	color: var(--wpsm-danger);
}
.kcd_wp-social-manager_family-actions button.kcd_wp-social-manager_btn-delete:hover {
	background: #fef2f2;
	border-color: #fecaca;
}

.kcd_wp-social-manager_muted {
	color: var(--wpsm-muted);
	font-size: 12px;
}

/* Activity group assignment checkboxes (registration/profile/family forms) */
.kcd_wp-social-manager_group-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
}
/* Specificity note: ".kcd_wp-social-manager_field label" (0,1,1) would
   otherwise beat a bare ".kcd_wp-social-manager_group-check" (0,1,0)
   and force this back to display:block — these checkboxes live inside
   a .kcd_wp-social-manager_field wrapper, so that ambient field-label
   rule really does match them too. Qualified with the parent class to
   safely outrank it. */
.kcd_wp-social-manager_group-checks .kcd_wp-social-manager_group-check {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: normal;
	font-size: 13px;
}
.kcd_wp-social-manager_group-check img {
	width: 20px;
	height: 20px;
	object-fit: cover;
	border: 1px solid var(--wpsm-border);
}

/* ---------------------------------------------------------------------
   Console/DataGrid components: toolbar, stat tiles, table, badges,
   pagination, tabs, drawer. Rendered by assets/wpsm.js in both the
   frontend portal (Members/Reports/Fields/Groups tabs, for an admin or
   moderator) and the wp-admin Members Console — this plugin's own
   class set, not the shared kcdev-framework one (see file header).
   ------------------------------------------------------------------ */

/* flex-wrap: nowrap (not wrap) — the search box, three filter selects,
   bulk-action select, Apply button, and export links add up to more
   width than the toolbar reliably has, especially inside the
   Members Console's narrower contexts; wrapping wasn't lining them up
   in a single row so much as breaking them across two or three,
   misaligned with whatever's next to them. Overflow-x scrolls the row
   instead when it's genuinely too narrow, rather than reflowing it,
   and flex-shrink: 0 on every child (below) keeps each control at its
   own natural width instead of getting squeezed to fit. */
.kcd_wp-social-manager_toolbar {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 6px;
	padding: 8px 0;
	overflow-x: auto;
}
.kcd_wp-social-manager_toolbar > * {
	flex-shrink: 0;
}
.kcd_wp-social-manager_toolbar input[type="search"],
.kcd_wp-social-manager_toolbar select {
	box-sizing: border-box;
	height: 30px;
	border: 1px solid var(--wpsm-border);
	font-size: 12px;
	padding: 4px 8px;
	line-height: 1.4;
}
.kcd_wp-social-manager_toolbar select {
	min-width: 150px;
}
.kcd_wp-social-manager_spacer {
	margin-left: auto;
}

/* Members Console's Table / Family Cards switch — same segmented-
   button look as the guest auth tabs, just smaller since it's a
   secondary toolbar control here. */
.kcd_wp-social-manager_view-toggle {
	display: flex;
	width: fit-content;
	border: 1px solid var(--wpsm-border);
	margin-bottom: 10px;
}
.kcd_wp-social-manager_view-toggle button {
	background: var(--wpsm-surface);
	border: none;
	border-right: 1px solid var(--wpsm-border);
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 600;
	color: var(--wpsm-muted);
	cursor: pointer;
}
.kcd_wp-social-manager_view-toggle button:last-child {
	border-right: none;
}
.kcd_wp-social-manager_view-toggle button.is-active {
	background: var(--wpsm-accent);
	color: #fff;
}

/* Family Cards view: one "master card" per member, fixed at exactly
   three per row (repeat(3, ...), not auto-fill/minmax, so the card
   width is always set to fit three regardless of container width —
   narrower/wider main content just resizes the three, it never
   changes the column count on desktop). Each card is deliberately
   dense: a single-column dt/dd list for the member's own details
   (there's no room at a third of the content width for the wider
   multi-column .kcd_wp-social-manager_view-grid Profile/Family-tab
   cards use) and a plain compact list for family, not nested cards. */
.kcd_wp-social-manager_member-master-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	align-items: start;
}
.kcd_wp-social-manager_member-master-card {
	border: 1px solid var(--wpsm-border);
	background: var(--wpsm-surface);
	padding: 12px 14px;
}
.kcd_wp-social-manager_member-master-card .kcd_wp-social-manager_view-head {
	margin-bottom: 8px;
}
/* Left column: the dense Email/Phone/Age/Gender dt/dd list. Right
   column: Address — it was previously just another row at the bottom
   of that same single column, which left the whole right half of the
   card empty since the list's short label/value pairs never come
   close to the card's full width. */
.kcd_wp-social-manager_member-master-details {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 14px;
	margin-bottom: 12px;
}
.kcd_wp-social-manager_member-master-dl {
	display: grid;
	grid-template-columns: 54px 1fr;
	gap: 3px 8px;
	margin: 0;
	font-size: 12px;
}
.kcd_wp-social-manager_member-master-dl dt {
	color: var(--wpsm-muted);
	font-weight: 600;
}
.kcd_wp-social-manager_member-master-dl dd {
	margin: 0;
	color: var(--wpsm-text);
	overflow-wrap: break-word;
}
.kcd_wp-social-manager_member-master-address label {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--wpsm-muted);
	margin-bottom: 2px;
}
.kcd_wp-social-manager_member-master-address span {
	display: block;
	font-size: 12px;
	color: var(--wpsm-text);
	overflow-wrap: break-word;
}
@media (max-width: 480px) {
	.kcd_wp-social-manager_member-master-details {
		grid-template-columns: 1fr;
	}
}
.kcd_wp-social-manager_member-master-famhead {
	margin: 0 0 6px;
	padding-top: 8px;
	border-top: 1px solid var(--wpsm-border);
	font-size: 12px;
}
.kcd_wp-social-manager_member-master-famlist {
	margin: 0;
	padding-left: 16px;
	font-size: 12px;
	color: var(--wpsm-muted);
}
.kcd_wp-social-manager_member-master-famlist li {
	margin-bottom: 4px;
}
.kcd_wp-social-manager_member-master-famlist strong {
	color: var(--wpsm-text);
}
@media (max-width: 1100px) {
	.kcd_wp-social-manager_member-master-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 700px) {
	.kcd_wp-social-manager_member-master-grid {
		grid-template-columns: 1fr;
	}
}

.kcd_wp-social-manager_stat-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 8px;
	margin-bottom: 10px;
}
.kcd_wp-social-manager_stat-tile {
	padding: 10px 12px;
	background: #f8fafc;
	border: 1px solid var(--wpsm-border);
}
.kcd_wp-social-manager_stat-label {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--wpsm-muted);
	margin-bottom: 3px;
}
.kcd_wp-social-manager_stat-value {
	font-size: 20px;
	font-weight: 700;
	color: var(--wpsm-text);
	font-variant-numeric: tabular-nums;
}

.kcd_wp-social-manager_table-wrap {
	overflow-x: auto;
	border: 1px solid var(--wpsm-border);
}
table.kcd_wp-social-manager_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
}
table.kcd_wp-social-manager_table th,
table.kcd_wp-social-manager_table td {
	padding: 6px 8px;
	text-align: left;
	border-bottom: 1px solid var(--wpsm-border);
	white-space: nowrap;
}
table.kcd_wp-social-manager_table thead th {
	background: #f8fafc;
	font-weight: 600;
	color: var(--wpsm-text);
	position: sticky;
	top: 0;
	cursor: pointer;
	user-select: none;
}
table.kcd_wp-social-manager_table thead th.is-sorted::after {
	content: " \2193";
}
table.kcd_wp-social-manager_table thead th.is-sorted[data-order="asc"]::after {
	content: " \2191";
}
table.kcd_wp-social-manager_table tbody tr:hover {
	background: #f8fafc;
}
table.kcd_wp-social-manager_table td.kcd_wp-social-manager_col-wrap {
	white-space: normal;
}

.kcd_wp-social-manager_badge-pill {
	display: inline-block;
	padding: 1px 8px;
	font-size: 11px;
	font-weight: 600;
	border: 1px solid transparent;
	line-height: 1.6;
}
.kcd_wp-social-manager_badge-active { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.kcd_wp-social-manager_badge-pending_verification, .kcd_wp-social-manager_badge-pending { background: #fef9c3; color: #854d0e; border-color: #fef08a; }
.kcd_wp-social-manager_badge-suspended { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.kcd_wp-social-manager_badge-admin { background: #e0e7ff; color: #3730a3; border-color: #c7d2fe; }
.kcd_wp-social-manager_badge-moderator { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.kcd_wp-social-manager_badge-member { background: #f1f5f9; color: #334155; border-color: #e2e8f0; }
.kcd_wp-social-manager_badge-regular { background: #f1f5f9; color: #334155; border-color: #e2e8f0; }
.kcd_wp-social-manager_badge-event { background: #ffedd5; color: #9a3412; border-color: #fed7aa; }

.kcd_wp-social-manager_pagination {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 0 0;
	font-size: 12px;
	color: var(--wpsm-muted);
}
.kcd_wp-social-manager_pagination button {
	border: 1px solid var(--wpsm-border);
	background: #fff;
	padding: 2px 8px;
	cursor: pointer;
}
.kcd_wp-social-manager_pagination button:disabled {
	opacity: 0.4;
	cursor: default;
}

/* The dashboard's vertical sidebar nav (see .kcd_wp-social-manager_shell
   above) — this is the only place kcd_wp-social-manager_tabs is used,
   so it's styled vertical by default rather than needing a variant
   class; the guest Login/Register toggle is the separate, always-
   horizontal kcd_wp-social-manager_auth-tabs above. */
.kcd_wp-social-manager_tabs {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 6px;
	flex: 1 1 auto;
	overflow-y: auto;
}
.kcd_wp-social-manager_tabs button {
	background: none;
	border: none;
	border-left: 3px solid transparent;
	text-align: left;
	padding: 8px 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--wpsm-muted);
	cursor: pointer;
}
.kcd_wp-social-manager_tabs button:hover {
	background: #f1f5f9;
	color: var(--wpsm-text);
}
.kcd_wp-social-manager_tabs button.is-active {
	background: #eff6ff;
	color: var(--wpsm-accent);
	border-left-color: var(--wpsm-accent);
}
.kcd_wp-social-manager_tab-panel[hidden] {
	display: none;
}

@media (max-width: 782px) {
	.kcd_wp-social-manager_tabs {
		flex-direction: row;
		flex: 0 0 auto;
		overflow-x: auto;
		overflow-y: visible;
	}
	.kcd_wp-social-manager_tabs button {
		border-left: none;
		border-bottom: 3px solid transparent;
		white-space: nowrap;
	}
	.kcd_wp-social-manager_tabs button.is-active {
		border-left-color: transparent;
		border-bottom-color: var(--wpsm-accent);
	}
}

.kcd_wp-social-manager_drawer-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.4);
	z-index: 100000;
}
.kcd_wp-social-manager_drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(420px, 92vw);
	background: var(--wpsm-surface);
	box-shadow: -2px 0 8px rgba(15, 23, 42, 0.15);
	z-index: 100001;
	display: flex;
	flex-direction: column;
}
.kcd_wp-social-manager_drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	background: #18181b;
	color: #fafafa;
}
.kcd_wp-social-manager_drawer-header h2 {
	margin: 0;
	font-size: 14px;
	color: #fafafa;
}
.kcd_wp-social-manager_drawer-close {
	background: none;
	border: none;
	color: #fafafa;
	font-size: 18px;
	cursor: pointer;
	line-height: 1;
}
.kcd_wp-social-manager_drawer-body {
	padding: 12px 16px;
	overflow-y: auto;
	flex: 1;
}
.kcd_wp-social-manager_drawer-body dl {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 6px 10px;
	margin: 0 0 12px;
	font-size: 12px;
}
.kcd_wp-social-manager_drawer-body dt {
	color: var(--wpsm-muted);
	font-weight: 600;
}
.kcd_wp-social-manager_drawer-body dd {
	margin: 0;
	color: var(--wpsm-text);
}

/* Admin-mode member detail drawer: the member's own family, always
   exactly 3 cards per row regardless of viewport (the drawer itself
   is a fixed, narrow slide-over — see .kcd_wp-social-manager_drawer
   above — so unlike the Family tab's own auto-fill grid, a fixed
   column count plus a narrower per-card layout is what actually fits
   three across it instead of wrapping to one). */
.kcd_wp-social-manager_drawer-family-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	margin-top: 6px;
}
.kcd_wp-social-manager_drawer-family-card {
	display: flex;
	flex-direction: column;
	gap: 2px;
	border: 1px solid var(--wpsm-border);
	background: #fafafa;
	padding: 6px 8px;
	font-size: 11px;
	overflow-wrap: break-word;
}
.kcd_wp-social-manager_drawer-family-card strong {
	font-size: 12px;
	color: var(--wpsm-text);
}
.kcd_wp-social-manager_drawer-family-card span {
	color: var(--wpsm-muted);
}