/* ==========================================================================
   PROFILE UI MODULE
   --------------------------------------------------------------------------
   Purpose:
   - Styles BuddyBoss profile field layouts, investor profile components,
     portfolio cards, languages-spoken pills, Select2-enhanced fields, and
     profile edit mode UI
   - Provides consistent spacing, readability, and visual hierarchy across all
     BuddyBoss profile widgets
   - Isolates profile-specific UI from directory, snapshots, luminary, and
     global form modules

   Exclusions:
   - No directory styling (belongs in directory.css)
   - No snapshot styling (belongs in snapshots.css)
   - No Luminary profile UI (belongs in luminary.css)
   - No Gravity Forms styling (belongs in forms.css)
   - No BuddyBoss navigation/layout overrides (belongs in buddyboss-overrides.css)

   Related JS:
   - profile.js (toggle interactions, dynamic field behavior)
   - select2.js (enhanced multi-select fields)

   Sections:
   1. Investor Profile – Investment Focus
   2. Investor Profile – Portfolio Cards
   3. Languages Spoken Pills
   4. Select2 Overrides
   5. Profile Edit Mode
   6. Utility Layout Cleanup
   7. Profile Navigation Visibility
   
   ========================================================================== */

/* ==========================================================================
   Investor Profile – Venture Focus Fieldset
   ========================================================================== */

/* Grid layout for the cards */
.investment-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 24px;
  margin-bottom: 48px;
}

/* Individual card */
.investment-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 32px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  border-left: 4px solid #0073aa;
}

/* Soft background tint per category */
.investment-card.stage {
  background-color: #f6fcf9;
}

.investment-card.industry {
  background-color: #f7faff;
}

.investment-card.geography {
  background-color: #fff7f8;
}

/* Card heading */
.investment-card h4 {
  font-size: 1.1rem;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #222;
  font-weight: 600;
}

/* Pill container */
.pill-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Base pill styling */
.pill {
  background: #e0e0e0;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
  box-shadow: none;
  transition: background 0.3s ease;
}

/* Category-specific pill colors */
.investment-card.stage .pill {
  background-color: #d1e7dd;
  color: #1b4d3e;
}

.investment-card.industry .pill {
  background-color: #cfe2ff;
  color: #003366;
}

.investment-card.geography .pill {
  background-color: #f8d7da;
  color: #6b1f1f;
}

/* Hover states */
.investment-card.stage .pill:hover {
  background-color: #c4dbd2;
}

.investment-card.industry .pill:hover {
  background-color: #b8d4ff;
}

.investment-card.geography .pill:hover {
  background-color: #f3c2c7;
}

/* --- Portfolio Card - Investor Profile --- */
.portfolio-grid {
  background-color: #f5f7fa;
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

/* Generic styling for all portfolio cards */
.portfolio-card {
  background-color: #f0f6ff; /* matches industry focus card */
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  border-left: 4px solid #0073aa;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Card content */
.portfolio-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: #222;
}

.portfolio-meta {
  font-size: 0.85rem;
  color: #555;
}

/* Pill container */
.portfolio-meta .pill-wrap {
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;   /* horizontal spacing between pills */
  row-gap: 8px;       /* vertical spacing between wrapped rows */
  margin-top: 8px;    /* spacing from content above */
}

/* Pill styling */
.portfolio-meta .pill {
  background: #e0e0e0;
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  margin: 0; /* reset any conflicting margins */
  flex: 0 1 auto;
  min-height: 28px;
}

/* Category-specific pill colors */
.pill.industry {
  background-color: #cfe2ff !important;
  color: #003366 !important;
}

.pill.stage {
  background-color: #d1e7dd !important;
  color: #1b4d3e !important;
}

.pill.location {
  background-color: #f8d7da !important;
  color: #6b1f1f !important;
}

/* Hover effects */
.pill.industry:hover {
  background-color: #b8d4ff !important;
}

.pill.stage:hover {
  background-color: #c4dbd2 !important;
}

.pill.location:hover {
  background-color: #f3c2c7 !important;
}

/* Portfolio link */
.portfolio-link {
  font-weight: 500;
  color: #0073aa;
  text-decoration: none;
  margin-top: 8px;
}

.portfolio-link:hover {
  text-decoration: underline;
}

.portfolio-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* — Override Generic Pills for the Languages-Spoken Section in Buddyboss Profile — */
/* === LANGUAGES: full-width row & no wrap === */
.profile-languages-spoken {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin: 0.5rem 0 0 0 !important;
    flex-basis: 100% !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
}

/* === LANGUAGES: pill styling === */
.profile-languages-spoken .pill {
    background-color: #f0f0f0 !important;
    border-radius: 12px !important;
    padding: 4px 8px !important; /* increased vertical padding */
    font-size: 13px !important;
    color: #333 !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    line-height: 1.2 !important; /* ensures consistent vertical centering */
}


/* Optional: retain if you still need a bold label */
.profile-languages-spoken .label {
    font-weight: bold !important;
    margin-right: 8px !important;
}

/* ==========================================================================
   Hide the original BuddyBoss checkbox list when Select2 is injected
   ========================================================================== */
/* Hide original checkbox containers for both markup types */
.bb-profile-select2 + .input-options.checkbox-options,
.bb-profile-select2 ~ .bp-checkbox-wrap {
  display: none !important;
}

/* Make the Select2 box match BuddyBoss form fields */
/* 1. Style the Select2 box to match BuddyBoss inputs */
.bb-profile-select2 ~ .select2-container--default .select2-selection--multiple {
  border: 1px solid #d5dadf;
  border-radius: 6px;
  padding: 8px;
  min-height: 48px;
}

/* 2. Style the pills to use #eee background and black text */
.select2-container--default .select2-selection__choice {
  background-color: #eee !important;
  color: #000 !important;
  border: none !important;
  border-radius: 100px !important;
  padding: 2px 8px !important;
  margin-right: 4px !important;
}

/* 3. Style the remove “×” icon in black */
.select2-container--default .select2-selection__choice__remove {
  color: #000 !important;
  margin-right: 5px;
}

/* Make the “×” remove icon on Select2 pills visible */
.select2-container--default .select2-selection__choice__remove {
  color: #333 !important;       /* or use #000 for pure black */
  opacity: 1 !important;        /* ensure it isn’t faded */
  font-size: 1em !important;    /* bump the size if you want */
  margin-left: 4px !important;  /* space it out from the text */
  cursor: pointer !important;   /* make it clear it’s clickable */
}

/* Optional: highlight remove icon on hover */
.select2-container--default .select2-selection__choice:hover 
  .select2-selection__choice__remove {
  color: #000 !important;
  opacity: 1 !important;
}

/* 1) Remove the default list marker on each Select2 pill */
.select2-container--default 
  .select2-selection__choice {
  list-style: none !important;
}

/* 2) Nuke any ::marker content (the pipe) */
.select2-container--default 
  .select2-selection__choice::marker {
  content: none !important;
}

/* 3) Remove any separator added via ::before or ::after on Select2 pills */
body 
  .select2-container--default 
    .select2-selection__rendered 
      .select2-selection__choice::after {
  content: none !important;
}

/* 4) ALSO remove any separator on the remove-icon span itself */
.select2-container--default 
  .select2-selection__choice__remove {
  /* zap any borders */
  border: none !important;
  /* zap any background graphic that might look like a line */
  background: none !important;
  /* tighten the padding so you don’t get ghost edges */
  padding: 0 4px !important;
}

/* 5) Nuke any ::before/::after on the remove-icon */
.select2-container--default 
  .select2-selection__choice__remove::before,
.select2-container--default 
  .select2-selection__choice__remove::after {
  content: none !important;
}

/* === FIX: Prevent “×” icon from overlapping first letter === */

/* 1. Adjust pill padding to reserve space for icon */
.select2-container--default .select2-selection__choice {
  padding: 2px 8px 2px 20px !important; /* left padding increased */
  position: relative !important;
}

/* 2. Position the remove icon absolutely inside the pill */
.select2-container--default .select2-selection__choice__remove {
  position: absolute !important;
  left: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #333 !important;
  font-size: 14px !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  z-index: 1 !important;
}

/* 3. Optional: hover effect */
.select2-container--default .select2-selection__choice:hover 
  .select2-selection__choice__remove {
  color: #000 !important;
}

/* ==========================================================================
   Profile Bio – Overview Toggle (Read More)
   ========================================================================== */

/* Collapsed bio container */
.overview-wrapper {
  max-height: 300px;
  overflow: hidden;
  position: relative;
  transition: max-height 0.4s ease;
}

/* Gradient fade at bottom */
.overview-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
  pointer-events: none;
}

/* Expanded state removes height limit and fade */
.overview-wrapper.expanded {
  max-height: none;
}

.overview-wrapper.expanded::after {
  display: none;
}

/* Read More / Read Less button */
.overview-toggle {
  display: inline-block;
  margin: 12px 0;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 500;
  color: #fff !important;
  background-color: #385dff !important; /* BuddyBoss primary blue */
  border: 1px solid #385dff !important;
  border-radius: 7px !important;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s linear;
}

/* Hover state */
.overview-toggle:hover {
  background-color: #2f4ed6 !important;
}


/* ==========================================================================
   Profile Edit Mode – Field Legend Styling
   ========================================================================== */

#buddypress #profile-edit-form .editfield fieldset legend,
#buddypress #profile-edit-form .bp-repeater-loop-item .editfield fieldset legend {
    font-size: 1.15em !important;
    font-weight: bold !important;
    color: var(--bb-heading-text-color, #333) !important;
    margin-bottom: 10px !important;
    display: block !important;
}

/* Specific override for Start Date - End Date */
#buddypress #profile-edit-form .editfield.field_4118 fieldset legend {
    font-size: 1.15em !important;
    font-weight: bold !important;
    color: var(--bb-heading-text-color, #333) !important;
    margin-bottom: 10px !important;
    display: block !important;
}

/* ==========================================================================
   Utility Layout Cleanup - Followers / Following layout
   ==========================================================================  */

.followers-wrap,
.following-wrap {
    display: flex !important;
    align-items: center !important;
    flex: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   Utility Layout Cleanup
   ==========================================================================  */
   
   /*
* This new approach uses a general rule to hide all labels,
* and then an override to specifically make the "Basic Info" labels visible.
* This is more robust against other conflicting CSS rules.
*/
td.label {
    display: none !important;
}

/* Show labels in Account Setup, Profile Details, and Social Media */
.bp-widget.account-setup td.label,
.bp-widget.profile-details td.label,
.bp-widget.social-media td.label {
    display: table-cell !important;
}


td.data {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

td.data p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

tr[class*="field_"] td {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

tr[class*="field_"] {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-bottom: none !important;
}

.bp-widget.overview td.data p {
    margin: 0 0 10px !important;
    line-height: 1.6 !important;
}

.bp-widget.overview td.data p:last-child {
    margin-bottom: 0 !important;
}

/* ==========================================================================
   Profile Navigation Visibility Overrides
   --------------------------------------------------------------------------
   Purpose:
   - Hide or adjust visibility of specific BuddyBoss profile navigation tabs
   - Applies globally across all user profiles
   ========================================================================== */

#buddypress #profile-nav ul li.xprofile-additional-information {
    display: none !important;
}