/**
 * PNFPB Theme — BuddyPress Stylesheet
 *
 * Styles for all BuddyPress components: activity feed, groups,
 * members directory, member profiles, messages, notifications.
 * Loaded only on BuddyPress pages.
 *
 * @package PNFPB_Theme
 */

/* =========================================================
   0. BuddyPress Core Reset
   — Neutralises the width/layout constraints that BP's own
     stylesheet imposes so our theme layout takes full control.
   ========================================================= */

/* Body-level reset — WordPress / BuddyPress legacy template packs inject
   a body { max-width:700px; margin:2em auto; border:1px solid … } rule
   that collapses the entire page. Strip it out here. */
body {
	max-width: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
}

/* Main BP wrapper — BP sets max-width / float constraints here */
#buddypress,
#buddypress div.bp-wrap,
#buddypress .bp-wrap,
div#buddypress {
	max-width: none !important;
	width: 100% !important;
	float: none !important;
}

/* Item body & primary content column */
#buddypress div#item-body,
#buddypress #primary,
#buddypress #main,
#buddypress #content {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Activity / members / groups list containers */
#buddypress div.activity-list,
#buddypress ul.item-list,
#buddypress ul#members-list,
#buddypress ul#groups-list,
#buddypress ul#friends-list {
	max-width: none !important;
	width: 100% !important;
}

/* Standard form — BP constrains these to ~640px */
#buddypress div#item-header,
#buddypress div#item-nav,
#buddypress form.standard-form,
#buddypress table,
#buddypress .item-list-tabs {
	max-width: none !important;
	width: 100% !important;
}

/* Subnav tabs BP generates as #object-nav inside item-nav */
#buddypress div#item-nav {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Remove BP's default list-item float layout inside grids */
#buddypress ul.item-list > li {
	float: none !important;
	width: auto !important;
}

/* Reset forced widths on avatars set by BP */
#buddypress div.item-avatar,
#buddypress div#item-header-avatar {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

/* =========================================================
   1. BP Subnav / Tab Nav
   ========================================================= */

.pnfpb-bp-subnav {
	background: var( --pnfpb-white );
	border-bottom: 1px solid var( --pnfpb-border );
	position: sticky;
	top: var( --pnfpb-header-height, 64px );
	z-index: 40;
}

.pnfpb-bp-subnav .pnfpb-container {
	display: flex;
	gap: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.pnfpb-bp-subnav .pnfpb-container::-webkit-scrollbar { display: none; }

/* BuddyPress generates <ul id="object-nav"> */
#object-nav ul,
.pnfpb-bp-subnav ul {
	display: flex;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

#object-nav li a,
.pnfpb-bp-subnav li a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 14px 20px;
	font-size: 0.875rem;
	font-weight: 500;
	color: var( --pnfpb-text-muted );
	text-decoration: none;
	border-bottom: 3px solid transparent;
	white-space: nowrap;
	transition: color var( --pnfpb-transition ), border-color var( --pnfpb-transition );
}

#object-nav li.current a,
#object-nav li.selected a,
.pnfpb-bp-subnav li.current a {
	color: var( --pnfpb-primary );
	border-bottom-color: var( --pnfpb-primary );
}

#object-nav li a:hover,
.pnfpb-bp-subnav li a:hover { color: var( --pnfpb-primary ); }

/* =========================================================
   2. Activity Feed
   ========================================================= */

.pnfpb-bp-activity-wrap { margin-top: var( --pnfpb-space-6 ); }

.pnfpb-activity-item {
	display: flex;
	gap: var( --pnfpb-space-4 );
	padding: var( --pnfpb-space-5 );
	background: var( --pnfpb-white );
	border: 1px solid var( --pnfpb-border );
	border-radius: var( --pnfpb-radius-lg );
	margin-bottom: var( --pnfpb-space-4 );
	transition: box-shadow var( --pnfpb-transition );
}

.pnfpb-activity-item:hover { box-shadow: var( --pnfpb-shadow-md ); }

.pnfpb-activity-avatar img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.pnfpb-activity-body { flex: 1; min-width: 0; }

.pnfpb-activity-header {
	font-size: 0.875rem;
	color: var( --pnfpb-text-muted );
	margin-bottom: var( --pnfpb-space-2 );
	line-height: 1.5;
}

.pnfpb-activity-header a { color: var( --pnfpb-primary ); }

.pnfpb-activity-content {
	font-size: 0.9375rem;
	color: var( --pnfpb-text );
	line-height: 1.6;
}

.pnfpb-activity-meta {
	display: flex;
	align-items: center;
	gap: var( --pnfpb-space-3 );
	margin-top: var( --pnfpb-space-3 );
	flex-wrap: wrap;
}

.pnfpb-activity-time-since {
	font-size: 0.8125rem;
	color: var( --pnfpb-text-muted );
	text-decoration: none;
	margin-left: auto;
}

/* Activity post form */
#whats-new-form {
	background: var( --pnfpb-white );
	border: 1px solid var( --pnfpb-border );
	border-radius: var( --pnfpb-radius-lg );
	padding: var( --pnfpb-space-5 );
	margin-bottom: var( --pnfpb-space-6 );
}

#whats-new {
	width: 100%;
	border: 1px solid var( --pnfpb-border );
	border-radius: var( --pnfpb-radius );
	padding: var( --pnfpb-space-3 );
	font-family: inherit;
	font-size: 0.9375rem;
	resize: vertical;
}

/* =========================================================
   3. Members Grid
   ========================================================= */

.pnfpb-members-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
	gap: var( --pnfpb-space-5 );
	margin-bottom: var( --pnfpb-space-8 );
}

.pnfpb-member-card {
	background: var( --pnfpb-white );
	border: 1px solid var( --pnfpb-border );
	border-radius: var( --pnfpb-radius-lg );
	padding: var( --pnfpb-space-5 );
	text-align: center;
	transition: transform var( --pnfpb-transition ), box-shadow var( --pnfpb-transition );
}

.pnfpb-member-card:hover {
	transform: translateY( -3px );
	box-shadow: var( --pnfpb-shadow-lg );
}

.pnfpb-member-card__avatar img {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto var( --pnfpb-space-3 );
	display: block;
	border: 3px solid var( --pnfpb-border );
}

.pnfpb-member-card__name {
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: var( --pnfpb-space-1 );
}

.pnfpb-member-card__name a { color: var( --pnfpb-text ); text-decoration: none; }
.pnfpb-member-card__name a:hover { color: var( --pnfpb-primary ); }

.pnfpb-member-card__last-active {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	font-size: 0.8125rem;
	color: var( --pnfpb-text-muted );
	margin-bottom: var( --pnfpb-space-3 );
}

.pnfpb-member-card__actions { margin-top: var( --pnfpb-space-3 ); }

/* =========================================================
   4. Member Profile Header
   ========================================================= */

.pnfpb-bp-member-header {
	background: var( --pnfpb-bg-alt );
	border-bottom: 1px solid var( --pnfpb-border );
	margin-bottom: 0;
}

.pnfpb-bp-member-header__cover {
	position: relative;
	height: 220px;
	background: linear-gradient( 135deg, var( --pnfpb-primary ), var( --pnfpb-accent ) );
	background-size: cover;
	background-position: center;
}

.pnfpb-bp-member-header__avatar {
	position: absolute;
	bottom: -40px;
	left: var( --pnfpb-space-6 );
}

.pnfpb-bp-member-header__avatar img {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	border: 4px solid var( --pnfpb-white );
	box-shadow: var( --pnfpb-shadow-md );
}

.pnfpb-bp-member-header__inner {
	padding-top: 56px;
	padding-bottom: var( --pnfpb-space-5 );
}

.pnfpb-bp-member-header__info h1 {
	font-size: 1.75rem;
	margin-bottom: var( --pnfpb-space-1 );
	display: flex;
	align-items: center;
	gap: var( --pnfpb-space-2 );
}

.pnfpb-bp-member-header__last-active {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 0.875rem;
	color: var( --pnfpb-text-muted );
	margin-bottom: var( --pnfpb-space-3 );
}

.pnfpb-bp-member-header__actions {
	display: flex;
	gap: var( --pnfpb-space-3 );
	flex-wrap: wrap;
	margin-top: var( --pnfpb-space-3 );
}

/* =========================================================
   5. Messages Table
   ========================================================= */

.pnfpb-bp-messages-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var( --pnfpb-space-5 );
}

.pnfpb-messages-table {
	width: 100%;
	border-collapse: collapse;
	background: var( --pnfpb-white );
	border: 1px solid var( --pnfpb-border );
	border-radius: var( --pnfpb-radius-lg );
	overflow: hidden;
}

.pnfpb-messages-table th,
.pnfpb-messages-table td {
	padding: var( --pnfpb-space-3 ) var( --pnfpb-space-4 );
	text-align: left;
	border-bottom: 1px solid var( --pnfpb-border );
	font-size: 0.9375rem;
}

.pnfpb-messages-table th {
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var( --pnfpb-text-muted );
	background: var( --pnfpb-bg-alt );
}

.pnfpb-messages-row--unread td { background: rgba( 0, 115, 170, .04 ); }
.pnfpb-messages-from { display: flex; align-items: center; gap: var( --pnfpb-space-2 ); }
.pnfpb-messages-from img { width: 36px; height: 36px; border-radius: 50%; }

.pnfpb-messages-date { white-space: nowrap; color: var( --pnfpb-text-muted ); font-size: 0.875rem; }

/* =========================================================
   6. BP Groups Grid (directory override)
   ========================================================= */

.pnfpb-bp-groups-wrap { margin-top: var( --pnfpb-space-6 ); }
.pnfpb-bp-activity-wrap .pnfpb-groups-grid,
.pnfpb-bp-groups-wrap   .pnfpb-groups-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 280px, 1fr ) );
	gap: var( --pnfpb-space-5 );
}

/* =========================================================
   7. BP Group Header (single group)
   ========================================================= */

.pnfpb-bp-group-header { background: var( --pnfpb-bg-alt ); border-bottom: 1px solid var( --pnfpb-border ); }

.pnfpb-bp-group-cover {
	position: relative;
	height: 200px;
	background: linear-gradient( 135deg, var( --pnfpb-primary ), var( --pnfpb-accent ) );
	background-size: cover;
	background-position: center;
}

.pnfpb-bp-group-avatar {
	position: absolute;
	bottom: -35px;
	left: var( --pnfpb-space-6 );
}

.pnfpb-bp-group-avatar img {
	width: 80px;
	height: 80px;
	border-radius: var( --pnfpb-radius );
	border: 4px solid var( --pnfpb-white );
	box-shadow: var( --pnfpb-shadow-md );
}

.pnfpb-bp-group-meta { padding-top: 50px; padding-bottom: var( --pnfpb-space-4 ); }
.pnfpb-bp-group-meta h1 { font-size: 1.5rem; margin-bottom: var( --pnfpb-space-2 ); }

.pnfpb-bp-group-meta__row {
	display: flex;
	align-items: center;
	gap: var( --pnfpb-space-4 );
	font-size: 0.875rem;
	color: var( --pnfpb-text-muted );
	flex-wrap: wrap;
	margin-bottom: var( --pnfpb-space-3 );
}

.pnfpb-bp-group-desc { font-size: 0.9375rem; color: var( --pnfpb-text-muted ); max-width: 100%; }

.pnfpb-bp-group-actions { padding-bottom: var( --pnfpb-space-4 ); }

/* =========================================================
   8. BP Pagination
   ========================================================= */

#members-dir-list + .pnfpb-bp-pagination,
#groups-dir-list  + .pnfpb-bp-pagination,
.bp-pagination-links {
	display: flex;
	justify-content: center;
	gap: var( --pnfpb-space-2 );
	margin-top: var( --pnfpb-space-8 );
}

.bp-pagination-links a,
.bp-pagination-links .current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var( --pnfpb-radius );
	border: 1px solid var( --pnfpb-border );
	font-size: 0.875rem;
	font-weight: 500;
	color: var( --pnfpb-text );
	text-decoration: none;
	transition: all var( --pnfpb-transition );
}

.bp-pagination-links a:hover { background: var( --pnfpb-primary ); color: #fff; border-color: var( --pnfpb-primary ); }
.bp-pagination-links .current { background: var( --pnfpb-primary ); color: #fff; border-color: var( --pnfpb-primary ); }

/* =========================================================
   9. BP Directory Search / Filter Bar
   ========================================================= */

.pnfpb-bp-directory-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --pnfpb-space-4 );
	margin-bottom: var( --pnfpb-space-6 );
	flex-wrap: wrap;
}

.pnfpb-bp-search {
	display: flex;
	align-items: stretch;
	gap: 0;
	flex: 1;
	max-width: 460px;
}

.pnfpb-bp-search .pnfpb-form__input {
	border-radius: var( --pnfpb-radius ) 0 0 var( --pnfpb-radius );
	border-right: none;
}

.pnfpb-bp-search .pnfpb-btn {
	border-radius: 0 var( --pnfpb-radius ) var( --pnfpb-radius ) 0;
}

/* =========================================================
   10. BP Notices
   ========================================================= */

.pnfpb-notice {
	display: flex;
	align-items: center;
	gap: var( --pnfpb-space-3 );
	padding: var( --pnfpb-space-4 ) var( --pnfpb-space-5 );
	border-radius: var( --pnfpb-radius-lg );
	margin-bottom: var( --pnfpb-space-5 );
	font-size: 0.9375rem;
}

.pnfpb-notice--info    { background: #e8f4fd; color: #0c4a6e; border: 1px solid #bae6fd; }
.pnfpb-notice--success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.pnfpb-notice--error   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* =========================================================
   11. Responsive
   ========================================================= */

@media ( max-width: 768px ) {
	.pnfpb-members-grid { grid-template-columns: repeat( 2, 1fr ); gap: var( --pnfpb-space-3 ); }
	.pnfpb-messages-table th:first-child,
	.pnfpb-messages-table td:first-child { display: none; }
	.pnfpb-bp-member-header__avatar { bottom: -30px; }
	.pnfpb-bp-member-header__avatar img { width: 70px; height: 70px; }
	.pnfpb-bp-member-header__inner { padding-top: 46px; }
	.pnfpb-bp-directory-controls { flex-direction: column; align-items: stretch; }
	.pnfpb-bp-search { max-width: 100%; }
}

@media ( max-width: 480px ) {
	.pnfpb-members-grid { grid-template-columns: 1fr; }
	.pnfpb-activity-item { flex-direction: column; }
	.pnfpb-bp-groups-wrap .pnfpb-groups-grid { grid-template-columns: 1fr; }
}