/**
 * BuddyPress styles for FansPaysite theme.
 *
 * Applies the theme's CSS variables (--text-color, --background-color,
 * --link-color) to core BuddyPress elements so they follow the active
 * light/dark mode automatically.
 *
 * Theme mode is driven by [data-theme="light"|"dark"] on <html>, set by
 * mode.php / theme.js — no extra JS required here.
 *
 * Sections:
 *  1. Base
 *  2. Navigation tabs
 *  3. Activity feed
 *  4. Profile / member header
 *  5. Extended profile fields
 *  6. Member directory
 *  7. Groups directory
 *  8. Buttons & actions
 *  9. Forms
 * 10. Notifications
 * 11. Pagination
 * 12. Private messages
 * 13. Light-mode border & shadow overrides
 * 14. Dark-mode overrides
 *
 * @package FansPaysite
 * @since   2.3
 */


/* ============================================================
   1. BASE
   ============================================================ */

#buddypress,
#buddypress * {
	box-sizing: border-box;
}

#buddypress {
	color: var(--text-color);
}

#buddypress a {
	color: var(--link-color);
}

#buddypress a:hover {
	opacity: 0.85;
}


/* ============================================================
   2. NAVIGATION TABS
   ============================================================ */

#buddypress #object-nav ul,
#buddypress #subnav ul,
#buddypress .item-list-tabs ul {
	background: var(--background-color);
	border-bottom: 2px solid var(--link-color);
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
}

#buddypress #object-nav ul li a,
#buddypress #subnav ul li a,
#buddypress .item-list-tabs ul li a {
	color: var(--text-color);
	background: transparent;
	border-radius: 4px 4px 0 0;
	padding: 8px 14px;
	display: block;
	transition: background 0.2s, color 0.2s;
	text-decoration: none;
	font-size: 0.9em;
}

#buddypress #object-nav ul li a:hover,
#buddypress #subnav ul li a:hover,
#buddypress .item-list-tabs ul li a:hover {
	color: var(--link-color);
	background: rgba(119, 20, 93, 0.08);
}

#buddypress #object-nav ul li.current a,
#buddypress #subnav ul li.current a,
#buddypress .item-list-tabs ul li.current a,
#buddypress #object-nav ul li.selected a {
	color: var(--link-color);
	background: rgba(119, 20, 93, 0.12);
	font-weight: 600;
}

#buddypress #object-nav ul li a span,
#buddypress #subnav ul li a span,
#buddypress .item-list-tabs ul li a span {
	font-size: 0.8em;
	opacity: 0.7;
}


/* ============================================================
   3. ACTIVITY FEED
   ============================================================ */

#buddypress .activity-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

#buddypress .activity-list .activity-item {
	background: var(--background-color);
	border: 1px solid transparent;
	border-radius: 6px;
	margin-bottom: 12px;
	padding: 16px;
	transition: border-color 0.2s;
}

#buddypress .activity-list .activity-avatar {
	float: left;
	margin-right: 12px;
}

#buddypress .activity-list .activity-avatar img {
	border-radius: 50%;
	display: block;
}

#buddypress .activity-list .activity-header,
#buddypress .activity-list .activity-header a {
	color: var(--text-color);
}

#buddypress .activity-list .activity-header a:hover {
	color: var(--link-color);
}

#buddypress .activity-list .activity-header .time-since {
	color: var(--text-color);
	opacity: 0.55;
	font-size: 0.82em;
}

#buddypress .activity-list .activity-content {
	color: var(--text-color);
	overflow: hidden;
}

#buddypress .activity-list .activity-content p a,
#buddypress .activity-list .activity-inner a {
	color: var(--link-color);
}

#buddypress .activity-list .activity-meta {
	margin-top: 10px;
}

/* Activity comments */
#buddypress .activity-list .activity-comments {
	border-top: 1px solid transparent;
	margin-top: 12px;
	padding-top: 12px;
	list-style: none;
}

#buddypress .activity-list .activity-comments li {
	display: flex;
	gap: 10px;
	margin-bottom: 10px;
}

#buddypress .activity-list .activity-comments .acomment-avatar img {
	border-radius: 50%;
}

#buddypress .activity-list .activity-comments .acomment-content,
#buddypress .activity-list .activity-comments .acomment-meta {
	color: var(--text-color);
}

#buddypress .activity-list .activity-comments .acomment-meta {
	font-size: 0.82em;
	opacity: 0.55;
}

/* Activity update/post form */
#buddypress #whats-new-form textarea,
#buddypress #whats-new-post-form textarea {
	background: var(--background-color);
	color: var(--text-color);
	border: 1px solid transparent;
	border-radius: 6px;
	padding: 10px;
	width: 100%;
	resize: vertical;
}


/* ============================================================
   4. PROFILE / MEMBER HEADER
   ============================================================ */

#buddypress #item-header {
	background: var(--background-color);
	border-radius: 6px;
	padding: 20px;
	margin-bottom: 16px;
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

#buddypress #item-header-avatar img {
	border-radius: 50%;
}

#buddypress #item-header-content h1,
#buddypress #item-header-content h2,
#buddypress #item-header-content h3,
#buddypress #item-header h1,
#buddypress #item-header h2 {
	color: var(--text-color);
	margin: 0 0 4px;
}

#buddypress #item-header .highlight,
#buddypress #item-header .user-nicename,
#buddypress #item-header .activity {
	color: var(--text-color);
	opacity: 0.65;
	font-size: 0.85em;
}

#buddypress #item-header-content .generic-button {
	margin-top: 10px;
}


/* ============================================================
   5. EXTENDED PROFILE FIELDS
   ============================================================ */

#buddypress .bp-profile .profile-fields,
#buddypress #profile-edit-form .profile-fields {
	background: var(--background-color);
	border-radius: 6px;
}

/* profile-fields class sits on the <table> itself in BP Nouveau */
#buddypress table.profile-fields,
#buddypress table.bp-tables-user {
	width: 100%;
	border-collapse: collapse;
	background: var(--background-color);
	color: var(--text-color);
}

#buddypress table.profile-fields tr,
#buddypress table.bp-tables-user tr {
	border-bottom: 1px solid transparent;
}

#buddypress table.profile-fields th,
#buddypress table.bp-tables-user th,
#buddypress .profile-fields dl dt {
	color: var(--text-color);
	opacity: 0.7;
	font-weight: 600;
	padding: 10px 12px 10px 0;
	vertical-align: top;
	width: 30%;
}

#buddypress table.profile-fields td,
#buddypress table.bp-tables-user td,
#buddypress .profile-fields dl dd {
	color: var(--text-color);
	padding: 10px 0;
}

#buddypress #profile-edit-form .field-visibility-settings {
	color: var(--text-color);
	font-size: 0.85em;
	opacity: 0.7;
}


/* ============================================================
   6. MEMBER DIRECTORY
   ============================================================ */

#buddypress .members-list,
#buddypress #members-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
}

#buddypress .members-list li,
#buddypress #members-list li {
	background: var(--background-color);
	border: 1px solid transparent;
	border-radius: 6px;
	padding: 14px;
	transition: border-color 0.2s, box-shadow 0.2s;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

#buddypress .members-list .item-avatar img {
	border-radius: 50%;
	margin-bottom: 8px;
}

#buddypress .members-list .item-title,
#buddypress .members-list .item-title a {
	color: var(--text-color);
	font-weight: 600;
}

#buddypress .members-list .item-title a:hover {
	color: var(--link-color);
}

#buddypress .members-list .item-meta {
	color: var(--text-color);
	opacity: 0.6;
	font-size: 0.82em;
	margin-top: 4px;
}

#buddypress .members-list .action {
	margin-top: 10px;
}


/* ============================================================
   7. GROUPS DIRECTORY
   ============================================================ */

#buddypress .groups-list,
#buddypress #groups-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
}

#buddypress .groups-list li,
#buddypress #groups-list li {
	background: var(--background-color);
	border: 1px solid transparent;
	border-radius: 6px;
	padding: 14px;
	transition: border-color 0.2s, box-shadow 0.2s;
}

#buddypress .groups-list .item-avatar img,
#buddypress .groups-list .group-avatar img {
	border-radius: 4px;
	margin-bottom: 8px;
}

#buddypress .groups-list .item-title a,
#buddypress .groups-list .group-title a {
	color: var(--text-color);
	font-weight: 600;
	text-decoration: none;
}

#buddypress .groups-list .item-title a:hover,
#buddypress .groups-list .group-title a:hover {
	color: var(--link-color);
}

#buddypress .groups-list .item-meta,
#buddypress .groups-list .group-status {
	color: var(--text-color);
	opacity: 0.6;
	font-size: 0.82em;
	margin-top: 4px;
}

#buddypress .groups-list .action {
	margin-top: 10px;
}


/* ============================================================
   8. BUTTONS & ACTIONS
   ============================================================ */

#buddypress .generic-button a,
#buddypress .generic-button button,
#buddypress input[type="submit"],
#buddypress button[type="submit"],
#buddypress a.button,
#buddypress button.button {
	background: var(--link-color);
	color: #fff !important;
	border: none;
	border-radius: 4px;
	padding: 7px 16px;
	cursor: pointer;
	transition: opacity 0.2s;
	font-size: var(--font-size-sm, 14px);
	text-decoration: none;
	display: inline-block;
	line-height: 1.4;
}

#buddypress .generic-button a:hover,
#buddypress .generic-button button:hover,
#buddypress input[type="submit"]:hover,
#buddypress button[type="submit"]:hover,
#buddypress a.button:hover,
#buddypress button.button:hover {
	opacity: 0.85;
	color: #fff !important;
}

/* Secondary / outline style */
#buddypress .generic-button.remove a,
#buddypress a.button.remove,
#buddypress a.button-secondary,
#buddypress button.button-secondary {
	background: transparent;
	color: var(--link-color) !important;
	border: 1px solid var(--link-color);
}

#buddypress .generic-button.remove a:hover,
#buddypress a.button-secondary:hover {
	background: rgba(119, 20, 93, 0.08);
	opacity: 1;
}

/* Pending / disabled state */
#buddypress .generic-button a[disabled],
#buddypress input[type="submit"][disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}


/* ============================================================
   9. FORMS
   ============================================================ */

#buddypress input[type="text"],
#buddypress input[type="email"],
#buddypress input[type="password"],
#buddypress input[type="search"],
#buddypress input[type="url"],
#buddypress input[type="tel"],
#buddypress textarea,
#buddypress select,
#buddypress .standard-form input[type="text"],
#buddypress .standard-form input[type="email"],
#buddypress .standard-form input[type="password"],
#buddypress .standard-form textarea,
#buddypress .standard-form select {
	background: var(--background-color);
	color: var(--text-color);
	border: 1px solid transparent;
	border-radius: 4px;
	padding: 8px 10px;
	width: 100%;
	font-family: var(--font-family-base);
	font-size: var(--font-size-base, 16px);
	transition: border-color 0.2s, box-shadow 0.2s;
}

#buddypress label,
#buddypress .standard-form label {
	color: var(--text-color);
	font-weight: 600;
	margin-bottom: 4px;
	display: block;
}

#buddypress .standard-form .description {
	color: var(--text-color);
	opacity: 0.65;
	font-size: 0.85em;
	margin-top: 4px;
}

#buddypress .field-visibility-settings-toggle,
#buddypress .field-visibility-settings-toggle a {
	color: var(--text-color);
	opacity: 0.7;
	font-size: 0.85em;
}


/* ============================================================
   10. NOTIFICATIONS
   ============================================================ */

#buddypress .notification-page .notification-description,
#buddypress .bp-notifications-feedback,
#buddypress .bp-feedback {
	color: var(--text-color);
}

#buddypress .bp-feedback.error {
	background: rgba(200, 40, 40, 0.1);
	border-left: 4px solid #c82828;
	border-radius: 4px;
	padding: 10px 14px;
}

#buddypress .bp-feedback.success,
#buddypress .bp-feedback.info {
	background: rgba(119, 20, 93, 0.08);
	border-left: 4px solid var(--link-color);
	border-radius: 4px;
	padding: 10px 14px;
}


/* ============================================================
   11. PAGINATION
   ============================================================ */

#buddypress .pagination {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 16px 0;
}

#buddypress .pagination .pag-count,
#buddypress .pagination .no-results {
	color: var(--text-color);
	opacity: 0.65;
	font-size: 0.85em;
}

#buddypress .pagination-links {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}

#buddypress .pagination-links a,
#buddypress .pagination-links span {
	color: var(--text-color);
	border: 1px solid transparent;
	border-radius: 4px;
	padding: 4px 10px;
	text-decoration: none;
	font-size: 0.9em;
	display: inline-block;
	transition: border-color 0.2s, color 0.2s;
}

#buddypress .pagination-links a:hover {
	color: var(--link-color);
}

#buddypress .pagination-links .current {
	background: var(--link-color);
	color: #fff;
	border-color: var(--link-color);
}


/* ============================================================
   12. PRIVATE MESSAGES
   ============================================================ */

#buddypress #message-threads,
#buddypress .message-threads {
	list-style: none;
	margin: 0;
	padding: 0;
}

#buddypress #message-threads li,
#buddypress .message-threads li {
	background: var(--background-color);
	border: 1px solid transparent;
	border-radius: 6px;
	padding: 12px 16px;
	margin-bottom: 8px;
	transition: border-color 0.2s;
}

#buddypress #message-threads li.unread {
	font-weight: 600;
}

#buddypress .message-subject a,
#buddypress .thread-subject a {
	color: var(--text-color);
	text-decoration: none;
}

#buddypress .message-subject a:hover,
#buddypress .thread-subject a:hover {
	color: var(--link-color);
}

#buddypress .message-metadata,
#buddypress .thread-info {
	color: var(--text-color);
	opacity: 0.6;
	font-size: 0.82em;
	margin-top: 4px;
}

/* Message thread view */
#buddypress #message-content,
#buddypress .message-box {
	background: var(--background-color);
	border: 1px solid transparent;
	border-radius: 6px;
	padding: 16px;
	margin-bottom: 12px;
}

#buddypress .message-box .message-header {
	color: var(--text-color);
	opacity: 0.7;
	font-size: 0.85em;
	margin-bottom: 8px;
}

#buddypress .message-box .message-content {
	color: var(--text-color);
}


/* ============================================================
   13. LIGHT MODE — border and shadow overrides
   (html prefix increases specificity above BP's own stylesheet)
   ============================================================ */

html[data-theme="light"] #buddypress ul.activity-list li.activity-item,
html[data-theme="light"] #buddypress .members-list li,
html[data-theme="light"] #buddypress #members-list li,
html[data-theme="light"] #buddypress .groups-list li,
html[data-theme="light"] #buddypress #groups-list li,
html[data-theme="light"] #buddypress #message-threads li,
html[data-theme="light"] #buddypress #message-content,
html[data-theme="light"] #buddypress .message-box {
	border-color: #e0e0e0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] #buddypress ul.activity-list li.activity-item:hover,
html[data-theme="light"] #buddypress .members-list li:hover,
html[data-theme="light"] #buddypress .groups-list li:hover,
html[data-theme="light"] #buddypress #message-threads li:hover {
	border-color: var(--link-color);
	box-shadow: 0 2px 8px rgba(119, 20, 93, 0.1);
}

html[data-theme="light"] #buddypress .activity-list .activity-comments {
	border-top-color: #e0e0e0;
}

html[data-theme="light"] #buddypress #item-header {
	border: 1px solid #e0e0e0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] #buddypress table.profile-fields tr,
html[data-theme="light"] #buddypress table.bp-tables-user tr {
	border-bottom-color: #f0f0f0;
}

html[data-theme="light"] #buddypress input[type="text"],
html[data-theme="light"] #buddypress input[type="email"],
html[data-theme="light"] #buddypress input[type="password"],
html[data-theme="light"] #buddypress input[type="search"],
html[data-theme="light"] #buddypress input[type="url"],
html[data-theme="light"] #buddypress input[type="tel"],
html[data-theme="light"] #buddypress textarea,
html[data-theme="light"] #buddypress select,
html[data-theme="light"] #buddypress #whats-new-form textarea {
	border-color: #cccccc;
}

html[data-theme="light"] #buddypress input:focus,
html[data-theme="light"] #buddypress textarea:focus,
html[data-theme="light"] #buddypress select:focus {
	border-color: var(--link-color);
	outline: none;
	box-shadow: 0 0 0 2px rgba(119, 20, 93, 0.15);
}

html[data-theme="light"] #buddypress .pagination-links a,
html[data-theme="light"] #buddypress .pagination-links span {
	border-color: #ddd;
}

html[data-theme="light"] #buddypress #object-nav ul,
html[data-theme="light"] #buddypress #subnav ul,
html[data-theme="light"] #buddypress .item-list-tabs ul {
	border-bottom-color: var(--link-color);
}


/* ============================================================
   14. DARK MODE — overrides for derived colors BP hardcodes
   (html prefix increases specificity above BP's own stylesheet)
   ============================================================ */

html[data-theme="dark"] #buddypress {
	background-color: var(--background-color);
}

/* Activity feed — stream container and UL */
html[data-theme="dark"] #buddypress #activity-stream,
html[data-theme="dark"] #buddypress div.activity,
html[data-theme="dark"] #buddypress ul.activity-list {
	background-color: var(--background-color) !important;
}

/* Activity feed items */
html[data-theme="dark"] #buddypress ul.activity-list li.activity-item,
html[data-theme="dark"] #buddypress .members-list li,
html[data-theme="dark"] #buddypress #members-list li,
html[data-theme="dark"] #buddypress .groups-list li,
html[data-theme="dark"] #buddypress #groups-list li,
html[data-theme="dark"] #buddypress #message-threads li,
html[data-theme="dark"] #buddypress #message-content,
html[data-theme="dark"] #buddypress .message-box {
	border-color: rgba(255, 255, 255, 0.1);
	background-color: rgba(255, 255, 255, 0.04) !important;
}

html[data-theme="dark"] #buddypress ul.activity-list li.activity-item:hover,
html[data-theme="dark"] #buddypress .members-list li:hover,
html[data-theme="dark"] #buddypress .groups-list li:hover,
html[data-theme="dark"] #buddypress #message-threads li:hover {
	border-color: var(--link-color);
	background-color: rgba(255, 255, 255, 0.07) !important;
}

/* Inner content divs — BP Nouveau often puts background on these too */
html[data-theme="dark"] #buddypress ul.activity-list li.activity-item .activity-content,
html[data-theme="dark"] #buddypress ul.activity-list li.activity-item .activity-header,
html[data-theme="dark"] #buddypress ul.activity-list li.activity-item .activity-inner,
html[data-theme="dark"] #buddypress ul.activity-list li.activity-item .activity-meta,
html[data-theme="dark"] #buddypress ul.activity-list li.activity-item .activity-meta.action {
	background-color: transparent !important;
	color: var(--text-color);
}

html[data-theme="dark"] #buddypress .activity-list .activity-comments {
	border-top-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] #buddypress #item-header {
	background-color: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Profile widget container (.bp-widget wraps the heading + table) */
html[data-theme="dark"] #buddypress .bp-widget {
	background-color: var(--background-color) !important;
	color: var(--text-color);
}

html[data-theme="dark"] #buddypress .bp-widget h3,
html[data-theme="dark"] #buddypress .bp-widget .profile-group-title {
	color: var(--text-color);
}

/* Profile fields table — bp-widget > table.profile-fields.bp-tables-user */
html[data-theme="dark"] #buddypress table.profile-fields,
html[data-theme="dark"] #buddypress table.bp-tables-user {
	background-color: var(--background-color) !important;
	color: var(--text-color);
}

/* Normal rows */
html[data-theme="dark"] #buddypress table.profile-fields tr,
html[data-theme="dark"] #buddypress table.bp-tables-user tr {
	background-color: transparent !important;
	border-bottom-color: rgba(255, 255, 255, 0.07);
}

/* BP Nouveau zebra-striped .alt rows */
html[data-theme="dark"] #buddypress table.profile-fields tr.alt,
html[data-theme="dark"] #buddypress table.bp-tables-user tr.alt {
	background-color: rgba(255, 255, 255, 0.04) !important;
}

/* Individual cells */
html[data-theme="dark"] #buddypress table.profile-fields th,
html[data-theme="dark"] #buddypress table.bp-tables-user th,
html[data-theme="dark"] #buddypress table.profile-fields td,
html[data-theme="dark"] #buddypress table.bp-tables-user td,
html[data-theme="dark"] #buddypress table.profile-fields td.label,
html[data-theme="dark"] #buddypress table.bp-tables-user td.label,
html[data-theme="dark"] #buddypress table.profile-fields td.data,
html[data-theme="dark"] #buddypress table.bp-tables-user td.data {
	color: var(--text-color) !important;
	background-color: transparent !important;
}

html[data-theme="dark"] #buddypress #object-nav ul,
html[data-theme="dark"] #buddypress #subnav ul,
html[data-theme="dark"] #buddypress .item-list-tabs ul {
	border-bottom-color: rgba(255, 255, 255, 0.15);
}

html[data-theme="dark"] #buddypress #object-nav ul li a:hover,
html[data-theme="dark"] #buddypress #subnav ul li a:hover,
html[data-theme="dark"] #buddypress .item-list-tabs ul li a:hover {
	background: rgba(211, 158, 216, 0.12);
	color: var(--link-color);
}

html[data-theme="dark"] #buddypress #object-nav ul li.current a,
html[data-theme="dark"] #buddypress #subnav ul li.current a,
html[data-theme="dark"] #buddypress .item-list-tabs ul li.current a,
html[data-theme="dark"] #buddypress #object-nav ul li.selected a {
	background: rgba(211, 158, 216, 0.18);
	color: var(--link-color);
}

html[data-theme="dark"] #buddypress input[type="text"],
html[data-theme="dark"] #buddypress input[type="email"],
html[data-theme="dark"] #buddypress input[type="password"],
html[data-theme="dark"] #buddypress input[type="search"],
html[data-theme="dark"] #buddypress input[type="url"],
html[data-theme="dark"] #buddypress input[type="tel"],
html[data-theme="dark"] #buddypress textarea,
html[data-theme="dark"] #buddypress select,
html[data-theme="dark"] #buddypress #whats-new-form textarea {
	border-color: rgba(255, 255, 255, 0.18);
	background-color: rgba(255, 255, 255, 0.06);
	color: var(--text-color);
}

html[data-theme="dark"] #buddypress input:focus,
html[data-theme="dark"] #buddypress textarea:focus,
html[data-theme="dark"] #buddypress select:focus {
	border-color: var(--link-color);
	outline: none;
	box-shadow: 0 0 0 2px rgba(211, 158, 216, 0.25);
}

html[data-theme="dark"] #buddypress .pagination-links a,
html[data-theme="dark"] #buddypress .pagination-links span {
	border-color: rgba(255, 255, 255, 0.15);
}

html[data-theme="dark"] #buddypress .generic-button.remove a,
html[data-theme="dark"] #buddypress a.button-secondary,
html[data-theme="dark"] #buddypress button.button-secondary {
	border-color: var(--link-color);
	color: var(--link-color) !important;
}

html[data-theme="dark"] #buddypress .bp-feedback.success,
html[data-theme="dark"] #buddypress .bp-feedback.info {
	background: rgba(211, 158, 216, 0.1);
}
