/**
 * Aloha Center NVC — Members Directory Redesign
 *
 * Scoped, modern, calm, and premium nonprofit community styling
 * for BuddyBoss ReadyLaunch Members Directory.
 *
 * @package ChampionChild
 * @subpackage BuddyBossReadyLaunch
 */

/* ==========================================================================
   1. DESIGN TOKENS & SYSTEM VARIABLES
   ========================================================================== */

:root {
  /* Brand Anchor Palette (Slate-Blue) */
  --aloha-brand-primary: #5a6b9c;
  --aloha-brand-primary-hover: #485885;
  --aloha-brand-primary-active: #3c4b75;
  --aloha-brand-light: #f0f3f8;
  --aloha-brand-subtle: rgba(90, 107, 156, 0.08);
  --aloha-brand-tint: rgba(90, 107, 156, 0.14);
  --aloha-brand-border: rgba(90, 107, 156, 0.18);
  --aloha-brand-focus-ring: rgba(90, 107, 156, 0.22);

  /* Neutral Slates & Typography */
  --aloha-slate-900: #1e293b; /* Primary Headings */
  --aloha-slate-800: #2d3748; /* Body Strong */
  --aloha-slate-700: #475569; /* Body Regular */
  --aloha-slate-600: #64748b; /* Secondary / Meta */
  --aloha-slate-500: #8593a6; /* Tertiary / Captions */
  --aloha-slate-400: #94a3b8; /* Muted */
  --aloha-slate-300: #cbd5e1; /* Subtle Dividers */
  --aloha-slate-200: #e2e8f0; /* Standard Borders */
  --aloha-slate-100: #f1f5f9; /* Surface Secondary */
  --aloha-slate-50: #f8fafc; /* Surface Light */
  --aloha-surface-white: #ffffff;

  /* Functional Status Colors */
  --aloha-status-online: #10b981;
  --aloha-status-online-ring: rgba(16, 185, 129, 0.25);
  --aloha-status-busy: #f59e0b;
  --aloha-status-offline: #94a3b8;

  /* Card Geometry & Elevation */
  --aloha-card-radius: 16px;
  --aloha-control-radius: 10px;
  --aloha-pill-radius: 9999px;
  --aloha-card-shadow:
    0 2px 6px rgba(15, 23, 42, 0.03), 0 0 1px rgba(90, 107, 156, 0.12);
  --aloha-card-shadow-hover:
    0 12px 28px rgba(90, 107, 156, 0.12), 0 4px 10px rgba(15, 23, 42, 0.04);
  --aloha-card-border: 1px solid rgba(90, 107, 156, 0.15);
  --aloha-card-border-hover: 1px solid rgba(90, 107, 156, 0.32);

  /* Micro-transitions */
  --aloha-transition-fast: 0.15s ease;
  --aloha-transition-base: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --aloha-transition-bounce: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   2. DIRECTORY CONTAINER & MAIN WRAPPER
   ========================================================================== */

.bb-rl-members-directory-wrapper {
  max-width: 100%;
  margin: 0 auto;
}

.bb-rl-members-directory-container {
  gap: 24px;
}

.bb-rl-members-directory-content {
  width: 100%;
}

/* ==========================================================================
   3. SECONDARY HEADER & CONTROLS BAR
   ========================================================================== */

.bb-rl-members-directory-wrapper .bb-rl-secondary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
  padding: 20px;
  border-bottom: 1px solid var(--aloha-slate-200);
}

/* Entry Heading / Title */
.bb-rl-members-directory-wrapper .bb-rl-entry-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bb-rl-members-directory-wrapper .bb-rl-entry-heading h2 {
  font-family:
    "InterText",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--aloha-slate-900);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1.2;
}

/* Member Count Pill Badge */
.bb-rl-members-directory-wrapper .bb-rl-heading-count {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--aloha-brand-primary);
  background-color: var(--aloha-brand-light);
  border: 1px solid var(--aloha-brand-border);
  border-radius: var(--aloha-pill-radius);
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  letter-spacing: 0;
}

/* Sub-controls Bar (Toggles & Dropdowns) */
.bb-rl-members-directory-wrapper .bb-rl-sub-ctrls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.bb-rl-members-directory-wrapper .subnav-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ==========================================================================
   4. GRID / LIST VIEW CONTROLS (Segmented Capsule)
   ========================================================================== */

.bb-rl-grid-filters {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background-color: var(--aloha-slate-100);
  border: 1px solid var(--aloha-slate-200);
  border-radius: 10px;
  padding: 3px;
}

.bb-rl-grid-filters .layout-view {
  width: 32px;
  height: 30px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--aloha-slate-600);
  background: transparent;
  transition: all var(--aloha-transition-fast);
  text-decoration: none;
}

.bb-rl-grid-filters .layout-view i {
  font-size: 16px;
  line-height: 1;
}

.bb-rl-grid-filters .layout-view:hover {
  color: var(--aloha-slate-900);
  background-color: rgba(255, 255, 255, 0.6);
}

.bb-rl-grid-filters .layout-view.active {
  background-color: var(--aloha-surface-white);
  color: var(--aloha-brand-primary);
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.08),
    0 0 1px rgba(15, 23, 42, 0.04);
}

/* ==========================================================================
   5. SORT & FILTER SELECT DROPDOWNS
   ========================================================================== */

.bb-rl-members-directory-wrapper .component-filters {
  display: inline-flex;
  align-items: center;
}

.bb-rl-members-directory-wrapper .bb-rl-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bb-rl-members-directory-wrapper .bb-rl-filter-label {
  margin: 0;
}

.bb-rl-members-directory-wrapper .bb-rl-filter-label span {
  font-family: "InterText", sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--aloha-slate-600);
  white-space: nowrap;
}

.bb-rl-members-directory-wrapper .select-wrap {
  position: relative;
  display: inline-block;
}

.bb-rl-members-directory-wrapper select {
  font-family:
    "InterText",
    -apple-system,
    sans-serif;
  height: 36px;
  padding: 0 32px 0 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--aloha-slate-800);
  background-color: var(--aloha-surface-white);
  border: 1px solid var(--aloha-slate-200);
  border-radius: var(--aloha-control-radius);
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: all var(--aloha-transition-fast);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
}

.bb-rl-members-directory-wrapper select:hover {
  border-color: var(--aloha-brand-primary);
  background-color: var(--aloha-slate-50);
}

.bb-rl-members-directory-wrapper select:focus {
  border-color: var(--aloha-brand-primary);
  box-shadow: 0 0 0 3px var(--aloha-brand-focus-ring);
  background-color: var(--aloha-surface-white);
}

/* Hide BuddyBoss duplicate text arrow */
.bb-rl-members-directory-wrapper .select-arrow {
  display: none !important;
}

/* ==========================================================================
   6. MASTHEAD GLOBAL SEARCH POLISHING
   ========================================================================== */

#masthead .dir-search.members-search {
  max-width: 320px;
  width: 100%;
}

#masthead .dir-search.members-search .bp-dir-search-form {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

#masthead .dir-search.members-search input[type="search"] {
  width: 100%;
  height: 38px;
  background-color: var(--aloha-slate-50);
  border: 1px solid var(--aloha-slate-200);
  border-radius: var(--aloha-pill-radius);
  padding: 0 36px 0 38px;
  font-family: "InterText", sans-serif;
  font-size: 13.5px;
  color: var(--aloha-slate-900);
  outline: none;
  transition: all var(--aloha-transition-base);
}

#masthead .dir-search.members-search input[type="search"]::placeholder {
  color: var(--aloha-slate-400);
  font-weight: 400;
}

#masthead .dir-search.members-search input[type="search"]:hover {
  background-color: var(--aloha-surface-white);
  border-color: var(--aloha-slate-300);
}

#masthead .dir-search.members-search input[type="search"]:focus {
  background-color: var(--aloha-surface-white);
  border-color: var(--aloha-brand-primary);
  box-shadow: 0 0 0 3px var(--aloha-brand-focus-ring);
}

#masthead .dir-search.members-search .nouveau-search-submit {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--aloha-slate-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}

#masthead
  .dir-search.members-search
  input[type="search"]:focus
  + .nouveau-search-submit,
#masthead .dir-search.members-search .nouveau-search-submit:hover {
  color: var(--aloha-brand-primary);
}

#masthead .dir-search.members-search .search-form_reset {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--aloha-slate-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

#masthead .dir-search.members-search .search-form_reset:hover {
  color: var(--aloha-slate-700);
}

/* ==========================================================================
   7. MEMBERS GRID LAYOUT (Desktop, Tablet, Mobile)
   ========================================================================== */

#bb-rl-members-dir-list .item-list.members-list.grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#bb-rl-members-dir-list .item-list.members-list.grid .item-entry {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* ==========================================================================
   8. MEMBER CARD SURFACE & HIERARCHY
   ========================================================================== */

#bb-rl-members-dir-list .item-list.grid .item-entry .list-wrap {
  background-color: var(--aloha-surface-white) !important;
  border: var(--aloha-card-border) !important;
  border-radius: var(--aloha-card-radius) !important;
  box-shadow: var(--aloha-card-shadow) !important;
  padding: 24px 18px 18px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  position: relative !important;
  transition:
    transform var(--aloha-transition-base),
    box-shadow var(--aloha-transition-base),
    border-color var(--aloha-transition-base) !important;
}

/* Card Hover Elevation */
#bb-rl-members-dir-list .item-list.grid .item-entry:hover .list-wrap {
  transform: translateY(-4px) !important;
  border-color: var(--aloha-brand-border) !important;
  box-shadow: var(--aloha-card-shadow-hover) !important;
}

#bb-rl-members-dir-list .item-list.grid .item-entry .list-wrap-inner {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* ==========================================================================
   9. AVATAR & PRESENCE STATUS
   ========================================================================== */

#bb-rl-members-dir-list .item-list.grid .item-entry .item-avatar {
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
  position: relative !important;
}

#bb-rl-members-dir-list .item-list.grid .item-entry .item-avatar a {
  position: relative !important;
  display: inline-block !important;
  border-radius: 50% !important;
}

#bb-rl-members-dir-list .item-list.grid .item-entry .avatar {
  width: 84px !important;
  height: 84px !important;
  max-width: 84px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background-color: var(--aloha-slate-100) !important;
  border: 3px solid var(--aloha-surface-white) !important;
  outline: 1px solid var(--aloha-slate-200) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
  transition:
    transform var(--aloha-transition-base),
    outline-color var(--aloha-transition-base) !important;
}

#bb-rl-members-dir-list .item-list.grid .item-entry:hover .avatar {
  outline-color: var(--aloha-brand-primary) !important;
}

/* Online Presence Indicator Dot */
#bb-rl-members-dir-list .item-list .item-avatar .member-status {
  position: absolute !important;
  bottom: 2px !important;
  right: 2px !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  border: 2.5px solid var(--aloha-surface-white) !important;
  z-index: 3 !important;
}

#bb-rl-members-dir-list .item-list .item-avatar .member-status.online {
  background-color: var(--aloha-status-online) !important;
  box-shadow: 0 0 0 1px var(--aloha-status-online-ring) !important;
}

#bb-rl-members-dir-list .item-list .item-avatar .member-status.offline {
  display: none !important; /* Keep cards clean, omit offline clutter */
}

/* ==========================================================================
   10. MEMBER DETAILS, NAME & METADATA
   ========================================================================== */

#bb-rl-members-dir-list .item-list.grid .item-entry .item {
  text-align: center !important;
  margin-bottom: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}

#bb-rl-members-dir-list .item-list.grid .item-entry .item-block {
  width: 100% !important;
}

/* Member Name */
#bb-rl-members-dir-list .item-list.grid .member-name {
  font-family:
    "InterText",
    -apple-system,
    sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
}

#bb-rl-members-dir-list .item-list.grid .member-name a {
  color: var(--aloha-slate-900) !important;
  text-decoration: none !important;
  transition: color var(--aloha-transition-fast) !important;
  display: inline-block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#bb-rl-members-dir-list .item-list.grid .member-name a:hover {
  color: var(--aloha-brand-primary) !important;
}

/* Member Type Pill (if set) */
.bb-rl-members .bp-member-type {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  color: var(--aloha-brand-primary) !important;
  background-color: var(--aloha-brand-light) !important;
  border: 1px solid var(--aloha-brand-border) !important;
  border-radius: var(--aloha-pill-radius) !important;
  padding: 3px 8px !important;
  margin: 0 auto 8px auto !important;
  display: inline-flex !important;
  width: fit-content !important;
}

/* Activity / Join Metadata */
#bb-rl-members-dir-list .item-list.grid .bb-rl-item-meta-asset {
  font-family: "InterText", sans-serif !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: var(--aloha-slate-600) !important;
  margin: 0 0 4px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 3px !important;
}

#bb-rl-members-dir-list .item-list.grid .bb-rl-item-meta-asset .separator {
  color: var(--aloha-slate-300) !important;
  margin: 0 2px !important;
  font-size: 10px !important;
}

/* Followers Count Pill Badge */
#bb-rl-members-dir-list .item-list.grid .follow-container {
  margin-top: 6px !important;
}

#bb-rl-members-dir-list .item-list.grid .follow-container:empty {
  display: none !important;
}

#bb-rl-members-dir-list .item-list.grid .follow-container:not(:empty) {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--aloha-brand-primary) !important;
  background-color: var(--aloha-brand-subtle) !important;
  border-radius: var(--aloha-pill-radius) !important;
  padding: 3px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  margin: 6px auto 0 auto !important;
  border: 1px solid rgba(90, 107, 156, 0.12) !important;
}

/* ==========================================================================
   11. CARD ACTION BUTTONS (Clean, Tactile, Modern)
   ========================================================================== */

#bb-rl-members-dir-list .item-list.grid .item-entry .bb-rl-member-buttons-wrap {
  margin-top: auto !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--aloha-slate-100) !important;
  width: 100% !important;
}

#bb-rl-members-dir-list .item-list.grid .bb-rl-item-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

#bb-rl-members-dir-list .item-list.grid .bb-rl-secondary-actions {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

#bb-rl-members-dir-list .item-list.grid .bb-rl-secondary-actions .button-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
}

/* Individual Icon Action Buttons */
#bb-rl-members-dir-list
  .item-list.grid
  .bb-rl-secondary-actions
  a.follow-button,
#bb-rl-members-dir-list
  .item-list.grid
  .bb-rl-secondary-actions
  a.friendship-button,
#bb-rl-members-dir-list
  .item-list.grid
  .bb-rl-secondary-actions
  button.follow-button,
#bb-rl-members-dir-list
  .item-list.grid
  .bb-rl-secondary-actions
  button.friendship-button,
#bb-rl-members-dir-list .item-list.grid .bb-rl-secondary-actions .send-message,
#bb-rl-members-dir-list
  .item-list.grid
  .bb-rl-secondary-actions
  .bb-rl-send-message-disabled {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 9px !important;
  background-color: var(--aloha-slate-50) !important;
  border: 1px solid var(--aloha-slate-200) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all var(--aloha-transition-fast) !important;
}

/* Action Icons */
#bb-rl-members-dir-list .item-list.grid .bb-rl-secondary-actions i {
  font-size: 16px !important;
  line-height: 1 !important;
  color: var(--aloha-slate-600) !important;
  transition: color var(--aloha-transition-fast) !important;
}

#bb-rl-members-dir-list
  .item-list.grid
  .bb-rl-secondary-actions
  a.follow-button
  i::before,
#bb-rl-members-dir-list
  .item-list.grid
  .bb-rl-secondary-actions
  a.friendship-button
  i::before,
#bb-rl-members-dir-list
  .item-list.grid
  .bb-rl-secondary-actions
  .send-message
  i::before {
  font-size: 16px !important;
  color: var(--aloha-slate-600) !important;
  transition: color var(--aloha-transition-fast) !important;
}

/* Action Hover Feedback */
#bb-rl-members-dir-list
  .item-list.grid
  .bb-rl-secondary-actions
  a.follow-button:hover,
#bb-rl-members-dir-list
  .item-list.grid
  .bb-rl-secondary-actions
  a.friendship-button:hover,
#bb-rl-members-dir-list
  .item-list.grid
  .bb-rl-secondary-actions
  button.follow-button:hover,
#bb-rl-members-dir-list
  .item-list.grid
  .bb-rl-secondary-actions
  button.friendship-button:hover,
#bb-rl-members-dir-list
  .item-list.grid
  .bb-rl-secondary-actions
  .send-message:hover {
  background-color: var(--aloha-brand-light) !important;
  border-color: var(--aloha-brand-border) !important;
  transform: translateY(-1px) !important;
}

#bb-rl-members-dir-list
  .item-list.grid
  .bb-rl-secondary-actions
  a.follow-button:hover
  i::before,
#bb-rl-members-dir-list
  .item-list.grid
  .bb-rl-secondary-actions
  a.friendship-button:hover
  i::before,
#bb-rl-members-dir-list
  .item-list.grid
  .bb-rl-secondary-actions
  .send-message:hover
  i::before {
  color: var(--aloha-brand-primary) !important;
}

/* Active State (e.g. following or is_friend) */
#bb-rl-members-dir-list
  .item-list.grid
  .bb-rl-secondary-actions
  a.follow-button.following,
#bb-rl-members-dir-list
  .item-list.grid
  .bb-rl-secondary-actions
  a.friendship-button.is_friend {
  background-color: var(--aloha-brand-light) !important;
  border-color: var(--aloha-brand-border) !important;
}

#bb-rl-members-dir-list
  .item-list.grid
  .bb-rl-secondary-actions
  a.follow-button.following
  i::before,
#bb-rl-members-dir-list
  .item-list.grid
  .bb-rl-secondary-actions
  a.friendship-button.is_friend
  i::before {
  color: var(--aloha-brand-primary) !important;
}

/* Disabled Message Action (when user cannot message) */
#bb-rl-members-dir-list
  .item-list.grid
  .bb-rl-secondary-actions
  .bb-rl-send-message-disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* ==========================================================================
   12. LIST VIEW STYLING (.bp-list:not(.grid))
   ========================================================================== */

#bb-rl-members-dir-list .item-list:not(.grid) {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

#bb-rl-members-dir-list .item-list:not(.grid) .item-entry {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

#bb-rl-members-dir-list .item-list:not(.grid) .list-wrap {
  background-color: var(--aloha-surface-white) !important;
  border: var(--aloha-card-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--aloha-card-shadow) !important;
  padding: 16px 22px !important;
  transition: all var(--aloha-transition-base) !important;
}

#bb-rl-members-dir-list .item-list:not(.grid) .list-wrap:hover {
  border-color: var(--aloha-brand-border) !important;
  box-shadow: 0 4px 16px rgba(90, 107, 156, 0.08) !important;
}

#bb-rl-members-dir-list .item-list:not(.grid) .list-wrap-inner {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

#bb-rl-members-dir-list .item-list:not(.grid) .item-avatar {
  margin-right: 18px !important;
  flex-shrink: 0 !important;
  position: relative !important;
}

#bb-rl-members-dir-list .item-list:not(.grid) .avatar {
  width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid var(--aloha-surface-white) !important;
  outline: 1px solid var(--aloha-slate-200) !important;
}

#bb-rl-members-dir-list .item-list:not(.grid) .item {
  flex: 1 !important;
  text-align: left !important;
}

#bb-rl-members-dir-list .item-list:not(.grid) .member-name {
  font-size: 16px !important;
  font-weight: 600 !important;
  margin: 0 0 4px 0 !important;
}

#bb-rl-members-dir-list .item-list:not(.grid) .member-name a {
  color: var(--aloha-slate-900) !important;
  text-decoration: none !important;
}

#bb-rl-members-dir-list .item-list:not(.grid) .bb-rl-item-meta-asset {
  font-size: 12.5px !important;
  color: var(--aloha-slate-600) !important;
}

#bb-rl-members-dir-list .item-list:not(.grid) .bb-rl-member-buttons-wrap {
  margin-left: auto !important;
}

/* ==========================================================================
   13. PAGINATION POLISHING
   ========================================================================== */

#bb-rl-members-dir-list .bp-pagination {
  margin-top: 32px !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--aloha-slate-200) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

#bb-rl-members-dir-list .bp-pagination .pag-count {
  font-size: 13px !important;
  color: var(--aloha-slate-600) !important;
}

#bb-rl-members-dir-list .bp-pagination-links {
  display: flex !important;
  gap: 6px !important;
}

#bb-rl-members-dir-list .bp-pagination-links .page-numbers {
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--aloha-slate-700) !important;
  background-color: var(--aloha-surface-white) !important;
  border: 1px solid var(--aloha-slate-200) !important;
  text-decoration: none !important;
  transition: all var(--aloha-transition-fast) !important;
}

#bb-rl-members-dir-list .bp-pagination-links .page-numbers:hover {
  background-color: var(--aloha-brand-light) !important;
  border-color: var(--aloha-brand-border) !important;
  color: var(--aloha-brand-primary) !important;
}

#bb-rl-members-dir-list .bp-pagination-links .page-numbers.current {
  background-color: var(--aloha-brand-primary) !important;
  border-color: var(--aloha-brand-primary) !important;
  color: var(--aloha-surface-white) !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   14. SKELETON LOADER ENHANCEMENT
   ========================================================================== */

.bb-rl-skeleton-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
}

.bb-rl-skeleton-grid-block {
  background: var(--aloha-surface-white) !important;
  border: var(--aloha-card-border) !important;
  border-radius: var(--aloha-card-radius) !important;
  padding: 24px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.bb-rl-skeleton-avatar {
  width: 84px !important;
  height: 84px !important;
  border-radius: 50% !important;
  margin-bottom: 16px !important;
}

/* ==========================================================================
   15. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Large Desktop (1200px and up): 4 Columns */
@media (min-width: 1200px) {
  #bb-rl-members-dir-list .item-list.members-list.grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* Medium Desktop / Small Laptop (992px to 1199px): 3 Columns */
@media (max-width: 1199px) and (min-width: 900px) {
  #bb-rl-members-dir-list .item-list.members-list.grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 18px !important;
  }
}

/* Tablet (600px to 899px): 2 Columns */
@media (max-width: 899px) and (min-width: 600px) {
  #bb-rl-members-dir-list .item-list.members-list.grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  .bb-rl-members-directory-wrapper .bb-rl-secondary-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .bb-rl-members-directory-wrapper .bb-rl-sub-ctrls {
    width: 100%;
    justify-content: space-between;
  }
}

/* Mobile (under 600px): 1 Focused Column */
@media (max-width: 599px) {
  #bb-rl-members-dir-list .item-list.members-list.grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  #bb-rl-members-dir-list .item-list.grid .item-entry .list-wrap {
    padding: 20px 16px 16px 16px !important;
  }

  .bb-rl-members-directory-wrapper .bb-rl-secondary-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 16px;
  }

  .bb-rl-members-directory-wrapper .bb-rl-sub-ctrls {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .bb-rl-members-directory-wrapper .subnav-filters {
    width: 100%;
    justify-content: space-between;
  }

  .bb-rl-members-directory-wrapper .select-wrap select {
    width: 100%;
  }

  #masthead .dir-search.members-search {
    max-width: 100%;
    margin-top: 8px;
  }
}

/* ==========================================================================
   16. MEMBER PROFILE LAYOUT & HEADER OFFSET
   ========================================================================== */

/* Desktop top padding so profile content clears the fixed #masthead */
@media (min-width: 993px) {
  .bp-user #primary,
  .bp-user.bb-readylaunch-template #primary,
  .bp-user .bb-rl-content-wrapper {
    padding-top: 24px;
  }
}

.bp-user .bb-rl-content-wrapper {
  max-width: 100%;
  gap: 24px !important;
}

.bp-user .bb-rl-primary-container {
  flex: 1;
  min-width: 0;
}

.bp-user .bb-rl-secondary-container {
  max-width: 320px;
  flex: 0 0 320px;
}

/* ==========================================================================
   17. PROFILE HEADER CARD & AVATAR
   ========================================================================== */

.bp-user #item-header.bb-rl-profile-header {
  background-color: var(--aloha-surface-white) !important;
  border: var(--aloha-card-border) !important;
  border-radius: var(--aloha-card-radius) !important;
  box-shadow: var(--aloha-card-shadow) !important;
  padding: 28px 28px 0 28px !important;
  margin-bottom: 24px !important;
  position: relative !important;
  transition:
    box-shadow var(--aloha-transition-base),
    border-color var(--aloha-transition-base) !important;
}

.bp-user #item-header.bb-rl-profile-header:hover {
  border-color: var(--aloha-brand-border) !important;
  box-shadow:
    0 8px 24px rgba(90, 107, 156, 0.08),
    0 2px 6px rgba(15, 23, 42, 0.03) !important;
}

.bp-user .bb-rl-profile-container {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

.bp-user .bb-rl-profile-item-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  padding-bottom: 24px !important;
  border-bottom: 1px solid var(--aloha-slate-200) !important;
  margin-bottom: 0 !important;
}

/* Avatar Frame */
.bp-user .bb-rl-profile-avatar {
  width: 96px !important;
  height: 96px !important;
  min-width: 96px !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

.bp-user .bb-rl-profile-avatar img {
  width: 96px !important;
  height: 96px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background-color: var(--aloha-slate-100) !important;
  border: 3px solid var(--aloha-surface-white) !important;
  outline: 1px solid var(--aloha-slate-200) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
  transition:
    transform var(--aloha-transition-base),
    outline-color var(--aloha-transition-base) !important;
}

.bp-user #item-header.bb-rl-profile-header:hover .bb-rl-profile-avatar img {
  outline-color: var(--aloha-brand-primary) !important;
}

/* Online Presence Indicator */
.bp-user .bb-rl-profile-avatar .member-status {
  position: absolute !important;
  bottom: 3px !important;
  right: 3px !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  border: 2.5px solid var(--aloha-surface-white) !important;
  z-index: 3 !important;
}

.bp-user .bb-rl-profile-avatar .member-status.online {
  background-color: var(--aloha-status-online) !important;
  box-shadow: 0 0 0 1px var(--aloha-status-online-ring) !important;
}

.bp-user .bb-rl-profile-avatar .member-status.offline {
  display: none !important;
}

/* Profile Header Content */
.bp-user .bb-rl-profile-header-content {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.bp-user .bb-user-content-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

/* Display Name */
.bp-user .bb-rl-profile-header-content h2.user-nicename {
  font-family:
    "InterText",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  color: var(--aloha-slate-900) !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}

/* Profile Metadata */
.bp-user .bb-rl-profile-header-content .item-meta {
  font-family: "InterText", sans-serif !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: var(--aloha-slate-600) !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin-top: 4px !important;
}

.bp-user .bb-rl-profile-header-content .item-meta .mention-name {
  color: var(--aloha-brand-primary) !important;
  font-weight: 500 !important;
}

.bp-user .bb-rl-profile-header-content .item-meta .separator {
  color: var(--aloha-slate-300) !important;
  font-size: 10px !important;
  margin: 0 3px !important;
}

/* Edit Profile Button */
.bp-user .bb-rl-member-header-actions-wrap {
  margin: 0 !important;
}

.bp-user .bb-rl-member-header-actions-wrap .bb-rl-member-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.bp-user .bb-rl-member-header-actions a.edit-profile,
.bp-user .bb-rl-member-header-actions button.edit-profile {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 38px !important;
  padding: 0 18px !important;
  border-radius: var(--aloha-control-radius) !important;
  background-color: var(--aloha-brand-primary) !important;
  color: #ffffff !important;
  font-family: "InterText", sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border: 1px solid var(--aloha-brand-primary) !important;
  box-shadow: 0 1px 3px rgba(90, 107, 156, 0.25) !important;
  transition: all var(--aloha-transition-fast) !important;
  cursor: pointer !important;
}

.bp-user .bb-rl-member-header-actions a.edit-profile:hover,
.bp-user .bb-rl-member-header-actions button.edit-profile:hover {
  background-color: var(--aloha-brand-primary-hover) !important;
  border-color: var(--aloha-brand-primary-hover) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(90, 107, 156, 0.28) !important;
}

.bp-user .bb-rl-member-header-actions a.edit-profile i {
  font-size: 14px !important;
  color: #ffffff !important;
}

/* Secondary Connection Action Buttons (When viewing other members) */
.bp-user .bb-rl-member-header-actions a.friendship-button,
.bp-user .bb-rl-member-header-actions button.friendship-button,
.bp-user .bb-rl-member-header-actions a.follow-button,
.bp-user .bb-rl-member-header-actions button.follow-button,
.bp-user .bb-rl-member-header-actions a.send-message {
  height: 38px !important;
  padding: 0 16px !important;
  border-radius: var(--aloha-control-radius) !important;
  font-family: "InterText", sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  transition: all var(--aloha-transition-fast) !important;
}

/* ==========================================================================
   18. PROFILE NAVIGATION TABS (#object-nav)
   ========================================================================== */

.bp-user .bb-rl-main-nav {
  border-top: none !important;
  padding: 8px 0 !important;
  margin: 0 !important;
}

.bp-user .bb-rl-main-nav-list {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  /* overflow-x: auto !important; */
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}

.bp-user .bb-rl-main-nav-list::-webkit-scrollbar {
  display: none !important;
}

.bp-user .bb-rl-main-nav-list li.bp-personal-tab {
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

.bp-user .bb-rl-main-nav-list li.bp-personal-tab a {
  display: inline-flex !important;
  align-items: center !important;
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 9px !important;
  font-family: "InterText", sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--aloha-slate-600) !important;
  background-color: transparent !important;
  border: 1px solid transparent !important;
  text-decoration: none !important;
  transition: all var(--aloha-transition-fast) !important;
  white-space: nowrap !important;
}

.bp-user .bb-rl-main-nav-list li.bp-personal-tab a:hover {
  color: var(--aloha-slate-900) !important;
  background-color: var(--aloha-slate-100) !important;
}

/* Active Selected Tab */
.bp-user .bb-rl-main-nav-list li.bp-personal-tab.current a,
.bp-user .bb-rl-main-nav-list li.bp-personal-tab.selected a {
  color: var(--aloha-brand-primary) !important;
  background-color: var(--aloha-brand-light) !important;
  border-color: var(--aloha-brand-border) !important;
  font-weight: 600 !important;
}

/* Tab Counts Badge */
.bp-user .bb-rl-main-nav-list li.bp-personal-tab a .count {
  margin-left: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 7px !important;
  border-radius: var(--aloha-pill-radius) !important;
  background-color: var(--aloha-slate-200) !important;
  color: var(--aloha-slate-700) !important;
  display: inline-flex !important;
  line-height: 1 !important;
}

.bp-user .bb-rl-main-nav-list li.bp-personal-tab.current a .count,
.bp-user .bb-rl-main-nav-list li.bp-personal-tab.selected a .count {
  background-color: rgba(90, 107, 156, 0.2) !important;
  color: var(--aloha-brand-primary) !important;
}

/* ==========================================================================
   19. PROFILE DETAILS SECTION (CLEAN SINGLE CARD SURFACE)
   ========================================================================== */

/*
 * .bb-rl-profile-panel is the single intended content card surface.
 * Neutralize the inner .bb-rl-profile-widget so details sit seamlessly without extra nested borders.
 */
.bp-user #item-body .bb-rl-profile-panel {
  background-color: var(--aloha-surface-white) !important;
  border: var(--aloha-card-border) !important;
  border-radius: var(--aloha-card-radius) !important;
  box-shadow: var(--aloha-card-shadow) !important;
  padding: 24px 28px !important;
  margin: 0 0 24px 0 !important;
  transition:
    box-shadow var(--aloha-transition-base),
    border-color var(--aloha-transition-base) !important;
}

.bp-user #item-body .bb-rl-profile-panel:hover {
  border-color: var(--aloha-brand-border) !important;
  box-shadow: 0 6px 20px rgba(90, 107, 156, 0.08) !important;
}

/* Neutralize inner widget card styles */
.bp-user #item-body .bb-rl-profile-panel .bb-rl-profile-widget {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Details Section Header */
.bp-user #item-body .bb-rl-profile-widget-header.widget-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 0 18px 0 !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--aloha-slate-200) !important;
  font-family: "InterText", sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--aloha-slate-900) !important;
  letter-spacing: -0.01em !important;
}

/* "Edit" Link Button */
.bp-user #item-body .bb-rl-see-all a {
  display: inline-flex !important;
  align-items: center !important;
  height: 30px !important;
  padding: 0 12px !important;
  border-radius: 7px !important;
  font-family: "InterText", sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--aloha-brand-primary) !important;
  background-color: var(--aloha-brand-light) !important;
  border: 1px solid var(--aloha-brand-border) !important;
  text-decoration: none !important;
  transition: all var(--aloha-transition-fast) !important;
}

.bp-user #item-body .bb-rl-see-all a:hover {
  background-color: var(--aloha-brand-primary) !important;
  color: #ffffff !important;
  border-color: var(--aloha-brand-primary) !important;
}

/* Field Rows */
.bp-user #item-body .bb-rl-profile-widget-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--aloha-slate-100) !important;
}

.bp-user #item-body .bb-rl-profile-widget-field:first-child {
  padding-top: 0 !important;
}

.bp-user #item-body .bb-rl-profile-widget-field:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.bp-user #item-body .bb-rl-profile-widget-label {
  font-family: "InterText", sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--aloha-slate-600) !important;
}

.bp-user #item-body .bb-rl-profile-widget-data p {
  margin: 0 !important;
  font-family: "InterText", sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--aloha-slate-900) !important;
  line-height: 1.4 !important;
}

/* ==========================================================================
   20. SIDEBAR DUPLICATE DETAILS RESOLUTION
   ========================================================================== */

/*
 * Suppress duplicate Details widget in right sidebar on the Profile tab,
 * preserving completion widget and full functionality elsewhere.
 */
body.bp-user.profile .bb-rl-secondary-container .widget.bb-rl-profile-widget,
body.bp-user.xprofile .bb-rl-secondary-container .widget.bb-rl-profile-widget {
  display: none !important;
}

/* ==========================================================================
   21. PROFILE COMPLETION WIDGET (REFINED METRICS & CHECKLIST)
   ========================================================================== */

.bp-user .widget_bp_profile_completion_widget {
  background-color: var(--aloha-surface-white) !important;
  border: var(--aloha-card-border) !important;
  border-radius: var(--aloha-card-radius) !important;
  box-shadow: var(--aloha-card-shadow) !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
  transition:
    box-shadow var(--aloha-transition-base),
    border-color var(--aloha-transition-base) !important;
}

.bp-user .widget_bp_profile_completion_widget:hover {
  border-color: var(--aloha-brand-border) !important;
  box-shadow: 0 6px 20px rgba(90, 107, 156, 0.08) !important;
}

.bp-user .widget_bp_profile_completion_widget .widget-title,
.bp-user .widget_bp_profile_completion_widget h2 {
  font-family: "InterText", sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--aloha-slate-900) !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Percentage Text */
.bp-user .widget_bp_profile_completion_widget .progress_text_wrap {
  margin-bottom: 8px !important;
}

.bp-user .widget_bp_profile_completion_widget .progress_text_wrap h3 {
  font-family: "InterText", sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--aloha-slate-800) !important;
  margin: 0 !important;
}

/* Top Progress Bar ONLY (Scoped to .pc_progress_wrap) */
.bp-user .widget_bp_profile_completion_widget .pc_progress_wrap .progress {
  height: 8px !important;
  border-radius: var(--aloha-pill-radius) !important;
  background-color: var(--aloha-slate-200) !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
  position: relative !important;
}

.bp-user
  .widget_bp_profile_completion_widget
  .pc_progress_wrap
  .progress
  .completed_staus {
  height: 100% !important;
  border-radius: var(--aloha-pill-radius) !important;
  background: linear-gradient(
    90deg,
    var(--aloha-brand-primary),
    #6b7daa
  ) !important;
  transition: width 0.4s ease !important;
}

/* Checklist Items */
.bp-user .widget_bp_profile_completion_widget .pc_detailed_progress {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.bp-user .widget_bp_profile_completion_widget .single_section_wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--aloha-slate-100) !important;
}

.bp-user .widget_bp_profile_completion_widget .single_section_wrap:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* Indicator Circle (15px - proportional, non-intrusive) */
.bp-user
  .widget_bp_profile_completion_widget
  .single_section_wrap
  .section_ico {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--aloha-slate-300) !important;
  background-color: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 10px !important;
  margin-top: 7px !important;
  position: relative !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.bp-user
  .widget_bp_profile_completion_widget
  .single_section_wrap.completed
  .section_ico {
  background-color: var(--aloha-brand-primary) !important;
  border-color: var(--aloha-brand-primary) !important;
}

.bp-user
  .widget_bp_profile_completion_widget
  .single_section_wrap
  .section_ico
  i,
.bp-user
  .widget_bp_profile_completion_widget
  .single_section_wrap
  .section_ico
  .bb-icon-check {
  font-size: 9px !important;
  color: #ffffff !important;
  display: block !important;
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  line-height: 1 !important;
}

.bp-user
  .widget_bp_profile_completion_widget
  .single_section_wrap:not(.completed)
  .section_ico
  i {
  display: none !important;
}

/* Section Title / Link */
.bp-user
  .widget_bp_profile_completion_widget
  .single_section_wrap
  .section_name {
  flex: 1 !important;
  width: auto !important;
  overflow: visible !important;
}

.bp-user
  .widget_bp_profile_completion_widget
  .single_section_wrap
  .section_name
  a {
  font-family: "InterText", sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--aloha-slate-700) !important;
  text-decoration: none !important;
  transition: color var(--aloha-transition-fast) !important;
}

.bp-user
  .widget_bp_profile_completion_widget
  .single_section_wrap.completed
  .section_name
  a {
  color: var(--aloha-slate-900) !important;
}

.bp-user
  .widget_bp_profile_completion_widget
  .single_section_wrap
  .section_name
  a:hover {
  color: var(--aloha-brand-primary) !important;
}

/* Fraction values (e.g. 3/3, 0/1) - Unclipping and proper alignment */
.bp-user .widget_bp_profile_completion_widget .single_section_wrap .progress {
  height: auto !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.bp-user
  .widget_bp_profile_completion_widget
  .single_section_wrap
  .progress
  .completed_staus {
  height: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  width: auto !important;
  text-align: right !important;
  font-family: "InterText", sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--aloha-slate-500) !important;
  letter-spacing: 0.02em !important;
  display: inline-block !important;
}

.bp-user
  .widget_bp_profile_completion_widget
  .single_section_wrap.completed
  .progress
  .completed_staus {
  color: var(--aloha-brand-primary) !important;
}

/* ==========================================================================
   22. PROFILE SUB-TAB HARMONIZATION (TIMELINE, CONNECTIONS, GROUPS, FORUMS, ASSESSMENT)
   ========================================================================== */

/* General Sub-Controls Across Profile Tabs */
.bp-user #item-body .bb-rl-sub-ctrls {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  padding: 0 0 16px 0 !important;
  border-bottom: 1px solid var(--aloha-slate-200) !important;
}

.bp-user #item-body .subnav-filters {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 100% !important;
  /* gap: 16px !important; */
  flex-wrap: nowrap !important;
}

/* View switcher pill controls */
.bp-user #item-body .bb-rl-grid-filters {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background-color: var(--aloha-slate-100) !important;
  padding: 3px !important;
  border-radius: 8px !important;
  border: 1px solid var(--aloha-slate-200) !important;
}

.bp-user #item-body .bb-rl-grid-filters .layout-view {
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  color: var(--aloha-slate-600) !important;
  background: transparent !important;
  transition: all var(--aloha-transition-fast) !important;
  text-decoration: none !important;
}

.bp-user #item-body .bb-rl-grid-filters .layout-view:hover {
  color: var(--aloha-slate-900) !important;
}

.bp-user #item-body .bb-rl-grid-filters .layout-view.active {
  background-color: var(--aloha-surface-white) !important;
  color: var(--aloha-brand-primary) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
}

/* Sort dropdown in sub-controls */
.bp-user #item-body .select-wrap select {
  height: 38px !important;
  border-radius: var(--aloha-control-radius) !important;
  border: 1px solid var(--aloha-slate-200) !important;
  background-color: var(--aloha-surface-white) !important;
  font-family: "InterText", sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--aloha-slate-700) !important;
  padding: 0 32px 0 12px !important;
  transition: border-color var(--aloha-transition-fast) !important;
}

.bp-user #item-body .select-wrap select:focus {
  border-color: var(--aloha-brand-primary) !important;
  outline: none !important;
}

/* Friendly Empty States across tabs */
.bp-user #item-body aside.bp-feedback.bp-messages.info {
  background-color: var(--aloha-surface-white) !important;
  border: var(--aloha-card-border) !important;
  border-radius: var(--aloha-card-radius) !important;
  box-shadow: var(--aloha-card-shadow) !important;
  padding: 32px 24px !important;
  text-align: center !important;
  margin: 0 0 24px 0 !important;
}

.bp-user #item-body aside.bp-feedback.bp-messages.info p {
  margin: 0 !important;
  font-family: "InterText", sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: var(--aloha-slate-600) !important;
}

/* 22.1 TIMELINE / ACTIVITY TAB */
.bp-user.activity #item-body .activity-head-bar {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
  flex-wrap: wrap !important;
}

.bp-user.activity #item-body .bb-subnav-filters-container-main {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.bp-user.activity #item-body .bb-subnav-filters-label {
  font-family: "InterText", sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--aloha-slate-500) !important;
}

.bp-user.activity #item-body button.subnav-filters-opener {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: var(--aloha-control-radius) !important;
  border: 1px solid var(--aloha-slate-200) !important;
  background-color: var(--aloha-surface-white) !important;
  font-family: "InterText", sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--aloha-slate-700) !important;
  cursor: pointer !important;
  transition: all var(--aloha-transition-fast) !important;
}

.bp-user.activity #item-body button.subnav-filters-opener:hover {
  border-color: var(--aloha-brand-border) !important;
  color: var(--aloha-brand-primary) !important;
}

.bp-user.activity #item-body .subnav-filters-modal {
  border: 1px solid var(--aloha-slate-200) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08) !important;
  background-color: #ffffff !important;
  padding: 6px !important;
}

.bp-user.activity #item-body .subnav-filters-modal ul li a {
  padding: 8px 12px !important;
  border-radius: 6px !important;
  font-family: "InterText", sans-serif !important;
  font-size: 13px !important;
  color: var(--aloha-slate-700) !important;
  transition: background-color var(--aloha-transition-fast) !important;
}

.bp-user.activity #item-body .subnav-filters-modal ul li.selected a {
  background-color: var(--aloha-brand-light) !important;
  color: var(--aloha-brand-primary) !important;
  font-weight: 600 !important;
}

/* Activity Items as Modern Cards */
.bp-user.activity #item-body .bb-rl-activity-list .activity-item {
  background-color: var(--aloha-surface-white) !important;
  border: var(--aloha-card-border) !important;
  border-radius: var(--aloha-card-radius) !important;
  box-shadow: var(--aloha-card-shadow) !important;
  padding: 20px 24px !important;
  margin-bottom: 16px !important;
  transition:
    border-color var(--aloha-transition-base),
    box-shadow var(--aloha-transition-base) !important;
}

.bp-user.activity #item-body .bb-rl-activity-list .activity-item:hover {
  border-color: var(--aloha-brand-border) !important;
  box-shadow: 0 6px 20px rgba(90, 107, 156, 0.08) !important;
}

.bp-user.activity #item-body .bb-rl-activity-head {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 12px !important;
}

.bp-user.activity #item-body .bb-rl-activity-avatar img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--aloha-slate-200) !important;
}

.bp-user.activity #item-body .bb-rl-activity-header p {
  margin: 0 !important;
  font-family: "InterText", sans-serif !important;
  font-size: 14px !important;
  color: var(--aloha-slate-800) !important;
}

.bp-user.activity #item-body .bb-rl-activity-header a {
  font-weight: 600 !important;
  color: var(--aloha-slate-900) !important;
  text-decoration: none !important;
}

.bp-user.activity #item-body .bb-rl-activity-header a:hover {
  color: var(--aloha-brand-primary) !important;
}

.bp-user.activity #item-body .activity-date a {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--aloha-slate-500) !important;
}

/* 22.2 CONNECTIONS TAB */
.bp-user.friends #item-body #members-list.grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.bp-user.friends #item-body #members-list.grid li.item-entry {
  background-color: var(--aloha-surface-white) !important;
  border: var(--aloha-card-border) !important;
  border-radius: var(--aloha-card-radius) !important;
  box-shadow: var(--aloha-card-shadow) !important;
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  transition: all var(--aloha-transition-base) !important;
}

.bp-user.friends #item-body #members-list.grid li.item-entry:hover {
  border-color: var(--aloha-brand-border) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(90, 107, 156, 0.08) !important;
}

/* 22.3 GROUPS TAB */
.bp-user.groups #item-body #groups-list.grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.bp-user.groups #item-body #groups-list.grid li.item-entry {
  background-color: var(--aloha-surface-white) !important;
  border: var(--aloha-card-border) !important;
  border-radius: var(--aloha-card-radius) !important;
  box-shadow: var(--aloha-card-shadow) !important;
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  transition: all var(--aloha-transition-base) !important;
}

.bp-user.groups #item-body #groups-list.grid li.item-entry:hover {
  border-color: var(--aloha-brand-border) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(90, 107, 156, 0.08) !important;
}

/* 22.4 FORUMS TAB */
.bp-user.forums #item-body nav.bb-rl-profile-subnav {
  margin-bottom: 20px !important;
}

.bp-user.forums #item-body nav.bb-rl-profile-subnav ul.subnav {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-wrap: wrap !important;
}

.bp-user.forums #item-body nav.bb-rl-profile-subnav ul.subnav li a {
  display: inline-flex !important;
  align-items: center !important;
  height: 36px !important;
  padding: 0 16px !important;
  border-radius: var(--aloha-pill-radius) !important;
  background-color: var(--aloha-surface-white) !important;
  border: 1px solid var(--aloha-slate-200) !important;
  font-family: "InterText", sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--aloha-slate-600) !important;
  text-decoration: none !important;
  transition: all var(--aloha-transition-fast) !important;
}

.bp-user.forums #item-body nav.bb-rl-profile-subnav ul.subnav li a:hover {
  color: var(--aloha-brand-primary) !important;
  border-color: var(--aloha-brand-border) !important;
}

.bp-user.forums #item-body nav.bb-rl-profile-subnav ul.subnav li.current a,
.bp-user.forums #item-body nav.bb-rl-profile-subnav ul.subnav li.selected a {
  background-color: var(--aloha-brand-light) !important;
  color: var(--aloha-brand-primary) !important;
  border-color: var(--aloha-brand-border) !important;
  font-weight: 600 !important;
}

/* Forum Topics List Card */
.bp-user.forums #item-body #bbpress-forums ul.bbp-topics {
  background-color: var(--aloha-surface-white) !important;
  border: var(--aloha-card-border) !important;
  border-radius: var(--aloha-card-radius) !important;
  box-shadow: var(--aloha-card-shadow) !important;
  overflow: hidden !important;
  margin: 0 0 24px 0 !important;
}

.bp-user.forums #item-body #bbpress-forums li.bbp-header {
  background-color: var(--aloha-slate-50) !important;
  border-bottom: 1px solid var(--aloha-slate-200) !important;
  padding: 12px 20px !important;
  font-family: "InterText", sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--aloha-slate-600) !important;
}

.bp-user.forums #item-body #bbpress-forums li.bbp-body ul.topic {
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--aloha-slate-100) !important;
  transition: background-color var(--aloha-transition-fast) !important;
}

.bp-user.forums #item-body #bbpress-forums li.bbp-body ul.topic:hover {
  background-color: var(--aloha-slate-50) !important;
}

/* 22.5 "MY ASSESSMENT RESULTS" TAB */
/* Neutralize outer container card wrapper so internal result cards sit cleanly */
.bp-user #item-body .npo-assessment-bb-container {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 24px 0 !important;
}

/* ==========================================================================
   23. RESPONSIVE BREAKPOINTS FOR MEMBER PROFILE
   ========================================================================== */

/* Tablet (max-width: 992px) */
@media (max-width: 992px) {
  .bp-user .bb-rl-content-wrapper {
    flex-direction: column !important;
  }

  .bp-user .bb-rl-secondary-container {
    max-width: 100% !important;
    flex: 0 0 100% !important;
    width: 100% !important;
  }

  .bp-user .bb-rl-profile-item-header {
    gap: 18px !important;
  }

  .bp-user.friends #item-body #members-list.grid,
  .bp-user.groups #item-body #groups-list.grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Mobile (max-width: 660px) */
@media (max-width: 660px) {
  .bp-user #item-header.bb-rl-profile-header {
    padding: 20px 18px 0 18px !important;
  }

  .bp-user .bb-rl-profile-item-header {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 14px !important;
    padding-bottom: 18px !important;
  }

  .bp-user .bb-rl-profile-header-content {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  .bp-user .bb-user-content-wrap {
    align-items: center !important;
  }

  .bp-user .bb-rl-profile-header-content .item-meta {
    justify-content: center !important;
  }

  .bp-user .bb-rl-member-header-actions-wrap .bb-rl-member-header-actions {
    justify-content: center !important;
    width: 100% !important;
  }

  .bp-user #item-body .bb-rl-profile-panel {
    padding: 20px 18px !important;
  }

  .bp-user.friends #item-body #members-list.grid,
  .bp-user.groups #item-body #groups-list.grid {
    grid-template-columns: 1fr !important;
  }
}

#subnav {
  width: 100% !important;
}

/* Mobile Responsive */
@media (max-width: 767px) {
  .bp-user #item-body .subnav-filters {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    /* gap: 10px !important; */
    flex-wrap: wrap !important;
  }

  .bp-user #item-body .subnav-filters > * {
    max-width: 30% !important;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .bp-user #item-body .subnav-filters {
    flex-direction: column !important;
    align-items: stretch !important;
    /* gap: 8px !important; */
  }

  .bp-user #item-body .subnav-filters > * {
    width: 30% !important;
  }
}