/**
 * BorgX BuddyPress Styles
 * SERP-style member profiles + standard BP components
 * 
 * File: borgx/assets/css/borgx/buddypress.css
 */

/* ============================================
   COVER IMAGE HEADER - HIDE DEFAULT
   ============================================ */

/* Hide the default cover image background */
#header-cover-image {
  display: none !important;
}

/* Remove positioning from cover header */
#item-header-cover-image,
#cover-image-container {
  position: static;
  padding: 0;
  margin: 0;
}

/* ============================================
   PROFILE HEADER, TABS, GRID, STATS, ACTIONS
   ============================================
   These are defined in hive-profile.css which loads
   after this file. See hive-profile.css for:
   .profile-header, .profile-tabs, .profile-tab,
   .profile-grid, .photo-grid, .stat-label, .stat-value,
   .member-header-actions, and all mobile adjustments.
   ============================================ */

/* ============================================
   ACTIVITY / HIVE FEED
   ============================================ */

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

#buddypress .activity-item {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

#buddypress .activity-item:last-child {
  border-bottom: none;
}

#buddypress .activity-avatar {
  flex-shrink: 0;
}

#buddypress .activity-avatar img {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
}

#buddypress .activity-content {
  flex: 1;
  min-width: 0;
}

#buddypress .activity-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs);
  font-size: var(--typescale_body-small_size);
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

#buddypress .activity-header a {
  color: var(--color-text);
  font-weight: 500;
}

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

#buddypress .activity-inner {
  font-size: var(--typescale_body-medium_size);
  line-height: 1.6;
  color: var(--color-text);
}

#buddypress .activity-inner p {
  margin: 0 0 var(--space-sm) 0;
}

#buddypress .activity-inner p:last-child {
  margin-bottom: 0;
}

/* Activity media */
#buddypress .activity-media {
  margin-top: var(--space-sm);
}

#buddypress .activity-media img {
  max-width: 100%;
  border-radius: var(--radius-lg);
}

/* Activity actions */
#buddypress .activity-meta {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
}

#buddypress .activity-meta a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--typescale_label-medium_size);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: var(--transition-fast);
}

#buddypress .activity-meta a:hover {
  color: var(--color-primary);
}

/* ============================================
   MEMBERS DIRECTORY
   ============================================ */

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

#buddypress #members-list li {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  transition: var(--transition-fast);
}

#buddypress #members-list li:last-child {
  border-bottom: none;
}

#buddypress #members-list li:hover {
  background: var(--color-hover);
  margin-left: calc(-1 * var(--space-md));
  margin-right: calc(-1 * var(--space-md));
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  border-radius: var(--radius-md);
}

#buddypress .item-avatar img {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
}

#buddypress .item {
  flex: 1;
  min-width: 0;
}

#buddypress .item-title {
  margin: 0;
  font-size: var(--typescale_body-medium_size);
}

#buddypress .item-title a {
  font-weight: 500;
  color: var(--color-primary);
}

#buddypress #members-list li:hover .item-title a {
  text-decoration: underline;
}

#buddypress .item-meta {
  font-size: var(--typescale_body-small_size);
  color: var(--color-text-muted);
}

/* ============================================
   GROUPS DIRECTORY
   ============================================ */

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

#buddypress #groups-list li {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  transition: var(--transition-fast);
}

#buddypress #groups-list li:last-child {
  border-bottom: none;
}

#buddypress #groups-list li:hover {
  background: var(--color-hover);
  margin-left: calc(-1 * var(--space-md));
  margin-right: calc(-1 * var(--space-md));
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  border-radius: var(--radius-md);
}

#buddypress #groups-list .item-title {
  margin: 0;
  font-family: var(--font-headline);
  font-size: var(--typescale_title-medium_size);
  font-weight: 500;
}

#buddypress #groups-list .item-title a {
  color: var(--color-primary);
}

#buddypress #groups-list li:hover .item-title a {
  text-decoration: underline;
}

#buddypress #groups-list .item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--typescale_body-small_size);
  color: var(--color-text-muted);
}

#buddypress #groups-list .group-status {
  color: var(--brand-2);
  font-weight: 500;
}

#buddypress #groups-list .item-desc {
  margin-top: var(--space-xs);
  font-size: var(--typescale_body-medium_size);
  color: var(--color-text);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================
   NAVIGATION TABS (Subnav)
   ============================================ */

#buddypress .item-list-tabs {
  margin-bottom: var(--space-lg);
}

#buddypress .item-list-tabs ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

#buddypress .item-list-tabs li {
  margin: 0;
}

#buddypress .item-list-tabs a {
  display: block;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-subtle);
  font-size: var(--typescale_label-medium_size);
  font-weight: 500;
  text-decoration: none;
  transition: var(--transition-fast);
}

#buddypress .item-list-tabs a:hover {
  border-color: var(--color-border);
  color: var(--color-text);
}

#buddypress .item-list-tabs .selected a,
#buddypress .item-list-tabs .current a {
  background: var(--color-primary);
  color: var(--neutral-0);
}

/* ============================================
   SUBNAV
   ============================================ */

#buddypress #subnav {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

#buddypress #subnav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

#buddypress #subnav a {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--typescale_label-medium_size);
  color: var(--color-text-subtle);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
}

#buddypress #subnav a:hover {
  color: var(--color-primary);
  background: var(--color-hover);
}

#buddypress #subnav .current a {
  color: var(--color-primary);
}

/* ============================================
   FORMS
   ============================================ */

#buddypress input[type="text"],
#buddypress input[type="email"],
#buddypress input[type="password"],
#buddypress textarea,
#buddypress select {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--typescale_body-medium_size);
  color: var(--color-text);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
}

#buddypress input:focus,
#buddypress textarea:focus,
#buddypress select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
}

#buddypress input[type="submit"],
#buddypress button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--typescale_label-large_size);
  font-weight: 500;
  color: var(--neutral-0);
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
}

#buddypress input[type="submit"]:hover,
#buddypress button:hover {
  background: var(--color-primary-hover);
}

/* ============================================
   PAGINATION
   ============================================ */

#buddypress .pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  font-size: var(--typescale_body-small_size);
  color: var(--color-text-muted);
}

#buddypress .pagination-links a,
#buddypress .pagination-links span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-sm);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: var(--transition-fast);
}

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

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

#buddypress .pagination-links .current {
  background: var(--color-primary);
  color: var(--neutral-0);
}

/* ============================================
   DARK MODE
   ============================================ */

@media (prefers-color-scheme: dark) {
  .profile-tab,
  .profile-grid__stat {
    background: var(--color-surface);
  }
}

body.dark .profile-tab,
body.dark .profile-grid__stat {
  background: var(--color-surface);
}