/**
 * HIVE GROUP PROFILE - Group-specific additions
 * Add these to hive-profile.css or load separately
 * 
 * File: borgx/assets/css/borgx/hive-group-profile.css
 */

/* ============================================
   BUDDYPRESS RESET OVERRIDES
   Override BP's aggressive 2px border-radius
   ============================================ */

body.bp-single-group #buddypress div,
body.bp-single-group #buddypress dl,
body.bp-single-group #buddypress li,
body.bp-single-group #buddypress select,
body.bp-single-group #buddypress textarea,
body.bp-single-group #buddypress input[type="text"],
body.bp-single-group #buddypress input[type="search"],
body.bp-single-group #buddypress input[type="submit"],
body.bp-single-group #buddypress input[type="reset"] {
  border-radius: unset;
  background-clip: unset;
}

/* Re-apply our intended border-radius values */
body.bp-single-group .profile-tab,
body.bp-single-group .join-button,
body.bp-single-group .admin-item,
body.bp-single-group .rule-number {
  border-radius: var(--radius-full) !important;
}

body.bp-single-group .profile-grid__photos,
body.bp-single-group .profile-grid__stat,
body.bp-single-group .profile-grid__action {
  border-radius: var(--radius-xl) !important;
}

body.bp-single-group .photo-grid {
  border-radius: var(--radius-2xl, 1.5rem) !important;
  overflow: hidden;
}

/* ============================================
   COVER IMAGE CONTAINER - Reset defaults
   ============================================ */

body.bp-single-group #cover-image-container {
  padding: 0;
  border: none;
  background: transparent !important;
}

/* Hide default BP cover image background */
body.bp-single-group #header-cover-image {
  display: none !important;
}

/* Remove any borders/lines from the cover image container and item-header */
body.bp-single-group #cover-image-container,
body.bp-single-group #item-header,
body.bp-single-group #item-header-cover-image,
body.bp-single-group .groups-header {
  border-bottom: none !important;
  background: transparent !important;
}

/* Specifically target BP's item-header-cover-image which often has borders */
body.bp-single-group #buddypress #item-header-cover-image,
body.bp-single-group #buddypress .groups-header,
body.bp-single-group #buddypress #item-header {
  border: none !important;
  border-bottom: none !important;
  background: transparent !important;
}

/* Hide duplicate item-nav when profile-tabs are present */
body.bp-single-group #cover-image-container + .bp-wrap #item-nav,
body.bp-single-group .profile-header + .bp-wrap #item-nav {
  display: none;
}

/* ============================================
   HIDE LEFT SIDEBAR NAV
   Navigation is in header tabs, not sidebar
   ============================================ */

/* Hide the entire left sidebar navigation - max specificity */
body.bp-single-group nav#object-nav,
body.bp-single-group nav.groups-nav,
body.bp-single-group nav.main-navs.groups-nav,
body.bp-single-group #buddypress nav#object-nav,
body.bp-single-group #buddypress nav.groups-nav,
body.bp-single-group #buddypress nav.main-navs.groups-nav {
  display: none !important;
  width: 0 !important;
  visibility: hidden !important;
}

/* Remove vertical nav layout - bp-wrap should be full width */
body.bp-single-group .bp-single-vert-nav .bp-wrap,
body.bp-single-group .bp-vertical-navs .bp-wrap,
body.bp-single-group #buddypress.bp-single-vert-nav .bp-wrap,
body.bp-single-group #buddypress.bp-vertical-navs .bp-wrap,
body.bp-single-group #buddypress .bp-wrap {
  display: block !important;
  padding-left: 0 !important;
}

/* Remove left border from item-body */
body.bp-single-group #item-body,
body.bp-single-group .item-body,
body.bp-single-group #buddypress #item-body,
body.bp-single-group #buddypress .item-body,
body.bp-single-group .bp-single-vert-nav #item-body,
body.bp-single-group .bp-vertical-navs #item-body {
  border-left: none !important;
  border: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  background: transparent !important;
}

/* Override BP Nouveau vertical nav styles at all breakpoints */
@media screen and (min-width: 46.8em) {
  body.bp-single-group .bp-single-vert-nav #item-body,
  body.bp-single-group .bp-vertical-navs #item-body,
  body.bp-single-group #buddypress.bp-single-vert-nav #item-body,
  body.bp-single-group #buddypress.bp-vertical-navs #item-body {
    background: transparent !important;
    border-left: none !important;
    border: none !important;
    padding-left: 0 !important;
    width: 100% !important;
  }
  
  body.bp-single-group .bp-single-vert-nav .item-body:not(#group-create-body),
  body.bp-single-group .bp-vertical-navs .item-body:not(#group-create-body) {
    width: 100% !important;
    border: none !important;
  }
  
  /* Remove any flex/grid that creates space for nav */
  body.bp-single-group .bp-single-vert-nav .bp-wrap,
  body.bp-single-group .bp-vertical-navs .bp-wrap {
    display: block !important;
  }
}

/* Also target the profile-content wrapper to ensure no ghost borders */
body.bp-single-group .profile-content {
  border: none !important;
}

body.bp-single-group .profile-content .profile-activity {
  border: none !important;
}

/* Remove any BP-added borders/HRs in the cover image container */
body.bp-single-group #cover-image-container hr,
body.bp-single-group #cover-image-container .separator,
body.bp-single-group .profile-header hr {
  display: none !important;
}

/* ============================================
   GROUP PROFILE HEADER - Fix gaps
   ============================================ */

body.bp-single-group .profile-header {
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

body.bp-single-group .profile-header__info {
  display: flex;
  flex-direction: column;
  gap: 0;
}

body.bp-single-group .profile-header__name {
  margin: 0;
  line-height: 1.2;
}

body.bp-single-group .profile-header__desc {
  margin: var(--space-xs) 0 0 0;
  font-size: var(--typescale_body-medium_size);
  color: var(--color-text-subtle);
}

/* ============================================
   PROFILE GRID - 8 column layout
   ============================================ */

body.bp-single-group .profile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
  background: transparent !important;
}

@media (min-width: 768px) {
  body.bp-single-group .profile-grid {
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(2, auto);
    min-height: 280px;
  }
  
  body.bp-single-group .profile-grid__photos {
    grid-column: span 4;
    grid-row: span 2;
  }
  
  body.bp-single-group .profile-grid__stat {
    grid-column: span 2;
    grid-row: span 1;
  }
  
  body.bp-single-group .profile-grid__action {
    grid-column: span 4;
    grid-row: span 1;
  }
}

/* ============================================
   PHOTO GRID - Transparent backgrounds
   ============================================ */

body.bp-single-group #cover-image-container {
  background: transparent !important;
}

body.bp-single-group .profile-grid {
  background: transparent !important;
}

body.bp-single-group .profile-grid__photos {
  background: transparent !important;
}

body.bp-single-group .photo-grid {
  background: transparent !important;
}

body.bp-single-group .photo-grid__main,
body.bp-single-group .photo-grid__secondary {
  background: transparent;
}

/* Placeholders keep their gradient backgrounds */
body.bp-single-group .photo-grid__placeholder--cover {
  background: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-3) 100%);
}

body.bp-single-group .photo-grid__placeholder--accent {
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-border) 100%);
}

/* ============================================
   AVATAR SLOT - Centered, not stretched
   ============================================ */

body.bp-single-group .photo-grid__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
}

body.bp-single-group .photo-grid__avatar-link {
  display: flex;
  align-items: center;
  justify-content: center;
}

body.bp-single-group .photo-grid__avatar img,
body.bp-single-group .photo-grid__avatar .avatar {
  width: auto !important;
  height: auto !important;
  max-width: 95% !important;
  max-height: 95% !important;
  object-fit: contain;
}

/* ============================================
   JOIN BUTTON CARD
   ============================================ */

body.bp-single-group .profile-grid__action {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background: transparent;
}

/* Override #buddypress button defaults */
body.bp-single-group .join-button,
body.bp-single-group a.join-button,
body.bp-single-group button.join-button,
#buddypress .join-button,
#buddypress a.join-button,
#buddypress button.join-button,
body.bp-single-group #buddypress .join-button,
body.bp-single-group #buddypress a.join-button,
body.bp-single-group #buddypress button.join-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: 100%;
  padding: var(--space-sm) var(--space-lg);
  background: var(--brand-3) !important;
  color: var(--neutral-0) !important;
  font-family: var(--font-headline);
  font-size: var(--typescale_label-large_size);
  font-weight: 500;
  border: none !important;
  border-radius: var(--radius-full) !important;
  cursor: pointer;
  text-decoration: none !important;
  transition: var(--transition-fast);
}

body.bp-single-group .join-button:hover,
body.bp-single-group a.join-button:hover,
body.bp-single-group button.join-button:hover,
#buddypress .join-button:hover,
#buddypress a.join-button:hover,
#buddypress button.join-button:hover,
body.bp-single-group #buddypress .join-button:hover,
body.bp-single-group #buddypress a.join-button:hover,
body.bp-single-group #buddypress button.join-button:hover {
  background: var(--brand-3-dark) !important;
  transform: scale(1.02);
  color: var(--neutral-0) !important;
  text-decoration: none !important;
}

/* Mobile: join button auto-width, max constrained */
@media (max-width: 767px) {
  body.bp-single-group .join-button,
  body.bp-single-group a.join-button,
  body.bp-single-group button.join-button,
  body.bp-single-group #buddypress .join-button,
  body.bp-single-group #buddypress a.join-button,
  body.bp-single-group #buddypress button.join-button {
    width: auto;
    max-width: 240px;
    font-size: var(--typescale_label-medium_size);
  }
}

body.bp-single-group .join-button--member,
body.bp-single-group button.join-button--member,
#buddypress .join-button--member,
#buddypress button.join-button--member,
body.bp-single-group #buddypress button.join-button--member {
  background: var(--brand-2) !important;
}

body.bp-single-group .join-button--member:hover,
body.bp-single-group button.join-button--member:hover,
#buddypress .join-button--member:hover,
#buddypress button.join-button--member:hover,
body.bp-single-group #buddypress button.join-button--member:hover {
  background: var(--brand-2-dark) !important;
}

body.bp-single-group .join-button--pending,
body.bp-single-group button.join-button--pending,
#buddypress .join-button--pending,
#buddypress button.join-button--pending,
body.bp-single-group #buddypress button.join-button--pending {
  background: var(--color-text-muted) !important;
  cursor: not-allowed;
  opacity: 0.7;
}

body.bp-single-group .join-button--pending:hover,
body.bp-single-group button.join-button--pending:hover,
#buddypress .join-button--pending:hover,
#buddypress button.join-button--pending:hover,
body.bp-single-group #buddypress button.join-button--pending:hover {
  transform: none;
  background: var(--color-text-muted) !important;
}

/* ============================================
   ADMINS SECTION
   ============================================ */

.admins-section {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.admins-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0 0 var(--space-md) 0;
  font-family: var(--font-headline);
  font-size: var(--typescale_title-small_size);
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
}

.admins-title:hover {
  color: var(--color-primary);
}

.admins-title svg {
  color: var(--color-text-muted);
}

.admins-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.admin-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-surface);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: var(--transition-fast);
}

.admin-item:hover {
  background: var(--color-hover);
  text-decoration: none;
}

.admin-avatar {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.admin-name {
  font-size: var(--typescale_label-medium_size);
  font-weight: 500;
  color: var(--color-text);
}

/* ============================================
   RULES SECTION
   ============================================ */

.rules-section {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.rules-title {
  margin: 0 0 var(--space-md) 0;
  font-family: var(--font-headline);
  font-size: var(--typescale_title-small_size);
  font-weight: 500;
  color: var(--color-text);
}

.rules-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.rules-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.rule-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--color-surface);
  color: var(--color-text-subtle);
  font-size: var(--typescale_label-small_size);
  font-weight: 600;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.rule-text {
  font-size: var(--typescale_body-medium_size);
  color: var(--color-text);
  line-height: 1.5;
}

/* ============================================
   RELATED GROUPS SECTION
   ============================================ */

.related-section {
  /* Last section - no bottom border */
}

.related-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0 0 var(--space-md) 0;
  font-family: var(--font-headline);
  font-size: var(--typescale_title-small_size);
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
}

.related-title:hover {
  color: var(--color-primary);
}

.related-title svg {
  color: var(--color-text-muted);
}

.related-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.related-list__item {
  border-bottom: 1px solid var(--color-border-subtle, var(--color-border));
}

.related-list__item:last-child {
  border-bottom: none;
}

.related-list__item a {
  display: flex;
  flex-direction: column;
  padding: var(--space-sm) 0;
  text-decoration: none;
  transition: var(--transition-fast);
}

.related-list__item a:hover {
  background: var(--color-hover);
  margin-left: calc(-1 * var(--space-sm));
  margin-right: calc(-1 * var(--space-sm));
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
  border-radius: var(--radius-md);
}

.related-name {
  font-size: var(--typescale_body-medium_size);
  font-weight: 500;
  color: var(--color-primary);
}

.related-members {
  font-size: var(--typescale_label-small_size);
  color: var(--color-text-muted);
}

/* ============================================
   ACTIVITY EMPTY STATE
   ============================================ */

.activity-empty {
  padding: var(--space-xl);
  text-align: center;
  color: var(--color-text-subtle);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  margin: var(--space-md) 0;
}

.activity-empty p {
  margin: 0;
}

/* ============================================
   COMPOSER - Move to bottom of activity column
   ============================================ */

/* Make activity column a flex container */
.profile-activity,
#item-body.profile-activity {
  display: flex;
  flex-direction: column;
}

/* Push composer to the bottom */
.profile-activity #bp-nouveau-activity-form,
.profile-activity .activity-update-form,
.profile-activity #whats-new-form,
#item-body.profile-activity #bp-nouveau-activity-form,
#item-body.profile-activity .activity-update-form {
  order: 99;
  padding-top: var(--space-sm);
  padding-bottom: var(--space-md);
  margin-top: auto;
}

/* Activity list comes before composer */
.profile-activity .activity,
.profile-activity #activity-stream,
#item-body.profile-activity .activity {
  order: 1;
  flex: 1;
}

/* Subnav/filters stay at top */
.profile-activity .subnav-filters,
.profile-activity .activity-type-tabs,
#item-body.profile-activity .subnav-filters {
  order: 0;
}

/* ============================================
   COMPOSER TRIGGER (for groups)
   ============================================ */

.activity-composer-trigger {
  margin-bottom: var(--space-lg);
}

.composer-trigger-btn {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: var(--transition-fast);
}

.composer-trigger-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-hover);
}

.composer-trigger-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.composer-trigger-text {
  color: var(--color-text-subtle);
  font-size: var(--typescale_body-medium_size);
}

/* ============================================
   DARK MODE
   ============================================ */

@media (prefers-color-scheme: dark) {
  .join-button {
    color: var(--neutral-0);
  }
  
  .admin-item,
  .rule-number {
    background: var(--color-surface);
  }
  
  .activity-empty {
    background: var(--color-surface);
  }
  
  .composer-trigger-btn {
    background: var(--color-surface);
    border-color: var(--color-border);
  }
}

body.dark .admin-item,
body.dark .rule-number {
  background: var(--color-surface);
}

body.dark .activity-empty,
body.dark .composer-trigger-btn {
  background: var(--color-surface);
}