/**
 * BuddyPress Nouveau Custom Styles
 * Improvised Electronics - EOD Training Community
 *
 * Brand Colors:
 * - Primary Red: #C8232C
 * - Dark: #1A1A1A
 * - Light Gray: #F5F5F5
 * - Border Gray: #E5E5E5
 */

/* ==========================================================================
   CSS Variables
   ========================================================================== */
:root {
  --bp-primary: #C8232C;
  --bp-primary-hover: #a51d24;
  --bp-dark: #1A1A1A;
  --bp-text: #333333;
  --bp-text-light: #666666;
  --bp-text-muted: #888888;
  --bp-border: #E5E5E5;
  --bp-bg-light: #F5F5F5;
  --bp-white: #FFFFFF;
  --bp-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --bp-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
  --bp-radius: 8px;
  --bp-radius-sm: 4px;
  --bp-transition: all 0.2s ease;
}

/* ==========================================================================
   CRITICAL: Container Width Overrides
   Override all possible BuddyPress Nouveau and theme container constraints
   ========================================================================== */

/* Theme-level containers */
.site-content,
.content-area,
.entry-content,
.page-content,
.post-content,
article.page .entry-content,
.type-page .entry-content {
  max-width: none !important;
  width: 100% !important;
}

/* BuddyPress core containers */
#buddypress,
.buddypress,
.buddypress-wrap,
#buddypress.buddypress-wrap,
.bp-wrap,
#buddypress .bp-wrap {
  max-width: none !important;
  width: 100% !important;
}

/* BuddyPress Nouveau alignment classes */
#buddypress.alignfull,
#buddypress.alignwide,
.buddypress-wrap.alignfull,
.buddypress-wrap.alignwide {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Activity stream specific */
#buddypress #activity-stream,
#buddypress .activity-list,
.buddypress-wrap .activity-list {
  max-width: none !important;
  width: 100% !important;
}

/* ==========================================================================
   Base Container Styles
   ========================================================================== */
#buddypress.buddypress-wrap,
.buddypress-wrap {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  color: var(--bp-text);
  line-height: 1.6;
}

#buddypress .bp-list,
#buddypress ul.item-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ==========================================================================
   Activity Post Form ("What's New" Box)
   ========================================================================== */
#buddypress #whats-new-form,
.buddypress-wrap #whats-new-form {
  background: var(--bp-white);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: var(--bp-shadow);
}

/* Avatar + textarea in a row */
#buddypress #whats-new-form > p,
#buddypress #whats-new-form .activity-form,
#buddypress .activity-update-form {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 15px !important;
}

#buddypress #whats-new-avatar,
.buddypress-wrap #whats-new-avatar {
  flex-shrink: 0 !important;
  margin: 0 !important;
}

#buddypress #whats-new-avatar img,
.buddypress-wrap #whats-new-avatar img {
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  object-fit: cover !important;
}

#buddypress #whats-new-content,
.buddypress-wrap #whats-new-content {
  flex: 1 !important;
  min-width: 0 !important;
}

#buddypress #whats-new,
.buddypress-wrap #whats-new {
  width: 100% !important;
  min-height: 70px !important;
  padding: 12px 15px !important;
  border: 1px solid var(--bp-border) !important;
  border-radius: var(--bp-radius-sm) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  resize: vertical !important;
  transition: var(--bp-transition) !important;
  background: #F5F5F5 !important;
  color: var(--bp-text) !important;
}

#buddypress #whats-new:focus,
.buddypress-wrap #whats-new:focus {
  outline: none !important;
  border-color: var(--bp-primary) !important;
  box-shadow: 0 0 0 3px rgba(200, 35, 44, 0.1) !important;
  background: var(--bp-white) !important;
}

/* Post Form Buttons Row */
#buddypress #whats-new-submit,
.buddypress-wrap #whats-new-submit {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--bp-border);
}

/* Media buttons container */
#buddypress .post-elements-buttons-item,
#buddypress #whats-new-submit > div,
.buddypress-wrap .post-elements-buttons-item {
  display: inline-flex !important;
  gap: 8px !important;
}

/* Keep submit button on the right */
#buddypress #whats-new-submit #aw-whats-new-submit,
#buddypress #whats-new-submit input[type="submit"] {
  margin-left: auto !important;
}

#buddypress #whats-new-submit input[type="submit"],
#buddypress #whats-new-submit button[type="submit"],
.buddypress-wrap #whats-new-submit input[type="submit"] {
  background: var(--bp-primary) !important;
  color: var(--bp-white) !important;
  border: none !important;
  padding: 10px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: var(--bp-radius-sm) !important;
  cursor: pointer !important;
  transition: var(--bp-transition) !important;
  text-transform: none !important;
}

#buddypress #whats-new-submit input[type="submit"]:hover,
.buddypress-wrap #whats-new-submit input[type="submit"]:hover {
  background: var(--bp-primary-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(200, 35, 44, 0.3);
}

/* Media/Attachment Buttons */
#buddypress #whats-new-submit .post-elements-buttons-item,
.buddypress-wrap .post-elements-buttons-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#buddypress #whats-new-submit .post-elements-buttons-item button,
#buddypress .bpfb_toolbar button,
.buddypress-wrap .bpfb_toolbar button {
  background: #fafafa !important;
  border: 1px solid #e0e0e0 !important;
  color: var(--bp-text-muted) !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: var(--bp-radius-sm) !important;
  cursor: pointer !important;
  transition: var(--bp-transition) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
}

#buddypress #whats-new-submit .post-elements-buttons-item button:hover,
#buddypress .bpfb_toolbar button:hover,
.buddypress-wrap .bpfb_toolbar button:hover {
  background: #fff5f5 !important;
  border-color: var(--bp-primary) !important;
  color: var(--bp-primary) !important;
}

/* ==========================================================================
   Activity Stream Cards
   ========================================================================== */
#buddypress .activity-list,
.buddypress-wrap .activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

#buddypress .activity-list > li.activity-item,
.buddypress-wrap .activity-list > li.activity-item {
  background: var(--bp-white);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--bp-shadow);
  transition: var(--bp-transition);
}

#buddypress .activity-list > li.activity-item:hover,
.buddypress-wrap .activity-list > li.activity-item:hover {
  box-shadow: var(--bp-shadow-hover);
}

/* Activity Header Row: Avatar + Header Text inline */
#buddypress .activity-list .activity-content,
.buddypress-wrap .activity-list .activity-content {
  display: block !important;
}

/* Make avatar + header sit in a row */
#buddypress .activity-list .activity-avatar,
.buddypress-wrap .activity-list .activity-avatar {
  float: none !important;
  display: inline-block !important;
  vertical-align: top !important;
  margin-right: 12px !important;
  margin-bottom: 0 !important;
}

#buddypress .activity-list .activity-avatar a img,
.buddypress-wrap .activity-list .activity-avatar a img {
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  object-fit: cover;
}

/* Activity Header (user info + timestamp) - inline with avatar */
#buddypress .activity-list .activity-header,
.buddypress-wrap .activity-list .activity-header {
  display: inline-block !important;
  vertical-align: top !important;
  padding-top: 2px !important;
  margin-bottom: 12px !important;
}

#buddypress .activity-list .activity-header p,
.buddypress-wrap .activity-list .activity-header p {
  font-size: 14px !important;
  color: var(--bp-text-light) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#buddypress .activity-list .activity-header a,
#buddypress .activity-list .activity-header p a,
.buddypress-wrap .activity-list .activity-header a,
.buddypress-wrap .activity-list .activity-header p a {
  color: var(--bp-dark) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#buddypress .activity-list .activity-header a:hover,
.buddypress-wrap .activity-list .activity-header a:hover {
  color: var(--bp-primary) !important;
}

#buddypress .activity-list .activity-header .time-since,
#buddypress .activity-list .activity-header .activity-time-since,
#buddypress .activity-list .activity-header a time,
.buddypress-wrap .activity-list .activity-header .time-since {
  color: var(--bp-text-muted) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

/* Force username visibility */
#buddypress .activity-list .activity-item .activity-header,
#buddypress .activity-list .activity-item .activity-header *,
#buddypress .activity-header a.bp-user-link,
#buddypress .activity-header .activity-link,
.buddypress-wrap .activity-item .activity-header,
.buddypress-wrap .activity-item .activity-header * {
  visibility: visible !important;
  opacity: 1 !important;
  display: inline !important;
}

#buddypress .activity-header a.bp-user-link,
#buddypress .activity-header a[data-bp-tooltip],
.buddypress-wrap .activity-header a.bp-user-link {
  color: var(--bp-dark) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}

/* Activity Content - full width below header */
#buddypress .activity-list .activity-inner,
.buddypress-wrap .activity-list .activity-inner {
  display: block !important;
  clear: both !important;
  width: 100% !important;
  max-width: none !important;
  font-size: 15px;
  line-height: 1.6;
  color: var(--bp-text);
  margin-bottom: 15px;
  margin-top: 8px;
}

#buddypress .activity-list .activity-inner p {
  margin: 0 0 10px 0;
}

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

/* Activity Images - Force full width display */
#buddypress .activity-content img,
#buddypress .activity-inner img,
#buddypress .activity-content .activity-inner img,
#buddypress .activity-list .activity-inner img,
.buddypress-wrap .activity-list .activity-inner img,
#buddypress .bpfb-attached-img,
#buddypress .bpfb-attached-img img,
#buddypress .activity-inner .bpfb-attached-img img {
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  border-radius: var(--bp-radius-sm);
  margin-top: 10px;
  display: block;
}

/* For gallery/multiple images, maintain aspect ratio */
#buddypress .bpfb-images-holder,
#buddypress .activity-inner .bpfb-images-holder {
  width: 100% !important;
  max-width: none !important;
}

/* Embedded content (videos, etc) */
#buddypress .activity-inner iframe,
#buddypress .activity-inner video,
#buddypress .activity-inner embed,
#buddypress .activity-inner object {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
}

/* Activity inner content - full width */
#buddypress .activity-list .activity-inner,
.buddypress-wrap .activity-list .activity-inner {
  width: 100%;
  max-width: none;
}

/* ==========================================================================
   Activity Action Buttons
   ========================================================================== */
#buddypress .activity-list .activity-meta,
#buddypress .activity-list .activity-meta.action,
.buddypress-wrap .activity-list .activity-meta {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  padding-top: 15px !important;
  margin-top: 15px !important;
  border-top: 1px solid var(--bp-border) !important;
  clear: both;
}

#buddypress .activity-list .activity-meta a,
#buddypress .activity-list .activity-meta button,
.buddypress-wrap .activity-list .activity-meta a,
.buddypress-wrap .activity-list .activity-meta button,
#buddypress .activity-meta .generic-button a,
#buddypress .generic-button a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--bp-white) !important;
  border: 1px solid var(--bp-border) !important;
  color: var(--bp-text-light) !important;
  padding: 7px 14px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: var(--bp-radius-sm) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: var(--bp-transition) !important;
  line-height: 1 !important;
}

#buddypress .activity-list .activity-meta a:hover,
#buddypress .activity-list .activity-meta button:hover,
.buddypress-wrap .activity-list .activity-meta a:hover,
#buddypress .generic-button a:hover {
  background: var(--bp-bg-light) !important;
  border-color: #ccc !important;
  color: var(--bp-text) !important;
  transform: translateY(-1px);
}

/* Comment Button */
#buddypress .activity-meta a.acomment-reply,
.buddypress-wrap .activity-meta a.acomment-reply {
  background: var(--bp-white) !important;
}

#buddypress .activity-meta a.acomment-reply:hover {
  border-color: var(--bp-primary) !important;
  color: var(--bp-primary) !important;
}

/* Favorite/Like Button */
#buddypress .activity-meta a.fav,
#buddypress .activity-meta a.unfav,
.buddypress-wrap .activity-meta a.fav,
.buddypress-wrap .activity-meta a.unfav {
  background: var(--bp-white) !important;
}

#buddypress .activity-meta a.fav:hover,
#buddypress .activity-meta a.unfav:hover {
  border-color: #f0ad4e !important;
  color: #f0ad4e !important;
}

/* Delete Button */
#buddypress .activity-meta a.delete-activity,
#buddypress .activity-meta a.bp-secondary-action.delete-activity,
.buddypress-wrap .activity-meta a.delete-activity {
  background: var(--bp-white) !important;
  border-color: var(--bp-border) !important;
  color: var(--bp-text-muted) !important;
}

#buddypress .activity-meta a.delete-activity:hover {
  background: #fff5f5 !important;
  border-color: var(--bp-primary) !important;
  color: var(--bp-primary) !important;
}

/* Edit Button */
#buddypress .activity-meta a.edit-activity,
#buddypress .activity-meta a.edit,
.buddypress-wrap .activity-meta a.edit {
  background: var(--bp-white) !important;
}

/* WP-ULike Integration */
#buddypress .wp-ulike-general-class,
#buddypress .wp-ulike-btn,
.wp-ulike-general-class,
.wp-ulike-general-class button,
.wpulike-default button {
  background: var(--bp-white) !important;
  border: 1px solid var(--bp-border) !important;
  color: var(--bp-text-light) !important;
  padding: 7px 14px !important;
  font-size: 12px !important;
  border-radius: var(--bp-radius-sm) !important;
  cursor: pointer !important;
  transition: var(--bp-transition) !important;
}

#buddypress .wp-ulike-general-class:hover,
.wp-ulike-general-class:hover button {
  background: var(--bp-bg-light) !important;
  border-color: #ccc !important;
}

#buddypress .wp-ulike-count,
.wp-ulike-count,
.count-box {
  background: var(--bp-bg-light) !important;
  color: var(--bp-text-light) !important;
  border-radius: 10px !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  margin-left: 4px !important;
}

/* ==========================================================================
   Comments Section
   ========================================================================== */
#buddypress .activity-comments,
.buddypress-wrap .activity-comments {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--bp-border);
}

#buddypress .activity-comments ul,
.buddypress-wrap .activity-comments ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#buddypress .activity-comments ul li,
.buddypress-wrap .activity-comments ul li {
  padding: 12px;
  background: var(--bp-bg-light);
  border-radius: var(--bp-radius-sm);
  margin-bottom: 10px;
}

#buddypress .activity-comments .acomment-avatar img,
.buddypress-wrap .activity-comments .acomment-avatar img {
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
}

#buddypress .activity-comments .acomment-meta,
.buddypress-wrap .activity-comments .acomment-meta {
  font-size: 13px;
  color: var(--bp-text-light);
  margin-bottom: 5px;
}

#buddypress .activity-comments .acomment-meta a {
  color: var(--bp-dark);
  font-weight: 600;
}

#buddypress .activity-comments .acomment-content,
.buddypress-wrap .activity-comments .acomment-content {
  font-size: 14px;
  line-height: 1.5;
}

/* Comment Form */
#buddypress .ac-form,
.buddypress-wrap .ac-form {
  margin-top: 10px;
  padding: 15px;
  background: var(--bp-bg-light);
  border-radius: var(--bp-radius-sm);
}

#buddypress .ac-form textarea,
.buddypress-wrap .ac-form textarea {
  width: 100%;
  min-height: 60px;
  padding: 10px;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius-sm);
  font-size: 14px;
  resize: vertical;
}

#buddypress .ac-form textarea:focus {
  outline: none;
  border-color: var(--bp-primary);
}

#buddypress .ac-form input[type="submit"],
.buddypress-wrap .ac-form input[type="submit"] {
  background: var(--bp-primary) !important;
  color: var(--bp-white) !important;
  border: none !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: var(--bp-radius-sm) !important;
  margin-top: 10px !important;
  cursor: pointer !important;
}

#buddypress .ac-form input[type="submit"]:hover {
  background: var(--bp-primary-hover) !important;
}

/* ==========================================================================
   Navigation Tabs
   ========================================================================== */
#buddypress .bp-navs,
.buddypress-wrap .bp-navs {
  background: var(--bp-white);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  margin-bottom: 20px;
  overflow: hidden;
}

#buddypress .bp-navs ul,
.buddypress-wrap .bp-navs ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

#buddypress .bp-navs ul li,
.buddypress-wrap .bp-navs ul li {
  margin: 0;
}

#buddypress .bp-navs ul li a,
.buddypress-wrap .bp-navs ul li a {
  display: block;
  padding: 12px 20px;
  color: var(--bp-text-light);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 3px solid transparent;
  transition: var(--bp-transition);
}

#buddypress .bp-navs ul li a:hover,
.buddypress-wrap .bp-navs ul li a:hover {
  color: var(--bp-primary);
  background: var(--bp-bg-light);
}

#buddypress .bp-navs ul li.current a,
#buddypress .bp-navs ul li.selected a,
.buddypress-wrap .bp-navs ul li.current a {
  color: var(--bp-primary);
  border-bottom-color: var(--bp-primary);
  font-weight: 600;
}

#buddypress .bp-navs ul li a .count,
.buddypress-wrap .bp-navs ul li a .count {
  background: var(--bp-bg-light);
  color: var(--bp-text-muted);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  margin-left: 5px;
}

/* ==========================================================================
   Sidebar Members Widget
   ========================================================================== */
.sidebar-widget {
  background: var(--bp-white);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--bp-shadow);
}

.sidebar-widget h3 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 15px 0;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--bp-primary);
  color: var(--bp-dark);
}

/* Members List in Sidebar */
.sidebar-widget .members-listing,
.sidebar-widget .item-list,
#buddypress .widget ul.item-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.sidebar-widget .members-listing .member-item,
.sidebar-widget .item-list > li,
#buddypress .widget ul.item-list > li {
  display: flex;
  align-items: center;
  padding: 10px 8px;
  margin: 0 -8px;
  border-bottom: 1px solid var(--bp-border);
  border-radius: var(--bp-radius-sm);
  transition: var(--bp-transition);
}

.sidebar-widget .members-listing .member-item:hover,
.sidebar-widget .item-list > li:hover,
#buddypress .widget ul.item-list > li:hover {
  background: var(--bp-bg-light);
}

.sidebar-widget .members-listing .member-item:last-child,
.sidebar-widget .item-list > li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.sidebar-widget .members-listing .member-item:first-child,
.sidebar-widget .item-list > li:first-child {
  padding-top: 0;
}

/* Member Avatar in Sidebar */
.sidebar-widget .item-avatar,
.sidebar-widget .member-avatar {
  flex-shrink: 0;
  margin-right: 12px;
}

.sidebar-widget .item-avatar img,
.sidebar-widget .member-avatar img,
.sidebar-widget img.avatar {
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  object-fit: cover;
}

/* Member Info in Sidebar */
.sidebar-widget .item,
.sidebar-widget .member-content {
  flex: 1;
  min-width: 0;
}

.sidebar-widget .item-title,
.sidebar-widget .member-name {
  margin: 0;
  font-size: 14px;
}

.sidebar-widget .item-title a,
.sidebar-widget .member-name a {
  color: var(--bp-dark);
  font-weight: 600;
  text-decoration: none;
}

.sidebar-widget .item-title a:hover,
.sidebar-widget .member-name a:hover {
  color: var(--bp-primary);
}

.sidebar-widget .item-meta,
.sidebar-widget .last-activity {
  font-size: 11px;
  color: var(--bp-text-muted);
  margin-top: 2px;
}

/* Hide pagination in sidebar */
.sidebar-widget .bp-pagination,
.sidebar-widget .pagination-links,
.sidebar-widget .item-header {
  display: none !important;
}

/* ==========================================================================
   Who's Online - Compact Layout (Override BuddyPress defaults)
   ========================================================================== */
.online-widget {
  min-width: 250px;
}

/* NUCLEAR: Force all li elements inside to be compact */
.online-members-horizontal li {
  all: unset !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  background: #f5f5f5 !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  margin-bottom: 6px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.online-members-horizontal li:hover {
  background: #eeeeee !important;
  border-color: #d0d0d0 !important;
}

.online-members-horizontal li * {
  all: unset !important;
}

.online-members-horizontal li .item-avatar,
.online-members-horizontal li > div:first-child {
  display: block !important;
  margin-right: 10px !important;
  flex-shrink: 0 !important;
}

.online-members-horizontal li img {
  display: block !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
}

.online-members-horizontal li .item,
.online-members-horizontal li .item-block,
.online-members-horizontal li > div:nth-child(2) {
  display: block !important;
  flex: 1 !important;
}

.online-members-horizontal li a {
  display: inline !important;
  color: #1a1a1a !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.online-members-horizontal li::after {
  content: '' !important;
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  background: #22c55e !important;
  border-radius: 50% !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

/* Hide "Viewing X online member" and pagination */
.online-members-horizontal p,
.online-members-horizontal .bp-pagination,
.online-members-horizontal .pag-count,
.online-members-horizontal .members-listing > p,
.sidebar-widget .members-listing > p,
.sidebar-widget .members-listing p,
#buddypress .online-members-horizontal p,
.online-members-horizontal hr,
.online-widget p {
  display: none !important;
}

/* Reset the UL container */
.online-members-horizontal ul {
  all: unset !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  list-style: none !important;
}

/* Reset the grid/card layout - KEEP FOR FALLBACK */
.online-members-horizontal #members-list,
.online-members-horizontal .members-listing ul,
.online-members-horizontal ul.item-list,
#buddypress .online-members-horizontal ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  grid-template-columns: none !important;
}

/* Force compact row for each member */
.online-members-horizontal #members-list > li,
.online-members-horizontal .members-listing ul > li,
.online-members-horizontal ul.item-list > li,
#buddypress .online-members-horizontal li {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  background: var(--bp-bg-light) !important;
  border: 1px solid var(--bp-border) !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  min-height: unset !important;
  height: auto !important;
  margin: 0 !important;
  position: relative !important;
}

/* Avatar - force inline */
.online-members-horizontal .item-avatar,
.online-members-horizontal .member-avatar,
#buddypress .online-members-horizontal .item-avatar {
  flex-shrink: 0 !important;
  margin: 0 10px 0 0 !important;
  width: auto !important;
  float: none !important;
  position: static !important;
}

.online-members-horizontal .item-avatar img,
.online-members-horizontal img.avatar,
#buddypress .online-members-horizontal img {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: block !important;
  max-width: 32px !important;
}

/* Name - force inline next to avatar */
.online-members-horizontal .item,
.online-members-horizontal .item-block,
.online-members-horizontal .member-content,
#buddypress .online-members-horizontal .item {
  flex: 1 !important;
  min-width: 0 !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.online-members-horizontal .item-title,
.online-members-horizontal .member-name,
.online-members-horizontal .list-title,
#buddypress .online-members-horizontal .list-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: none !important;
}

.online-members-horizontal .item-title a,
.online-members-horizontal .member-name a,
.online-members-horizontal .list-title a {
  color: var(--bp-dark) !important;
  text-decoration: none !important;
  font-size: 13px !important;
}

/* Hide everything else in the card */
.online-members-horizontal .item-meta,
.online-members-horizontal .last-activity,
.online-members-horizontal .activity,
.online-members-horizontal .user-update,
.online-members-horizontal .action,
.online-members-horizontal .member-inner-list-action,
.online-members-horizontal .bp-member-type,
#buddypress .online-members-horizontal .item-meta,
#buddypress .online-members-horizontal .action {
  display: none !important;
}

/* Green online indicator */
.online-members-horizontal #members-list > li::after,
.online-members-horizontal ul > li::after,
#buddypress .online-members-horizontal li::after {
  content: '' !important;
  width: 8px !important;
  height: 8px !important;
  background: #22c55e !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  position: static !important;
}

/* ==========================================================================
   Load More / Pagination
   ========================================================================== */
#buddypress .load-more,
.buddypress-wrap .load-more {
  text-align: center;
  margin: 20px 0;
}

#buddypress .load-more a,
.buddypress-wrap .load-more a {
  display: inline-block;
  background: var(--bp-white) !important;
  border: 2px solid var(--bp-border) !important;
  color: var(--bp-text-light) !important;
  padding: 12px 30px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: var(--bp-radius-sm) !important;
  text-decoration: none !important;
  transition: var(--bp-transition) !important;
}

#buddypress .load-more a:hover {
  background: var(--bp-primary) !important;
  border-color: var(--bp-primary) !important;
  color: var(--bp-white) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(200, 35, 44, 0.3);
}

#buddypress .bp-pagination,
.buddypress-wrap .bp-pagination {
  padding: 15px 0;
  text-align: center;
}

#buddypress .bp-pagination .pag-count,
.buddypress-wrap .bp-pagination .pag-count {
  color: var(--bp-text-muted);
  font-size: 13px;
}

#buddypress .bp-pagination .pagination-links a,
.buddypress-wrap .bp-pagination .pagination-links a {
  display: inline-block;
  padding: 6px 12px;
  margin: 0 2px;
  background: var(--bp-white);
  border: 1px solid var(--bp-border);
  color: var(--bp-text-light);
  border-radius: var(--bp-radius-sm);
  text-decoration: none;
  transition: var(--bp-transition);
}

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

#buddypress .bp-pagination .pagination-links .current {
  background: var(--bp-primary);
  border-color: var(--bp-primary);
  color: var(--bp-white);
}

/* ==========================================================================
   Community Page Layout
   ========================================================================== */
.community-wrapper {
  display: flex;
  gap: 30px;
  max-width: 2200px;
  margin: 0 auto;
  padding: 20px 40px;
}

.community-main {
  flex: 1;
  min-width: 0;
  max-width: none;
}

.community-sidebar {
  width: 250px;
  flex-shrink: 0;
}

.community-main h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--bp-dark);
  margin: 0 0 8px 0;
}

.community-main > p {
  color: var(--bp-text-muted);
  font-size: 14px;
  margin-bottom: 24px;
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */
@media (max-width: 900px) {
  .community-wrapper {
    flex-direction: column;
  }

  .community-sidebar {
    width: 100%;
  }

  #buddypress .activity-list .activity-meta {
    gap: 6px !important;
  }

  #buddypress .activity-list .activity-meta a,
  #buddypress .activity-list .activity-meta button {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 600px) {
  #buddypress .activity-list > li.activity-item {
    padding: 15px;
  }

  #buddypress .activity-list .activity-avatar a img {
    width: 40px !important;
    height: 40px !important;
  }

  #buddypress #whats-new-form {
    padding: 15px;
  }

  #buddypress .bp-navs ul {
    flex-direction: column;
  }

  #buddypress .bp-navs ul li a {
    border-bottom: none;
    border-left: 3px solid transparent;
  }

  #buddypress .bp-navs ul li.current a {
    border-bottom: none;
    border-left-color: var(--bp-primary);
  }
}

/* ==========================================================================
   Utility Overrides (use sparingly)
   ========================================================================== */
#buddypress .bp-feedback {
  background: var(--bp-bg-light);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  padding: 15px;
  margin-bottom: 20px;
}

#buddypress .bp-feedback.info {
  border-left: 4px solid #5bc0de;
}

#buddypress .bp-feedback.error {
  border-left: 4px solid var(--bp-primary);
}

#buddypress .bp-feedback.success {
  border-left: 4px solid #5cb85c;
}