/* ==========================================================================
   BUDDYBOSS OVERRIDES MODULE
   --------------------------------------------------------------------------
   Purpose:
   - Correct, normalize, or enhance BuddyBoss default UI components
   - Fix layout issues, spacing inconsistencies, and visibility bugs
   - Override BuddyBoss navigation, edit-mode UI, repeater fields, and headers
   - Provide universal BuddyBoss-specific utilities used across all profiles

   Exclusions:
   - No profile-specific UI (belongs in profile-ui.css)
   - No snapshot UI (belongs in snapshots.css)
   - No listing or directory UI (belongs in directory.css)
   - No GravityForms or GravityView styling (belongs in forms.css)
   - No page-specific overrides (belongs in pages.css)

   Related JS:
   - profile.js (BuddyBoss profile enhancements)
   - core.js (global utilities that interact with BuddyBoss DOM)

   Sections:
   1. BuddyBoss header layout fixes
   2. Repeater field fixes
   3. Profile navigation (desktop)
   4. Profile navigation (mobile)
   5. BuddyBoss v2 navigation
   6. “More” dropdown styling
   7. High-specificity tab overrides
   8. BuddyBoss overflow fixes
   9. Enlarge font size and add bold to menu items on mobile
  10. Make dropdown arrows on mobile menu more visible
  11. Place dropdown arrows on mobile menu next to menu items and rotate menu arrow when expanded
  12. Disable FAQ input
  13. Fix Connect button overlap with profile type tag on mobile
  14. Fix the followers/following line to stay horizontal on mobile
  15. Change color, font-weight of Connect button on profile page

   ========================================================================== */

/* ==========================================================================
   1. BuddyBoss Header Layout Fixes
   --------------------------------------------------------------------------
   Purpose:
   - Correct spacing, alignment, and positioning issues in BuddyBoss headers
   - Applies to member header meta containers across all profile types
   ========================================================================== */
   
/* Adjust header meta container positioning and padding */
#buddypress #member-header #item-header-content #item-header-meta {
    position: relative;
    padding-top: 0;
}

/* Header action positioning  */
.users-header #item-header-content {
    position: relative !important;
}

.users-header #item-header-content .member-header-actions-wrap {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    margin: 0 !important;
    align-self: auto !important;
}


/* ==========================================================================
   2. Repeater field fixes
   ========================================================================== */

.repeater_tools a.repeater_set_edit::before,
.repeater_tools a.repeater_set_delete::before {
    opacity: 1 !important;
}

.repeater_tools i.dashicons {
    display: inline-block !important;
}

#buddypress .bp-repeater-loop-item .repeater_tools {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 15px !important;
    flex-wrap: wrap !important;
}

#buddypress .bp-repeater-loop-item .item-actions {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
}

#buddypress .bp-repeater-loop-item .item-actions .repeater_set_delete,
#buddypress .bp-repeater-loop-item .item-actions .bp-repeater-remove-item,
#buddypress .repeater_tools > .repeater_set_delete,
#buddypress .repeater_tools > .bp-repeater-remove-item,
#buddypress .bp-repeater-loop-item .item-actions a.delete-button,
#buddypress .bp-repeater-loop-item a.bp-repeater-remove-item,
#buddypress .bp-repeater-loop-item .bp-delete-button,
#buddypress .bp-repeater-loop-item .item-actions .bb-icon-trash-alt:before,
#buddypress .bp-repeater-loop-item .item-actions .dashicons-trash:before {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    cursor: pointer !important;
    font-size: 1.2em !important;
    color: rgb(155, 156, 159) !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
    min-width: 20px !important;
    min-height: 20px !important;
}

#buddypress .bp-repeater-loop-item .item-actions .repeater_set_delete i,
#buddypress .bp-repeater-loop-item .item-actions .repeater_set_delete svg,
#buddypress .bp-repeater-loop-item .item-actions .bp-repeater-remove-item i,
#buddypress .bp-repeater-loop-item .item-actions .bp-repeater-remove-item svg,
#buddypress .repeater_tools > .repeater_set_delete i,
#buddypress .repeater_tools > .bp-repeater-remove-item i,
#buddypress .repeater_tools > .bp-repeater-remove-item svg,
#buddypress .bp-repeater-loop-item .item-actions a.delete-button i,
#buddypress .bp-repeater-loop-item .item-actions a.delete-button svg,
#buddypress .bp-repeater-loop-item a.bp-repeater-remove-item i,
#buddypress .bp-repeater-loop-item a.bp-repeater-remove-item svg,
#buddypress .bp-repeater-loop-item .bp-delete-button i,
#buddypress .bp-repeater-loop-item .bp-delete-button svg {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 1em !important;
    line-height: 1 !important;
}

/* ==========================================================================
   3. Profile navigation – universal desktop (ORIGINAL PILL DESIGN)
   ========================================================================== */

nav#object-nav ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    list-style: none !important;
}

nav#object-nav ul li {
    margin: 0 5px 5px 0 !important;
}

nav#object-nav ul li a {
    background-color: #ffffff !important;
    color: #000000 !important;
    padding: 10px 20px !important;
    border-radius: 25px !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border-bottom: none !important;
}

nav#object-nav ul li.current a,
nav#object-nav ul li a:hover {
    background-color: #004F7A !important;
    color: #FFFFFF !important;
    border-color: #004F7A !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-1px) !important;
}

/* ==========================================================================
   4. BuddyBoss Profile Navigation Overrides (V2 wrappers)
   ========================================================================== */

.bb-template-v2 nav#object-nav > ul > li > a {
    background-color: #f0f0f0 !important;
    color: #333 !important;
    padding: 10px 16px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: none !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
    border: none !important;
    box-shadow: none !important;
    line-height: 1.4 !important;
}

.bb-template-v2 nav#object-nav > ul > li.selected > a,
.bb-template-v2 nav#object-nav > ul > li > a:hover {
    background-color: #0077B5 !important;
    color: #fff !important;
    border: none !important;
}

.bb-template-v2 nav#object-nav > ul > li.selected > a {
    border-bottom: none !important;
}

/* ==========================================================================
   5. BuddyBoss Mobile Nav Adjustments (≤ 768px)
   ========================================================================== */

@media (max-width: 768px) {
    .bb-template-v2 nav#object-nav ul {
        justify-content: flex-start !important;
        gap: 6px !important;
        margin-bottom: 10px !important;
    }

    .bb-template-v2 nav#object-nav ul li a {
        font-size: 13px !important;
        padding: 8px 12px !important;
        border-radius: 6px !important;
        background-color: #f0f0f0 !important;
        color: #333 !important;
    }

    .bb-template-v2 nav#object-nav ul li.selected a,
    .bb-template-v2 nav#object-nav ul li a:hover {
        background-color: #0077B5 !important;
        color: #fff !important;
    }

    .bb-template-v2 nav#object-nav > ul > .selected > a {
        border-bottom: none !important;
    }
}

/* ==========================================================================
   6. “More” dropdown styling – ORIGINAL DESIGN
   ========================================================================== */

.sub-menu.bb_more_dropdown li a {
    background-color: #f0f0f0 !important;
    color: #333 !important;
    padding: 10px 16px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: none !important;
    border: none !important;
    box-shadow: none !important;
    line-height: 1.4 !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
    display: block !important;
    text-decoration: none !important;
}

.sub-menu.bb_more_dropdown li a:hover,
.sub-menu.bb_more_dropdown li.current a {
    background-color: #0077B5 !important;
    color: #fff !important;
}

/* Add spacing between More dropdown items */
.sub-menu.bb_more_dropdown li {
    margin-bottom: 6px !important;
}

/* ==========================================================================
   7. Edit Mode Subnav Tabs (RESTORED)
   ========================================================================== */

/* FORCE OVERRIDE OF BUDDYBOSS TAB BUTTONS */
#buddypress #profile-edit-form ul.button-tabs.button-nav li a {
  all: unset !important;
  display: inline-block !important;
  padding: 4px 10px !important;
  margin: 2px !important;
  border: 1px solid #ccc !important;
  border-radius: 0 !important;
  background: #f8f8f8 !important;
  color: #333 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}


/* ACTIVE + HOVER */
#buddypress #profile-edit-form ul.button-tabs.button-nav li.current a,
#buddypress #profile-edit-form ul.button-tabs.button-nav li a:hover {
  background: #DBEEF8 !important;
  color: #0077B5 !important;
  border-color: #0077B5 !important;
}


/* FIX LI SPACING */
#buddypress #profile-edit-form ul.button-tabs.button-nav li {
  margin: 2px !important;
  padding: 0 !important;
  height: auto !important;
}


/* FIX UL SPACING */
#buddypress #profile-edit-form ul.button-tabs.button-nav {
  margin: 10px 0 !important;
  padding: 0 !important;
  gap: 4px !important;
}

/* ==========================================================================
   8. High-Specificity Tab Style Matching (RESTORED)
   ========================================================================== */

.bb-template-v2 .buddypress-wrap nav#object-nav > ul > li > a {
    display: flex !important;
    align-items: center !important;
    padding: 0 15px !important;
    line-height: 29px !important;
    border-radius: 6px !important;
    border: 1px solid transparent !important;
    background-color: var(--bb-content-alternate-background-color) !important;
    color: var(--bb-body-body-text-color) !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

.bb-template-v2 .buddypress-wrap nav#object-nav > ul > li.selected > a,
.bb-template-v2 .buddypress-wrap nav#object-nav > ul > li > a:hover {
    background-color: #555 !important;
    color: #fafafa !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   9.  Enlarge font size and add bold to menu items on mobile
   ========================================================================== */
@media (max-width: 768px) {
    .bp-menu a span,
    .menu-item a span,
    .menu-item a .link-text {
        font-size: 16px !important;
        font-weight: 600 !important;
    }
}

/* ==========================================================================
   10.  Make dropdown arrows on mobile menu more visible
   ========================================================================== */
@media (max-width: 768px) {
    .menu-item .bb-icon-angle-down,
    .menu-item .bs-submenu-toggle {
        color: #111 !important;
        opacity: 1 !important;
        text-shadow: 0 0 1px #111 !important;
    }
}


/* ==========================================================================
   11. Mobile Menu: Arrow Next to Text + Rotation + Active Background
   ========================================================================== */
@media (max-width: 768px) {

    /* 1. Remove BuddyBoss blue highlight from active item */
    .side-panel-menu .current-menu-item > a,
    .side-panel-menu .current_page_item > a {
        background: none !important;
        color: inherit !important;
    }

    /* 2. Collapse menu item width so arrow sits next to text */
    .side-panel-menu .menu-item > a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        width: auto !important;
        padding: 10px 16px !important;
    }

    /* 3. Arrow next to text */
    .side-panel-menu .menu-item .bb-icon-angle-down,
    .side-panel-menu .menu-item .bs-submenu-toggle {
        margin-left: 4px !important;
        margin-right: 0 !important;
        position: static !important;
        transition: transform 0.25s ease;
    }

    /* 4. Rotate arrow when submenu is open */
    .side-panel-menu .menu-item.menu-item-has-children.open > a .bb-icon-angle-down,
    .side-panel-menu .menu-item.menu-item-has-children.open > a .bs-submenu-toggle {
        transform: rotate(180deg);
    }


    /* 5. Force icon to show even when 'Profile' is active */
    .side-panel-menu .current-menu-item > a > i,
    .side-panel-menu .current_page_item > a > i {
        display: inline-block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

	/* 6. Prevent icon flicker when switching between items */
	.side-panel-menu a > i {
    transition: opacity 0.2s ease;
	}
}

	/* ==========================================================================
   12. Disable FAQ field input
   ========================================================================== */
	/* GENZ VC — Disable FAQ input field in edit mode */
#profile-edit-form.faq #field_2850 {
  display: none !important;
}
	#profile-edit-form.faq #field-visibility-settings-toggle-2850 {
  display: none !important;
}
	#profile-edit-form.faq #field-visibility-settings-2850 {
  display: none !important;
}

/* GENZ VC — Hide Save Changes button on FAQ edit screen */
#profile-edit-form.faq .submit {
  display: none !important;
}


	/* ==========================================================================
   13. Fix Connect button overlap with profile type tag on mobile
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* 1. Force the parent container to stop pinning the buttons */
    #buddypress #item-header-cover-image #item-header-content .flex {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        position: relative !important;
    }

    /* 2. THE OVERRIDE: Strip all absolute positioning, transforms, and floats */
    #buddypress #item-header-cover-image .member-header-actions-wrap {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        margin: 15px auto !important;
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        float: none !important;
        z-index: 99 !important;
    }

    /* 3. Ensure the buttons stay side-by-side inside the centered block */
    #buddypress .member-header-actions-wrap .action {
        display: inline-flex !important;
        margin: 0 8px !important;
        float: none !important;
    }

    /* 4. Center the name block and headline */
    #buddypress .bb-user-content-wrap,
    #buddypress .member-title-wrap,
    #buddypress .profile-header-custom {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* 5. Space the headline clearly under the buttons */
    #buddypress .profile-header-custom {
        margin-top: 10px !important;
    }	
}

	/*=============================================================================
   14. Fix the followers/following line to stay horizontal on mobile
   ========================================================================== */
@media screen and (max-width: 768px) {
    #buddypress .member-social .flex {
        flex-direction: row !important;
        justify-content: center !important;
        gap: 15px !important; /* Adds space between the two numbers */
        width: 100% !important;
        display: flex !important;
    }

    #buddypress .followers-wrap, 
    #buddypress .following-wrap {
        width: auto !important;
        margin: 0 !important;
    }
}

	/*=============================================================================
   15. Change color, font-weight of Connect button on profile page
   ========================================================================== */
	/* BuddyBoss Connect button styling */
.friendship-button.not_friends button {
  background-color: #0B84FF;   /* change to your preferred color */
  color: #fff;                 /* text color */
  font-size: 16px;             /* adjust size */
  font-weight: 500;            /* adjust weight */
}