/* ZIBAGROUP Community Fix - CSS (B/W icons + tighter layout)
   Scope: BuddyPress + Youzify/Youzer pages.
*/

:root{
  --zbg-ink:#111111;
  --zbg-paper:#ffffff;
  --zbg-line:rgba(17,17,17,.10);
}

/* ===== 1) MONOCHROME ICONS ===== */

/* Font icons */
.youzer i,
.youzify i,
#buddypress i,
#buddypress .fa,
#buddypress .fas,
#buddypress .far,
#buddypress .fab,
.yz-icons i,
.youzify-icons i{
  color: var(--zbg-ink) !important;
}

/* SVG + IMG icons (keep same drawing, force B/W) */
.youzer img,
.youzify img,
#buddypress img,
.youzer svg,
.youzify svg,
#buddypress svg{
  filter: grayscale(1) brightness(0) contrast(1.2) !important;
}

/* Buttons / badges with colored icons */
#buddypress .button,
#buddypress a.button,
#buddypress button,
.youzify button,
.youzify .button,
.youzer button,
.youzer .button{
  box-shadow: none !important;
}

/* Remove colored icon backgrounds (common in Youzify) */
.youzify .yz-tab-icon,
.youzify .youzify-tab-icon,
.youzer .yz-tab-icon,
.youzer .youzer-tab-icon,
#buddypress .bp-navs li a:before{
  background: transparent !important;
}

/* Force nav icons/labels to B/W */
.youzify .youzify-profile-navmenu a,
.youzer .youzer-profile-navmenu a,
#buddypress .bp-navs li a{
  color: var(--zbg-ink) !important;
}

/* ===== 2) TIGHTER, MORE "FACEBOOK" LAYOUT ===== */

/* Make content area feel less "airy" */
#buddypress .item-body,
#buddypress .activity,
.youzify .youzify-main-content,
.youzer .youzer-main-content{
  line-height: 1.45;
}

/* Reduce extra margins/padding */
#buddypress .activity-list .activity-item,
#buddypress .activity-list li,
.youzify .activity-list .activity-item,
.youzify .youzify-wall-content,
.youzer .youzer-wall-content{
  border-color: var(--zbg-line) !important;
}

#buddypress .activity-list .activity-item{
  margin-bottom: 14px !important;
}

/* Widen feed container where theme restricts width */
/* Works for many themes (including Kleo) without breaking non-community pages */
body.buddypress #page,
body.buddypress #main,
body.buddypress .container,
body.buddypress .main,
body.buddypress .site-content{
  max-width: 1280px;
}

/* Center and widen the primary column */
body.buddypress #buddypress{
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* Make cards cleaner */
#buddypress .activity-list .activity-item,
#buddypress .bp-single-vert-nav .item-body,
.youzify .youzify-box,
.youzer .youzer-box{
  border-radius: 14px !important;
  border: 1px solid var(--zbg-line) !important;
  background: var(--zbg-paper) !important;
}

/* Remove bright theme accents on focus/hover */
#buddypress a:focus,
#buddypress button:focus,
#buddypress input:focus,
#buddypress textarea:focus,
#buddypress select:focus,
.youzify a:focus,
.youzify button:focus,
.youzify input:focus,
.youzify textarea:focus,
.youzer a:focus,
.youzer button:focus,
.youzer input:focus,
.youzer textarea:focus{
  outline: none !important;
  box-shadow: none !important;
}

/* Make hashtags / pills neutral */
.youzify .youzify-tags a,
.youzer .youzer-tags a{
  background: #f3f3f3 !important;
  color: var(--zbg-ink) !important;
  border: 1px solid var(--zbg-line) !important;
}

/* ===== 3) MOBILE: keep things tidy ===== */
@media (max-width: 768px){
  body.buddypress #buddypress{
    padding-left: 10px;
    padding-right: 10px;
  }
  #buddypress .activity-list .activity-item{
    border-radius: 12px !important;
  }
}