/* ======================================================
   GF Hearts — BuddyPress UI overrides
   No BP template files are overridden. CSS + hooks only.
   ====================================================== */

/* BuddyX's own compiled buddypress.min.css styles [data-bp-tooltip]::after (dark
   pill, opacity:0 at rest) but never ships the :hover/:focus rule that flips it to
   visible - that trigger normally comes from BuddyPress core's bp-tooltips.css,
   which isn't enqueued here (BuddyX ships its own consolidated stylesheet instead
   of relying on bp-nouveau's default asset chain). Without this, every
   data-bp-tooltip element (messages/notifications icons, color-mode toggle, GF
   Meter badges) renders the pill markup but it never actually becomes visible. */
[data-bp-tooltip]:hover::after,
[data-bp-tooltip]:focus::after,
[data-bp-tooltip]:active::after {
  opacity: 1;
}

/* Same file only sets position:absolute on the pseudo-element with no top/left -
   BuddyPress core's (missing) bp-tooltips.css would normally supply that default
   placement, so without it the tooltip falls back to its "static position" (roughly
   wherever it would have flowed in-line), which overlaps the icon in some contexts
   and happens to clear it in others depending on surrounding markup. Pin it below
   the anchor explicitly so it's consistent everywhere. Excludes the
   data-bp-tooltip-pos="right" variant, which already gets its own explicit position. */
[data-bp-tooltip]:not([data-bp-tooltip-pos="right"])::after {
  top: 100%;
  left: 50%;
  margin-top: 8px;
  transform: translateX(-50%);
}

/* --- Member directory cards ---
   Selectors require both #members-list AND .members-list because the
   Groups "Manage Members" admin screen reuses id="members-list" for an
   unrelated single-line list; the class only appears on the real directory. */
#members-list.members-list li,
.member-type-list .member {
  background-color: var(--gfh-surface);
  border-radius: var(--gfh-radius-card);
  border: 1px solid color-mix(in srgb, var(--gfh-teal) 12%, transparent);
  transition: box-shadow 0.2s, border-color 0.2s;
  overflow: hidden;
}

#members-list.members-list li:hover {
  border-color: var(--gfh-primary);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--gfh-teal) 10%, transparent);
}

#members-list.members-list .item-title a,
.member .item-title a {
  font-family: var(--gfh-font-body);
  font-weight: 700;
  color: var(--gfh-teal);
  text-decoration: none;
  transition: color 0.2s;
}

#members-list.members-list .item-title a:hover {
  color: var(--gfh-primary);
}

/* Compact badge sits inline after the name */
.item-title .gfh-badge--compact {
  margin-left: 0.3rem;
}

/* --- Profile header ---
   border-radius needs !important: bp-nouveau has a blanket
   "body #buddypress div { border-radius: 2px }" rule whose ID-based
   specificity otherwise beats this. */
#item-header,
.bp-member-header {
  background-color: var(--gfh-bg);
  border-radius: var(--gfh-radius-card) !important;
  padding: 1.5rem;
  color: var(--gfh-teal);
}

#item-header-avatar img,
#item-header .avatar,
.bp-member-header .avatar {
  border-radius: 50%;
  border: 3px solid var(--gfh-primary);
}

/* !important required: BP core injects a dynamic inline <style> block
   (sourceURL=bp-nouveau-inline-css) with "#buddypress div#item-header-cover-image h2"
   forcing white text + a dark text-shadow for legibility over cover photos.
   Its double-ID selector outranks anything here, and now that the cover
   fallback is cream instead of teal, white-on-cream is unreadable. */
#item-header #item-header-content h1,
#item-header .user-nicename {
  font-family: var(--gfh-font-display);
  color: var(--gfh-teal) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

.gfh-profile-badge {
  margin-top: 0.6rem;
}

/* Cover image banner: BP renders this as a separate gray placeholder div
   layered above #item-header, so without a rule here every profile/group
   header shows a mismatched gray block until the member uploads a photo.
   Cream (not teal) so it doesn't clash with the orange GF status badge. */
#header-cover-image {
  background-color: var(--gfh-bg);
}

#item-header .item-meta,
#item-header .item-meta .activity {
  color: var(--gfh-text-muted);
}

/* --- Activity feed --- */
#activity-stream li.activity-item {
  background-color: var(--gfh-surface);
  border-radius: var(--gfh-radius-card);
  border: 1px solid color-mix(in srgb, var(--gfh-teal) 10%, transparent);
  margin-bottom: 1rem;
  padding: 1rem;
}

.activity-meta a {
  background-color: var(--gfh-accent) !important;
  color: #fff !important;
  border-radius: var(--gfh-radius-pill) !important;
  border: none !important;
  font-family: var(--gfh-font-body);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.35rem 0.9rem !important;
  text-decoration: none !important;
  transition: opacity 0.2s;
}

.activity-meta a:hover {
  opacity: 0.85;
}

/* --- Profile navigation tabs --- */
#object-nav ul,
#subnav ul {
  border-bottom: 2px solid color-mix(in srgb, var(--gfh-teal) 15%, transparent);
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

#object-nav li a,
#subnav li a {
  display: block;
  padding: 0.6rem 1rem;
  font-family: var(--gfh-font-body);
  font-size: 0.9rem;
  color: var(--gfh-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.2s, border-color 0.2s;
}

#object-nav li.current a,
#object-nav li a:hover,
#subnav li.current a,
#subnav li a:hover {
  color: var(--gfh-primary);
  border-bottom-color: var(--gfh-primary);
}

/* --- Action buttons (Add Friend, Send Message, Follow, etc.) --- */
.generic-button a,
.friendship-button a,
.follow-button a,
.bp-send-message a,
.message-button a,
#send-message-button a {
  background-color: var(--gfh-accent) !important;
  color: #fff !important;
  border-radius: var(--gfh-radius-pill) !important;
  border: none !important;
  font-family: var(--gfh-font-body);
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.2s;
}

.generic-button a:hover,
.friendship-button a:hover {
  opacity: 0.85;
}

/* --- Generic .button links & buttons (Delete Photo, promote/demote, leave
   group, Generate/Hide/Cancel password on Settings > General, etc.) ---
   BuddyPress/WP core reuse a plain .button class on <a> and <button>
   elements that aren't wrapped in .generic-button/.friendship-button and
   aren't real <input> elements, so they need their own catch-all. The
   password-generator buttons in particular borrow wp-admin's markup, which
   has no styling at all on the logged-in front end. Scoped to #buddypress
   since .button is generic enough to appear in non-BP markup. */
#buddypress a.button,
#buddypress button.button {
  background-color: var(--gfh-accent) !important;
  color: #fff !important;
  border-radius: var(--gfh-radius-pill) !important;
  border: none !important;
  font-family: var(--gfh-font-body);
  font-weight: 700;
  padding: 0.35rem 0.9rem;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s;
}

#buddypress a.button:hover,
#buddypress button.button:hover {
  opacity: 0.85;
}

/* --- Directory search & sort bar ---
   bp-nouveau targets these with .buddypress-wrap-prefixed, multi-class
   selectors that outrank the theme's generic input/select rules, so the
   search box and "Order by" dropdown need matching selectors here. */
.buddypress-wrap form.bp-dir-search-form,
.buddypress-wrap form.bp-messages-search-form,
.buddypress-wrap form#group-members-search {
  border: 1.5px solid color-mix(in srgb, var(--gfh-teal) 25%, transparent);
  border-radius: 10px;
  background-color: var(--gfh-surface);
  overflow: hidden;
}

.buddypress-wrap form.bp-dir-search-form input[type="search"],
.buddypress-wrap form.bp-messages-search-form input[type="search"],
.buddypress-wrap form#group-members-search input[type="search"] {
  font-family: var(--gfh-font-body);
  color: var(--gfh-text);
}

.buddypress-wrap form.bp-dir-search-form button[type="submit"],
.buddypress-wrap form.bp-messages-search-form button[type="submit"],
.buddypress-wrap form#group-members-search button[type="submit"] {
  color: var(--gfh-accent) !important;
}

.buddypress-wrap .select-wrap {
  border: 1.5px solid color-mix(in srgb, var(--gfh-teal) 25%, transparent);
  border-radius: 10px !important;
  background-color: var(--gfh-surface);
  padding: 0 0.25rem;
}

.buddypress-wrap .select-wrap select {
  font-family: var(--gfh-font-body);
  color: var(--gfh-text);
}

.buddypress-wrap .select-wrap .select-arrow:before {
  color: var(--gfh-accent);
}

/* Profile visibility dropdowns (Settings > Profile) aren't wrapped in
   .select-wrap, so ".standard-form select { padding: 3px }" squashes the
   theme's normal select padding; restore it here. */
.buddypress-wrap .standard-form select {
  padding: 0.5rem 1.75rem 0.5rem 0.9rem !important;
}

/* --- Pagination --- */
.buddypress-wrap .bp-pagination {
  color: var(--gfh-text-muted);
  font-family: var(--gfh-font-body);
}

.buddypress-wrap .bp-pagination-links a,
.buddypress-wrap .bp-pagination-links span.current {
  color: var(--gfh-teal);
  text-decoration: none;
}

.buddypress-wrap .bp-pagination-links span.current {
  font-weight: 700;
  color: var(--gfh-primary);
}

.buddypress-wrap .bp-pagination-links a:hover {
  color: var(--gfh-primary);
}

/* --- Feedback / notice banners (empty states, errors, info) ---
   Generalizes what was previously only styled on the register page, since
   BuddyPress renders the same .bp-feedback markup on every screen: empty
   directories, form errors, the Messages Backbone UI, etc. Selectors are
   prefixed with .buddypress-wrap to match bp-nouveau's own specificity. */
.buddypress-wrap .bp-feedback {
  background: var(--gfh-surface);
  border-radius: 8px !important;
  margin-bottom: 1.25rem;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  font-family: var(--gfh-font-body);
  box-shadow: none;
}

.buddypress-wrap .bp-feedback.info,
.buddypress-wrap .bp-feedback.loading {
  background: color-mix(in srgb, var(--gfh-accent) 10%, transparent);
  color: var(--gfh-teal);
  border: 1px solid color-mix(in srgb, var(--gfh-accent) 25%, transparent);
}

.buddypress-wrap .bp-feedback.error {
  background: color-mix(in srgb, var(--gfh-meter-low) 10%, transparent);
  color: var(--gfh-meter-low);
  border: 1px solid color-mix(in srgb, var(--gfh-meter-low) 25%, transparent);
}

.buddypress-wrap .bp-feedback.updated {
  background: color-mix(in srgb, var(--gfh-meter-high) 10%, transparent);
  color: var(--gfh-meter-high);
  border: 1px solid color-mix(in srgb, var(--gfh-meter-high) 25%, transparent);
}

/* --- Groups directory cards --- */
#groups-list li.item-entry {
  background-color: var(--gfh-surface);
  border-radius: var(--gfh-radius-card);
  border: 1px solid color-mix(in srgb, var(--gfh-teal) 12%, transparent);
  padding: 1rem;
  margin-bottom: 1rem;
  transition: box-shadow 0.2s, border-color 0.2s;
}

#groups-list li.item-entry:hover {
  border-color: var(--gfh-primary);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--gfh-teal) 10%, transparent);
}

#groups-list .groups-title a {
  font-family: var(--gfh-font-body);
  font-weight: 700;
  color: var(--gfh-teal);
  text-decoration: none;
}

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

#groups-list .group-details,
#groups-list .last-activity {
  color: var(--gfh-text-muted);
  font-size: 0.85rem;
}

/* --- Group creation wizard steps --- */
#group-create-tabs .group-create-buttons {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  border-bottom: 2px solid color-mix(in srgb, var(--gfh-teal) 15%, transparent);
}

#group-create-tabs .group-create-buttons li {
  background: none !important;
  border: none !important;
  padding: 0.6rem 1rem;
  font-family: var(--gfh-font-body);
  font-size: 0.9rem;
  color: var(--gfh-text-muted);
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px;
}

#group-create-tabs .group-create-buttons li a {
  color: inherit;
  text-decoration: none;
}

#group-create-tabs .group-create-buttons li.current {
  color: var(--gfh-primary) !important;
  font-weight: 700;
  border-bottom: 2px solid var(--gfh-primary) !important;
}

/* --- Group "Manage Members" admin screen --- */
.groups-manage-members-list .section-title {
  background: color-mix(in srgb, var(--gfh-teal) 8%, transparent);
  color: var(--gfh-teal);
  font-family: var(--gfh-font-body);
  font-weight: 700;
  padding: 0.5rem 0.75rem;
}

.groups-manage-members-list ul li:nth-child(even) {
  background: color-mix(in srgb, var(--gfh-teal) 4%, transparent);
}

/* --- Messages: thread list --- */
#message-threads li.selected {
  background-color: color-mix(in srgb, var(--gfh-accent) 6%, transparent);
}

#message-threads li.selected .thread-subject .subject {
  color: var(--gfh-primary);
}

#message-threads li .thread-subject .subject {
  color: var(--gfh-teal);
  font-family: var(--gfh-font-body);
}

#message-threads .thread-count {
  color: var(--gfh-accent);
  font-weight: 700;
}

/* --- Data tables (notifications, account settings) --- */
.buddypress-wrap .bp-tables-user thead tr {
  border-bottom: 2px solid var(--gfh-teal);
}

.buddypress-wrap .bp-tables-user th {
  font-family: var(--gfh-font-body);
  color: var(--gfh-teal);
}

.buddypress-wrap .bp-tables-user tbody tr {
  background: var(--gfh-surface);
}

.buddypress-wrap .bp-tables-user tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--gfh-teal) 4%, transparent);
}

.buddypress-wrap table.notifications .notification-description a {
  color: var(--gfh-teal);
  font-weight: 700;
}

.buddypress-wrap table.notifications .notification-actions a {
  color: var(--gfh-teal);
}

/* --- Form submit/button inputs (Save Changes, Send, Upload, Select File, etc.) ---
   bp-legacy's #buddypress input[type="submit"] rule outranks the
   site-wide button style in nav.css, so it's re-applied here with
   !important to win regardless of which BP template pack is active.
   input[type="button"] covers plupload's "Select your file" browse
   button on the avatar/cover-image upload screens. button[type="submit"]
   covers bare, classless <button> elements BuddyPress uses in a few spots
   (e.g. "Request personal data export" on Settings > Data Export). */
#buddypress input[type="submit"],
#buddypress input[type="button"],
#buddypress button[type="submit"] {
  background-color: var(--gfh-accent) !important;
  color: #fff !important;
  border-radius: var(--gfh-radius-pill) !important;
  border: none !important;
  font-family: var(--gfh-font-body);
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
}

#buddypress input[type="submit"]:hover,
#buddypress input[type="button"]:hover,
#buddypress button[type="submit"]:hover {
  opacity: 0.85;
}

/* --- Dark mode BP overrides ---
   #item-header/.bp-member-header and #header-cover-image aren't listed here:
   they use var(--gfh-bg)/var(--gfh-teal), which variables.css already
   redefines for dark mode, so they adapt automatically. Gated on BuddyX's own
   data-bx-mode="dark" state (not prefers-color-scheme) to stay in sync with the
   rest of the page instead of switching independently of the site's actual mode. */
:root[data-bx-mode="dark"] {
  #activity-stream li.activity-item,
  #members-list.members-list li,
  #groups-list li.item-entry {
    background-color: var(--gfh-surface);
    border-color: rgba(255, 255, 255, 0.07);
  }

  #object-nav li a,
  #subnav li a {
    color: var(--gfh-text-muted);
  }

  .buddypress-wrap form.bp-dir-search-form,
  .buddypress-wrap form.bp-messages-search-form,
  .buddypress-wrap form#group-members-search,
  .buddypress-wrap .select-wrap {
    background-color: var(--gfh-surface);
    border-color: rgba(255, 255, 255, 0.15);
  }

  .buddypress-wrap .bp-tables-user tbody tr {
    background: var(--gfh-surface);
  }

  .buddypress-wrap .bp-tables-user tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.03);
  }
}

@media (prefers-color-scheme: dark) {
  :root[data-bx-mode="auto"] {
    #activity-stream li.activity-item,
    #members-list.members-list li,
    #groups-list li.item-entry {
      background-color: var(--gfh-surface);
      border-color: rgba(255, 255, 255, 0.07);
    }

    #object-nav li a,
    #subnav li a {
      color: var(--gfh-text-muted);
    }

    .buddypress-wrap form.bp-dir-search-form,
    .buddypress-wrap form.bp-messages-search-form,
    .buddypress-wrap form#group-members-search,
    .buddypress-wrap .select-wrap {
      background-color: var(--gfh-surface);
      border-color: rgba(255, 255, 255, 0.15);
    }

    .buddypress-wrap .bp-tables-user tbody tr {
      background: var(--gfh-surface);
    }

    .buddypress-wrap .bp-tables-user tbody tr:nth-child(even) {
      background: rgba(255, 255, 255, 0.03);
    }
  }
}