/*
 * GAMERSX Responsive CSS
 * BuddyBoss Child Theme
 * Version: 1.0.0
 */

/* ================================================================
   Large Desktop (1440px+)
   ================================================================ */
@media (min-width: 1440px) {
  :root {
    --gx-sidebar-width: 240px;
  }
}

/* ================================================================
   Desktop (1024px – 1279px)
   ================================================================ */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root {
    --gx-sidebar-width: 210px;
  }

  .gx-header-user-role {
    display: none !important;
  }
}

/* ================================================================
   Tablet Landscape (768px – 1023px)
   ================================================================ */
@media (max-width: 1023px) {
  :root {
    --gx-sidebar-width: 200px;
    --gx-header-height: 60px;
  }

  .gx-header-user-info {
    display: none !important;
  }

  .header-aside-inner .user-wrap > .user-link {
    padding: 5px !important;
  }

  .gx-header-page-title .gx-page-title-text {
    font-size: 17px !important;
  }

  /* .gx-sidebar-profile-info,
  .gx-sidebar-profile-dots {
    display: none !important;
  }

  .gx-sidebar-profile-link {
    justify-content: center !important;
  } */
}

/* ================================================================
   Tablet Portrait (768px – 900px)
   ================================================================ */
@media (max-width: 900px) {
  :root {
    --gx-sidebar-width: 68px;
  }

  .buddypanel .buddypanel-menu .menu-item > a {
    justify-content: center !important;
    padding: 10px !important;
  }

  /* .buddypanel .buddypanel-menu .menu-item > a span,
  .buddypanel .buddypanel-menu .menu-item > a .menu-label {
    display: none !important;
  } */

  .buddypanel .buddypanel-menu .menu-item > a i,
  .buddypanel .buddypanel-menu .menu-item > a .bb-icon-l,
  .buddypanel .buddypanel-menu .menu-item > a .bb-icon-f {
    width: auto !important;
    font-size: 18px !important;
  }

  .buddypanel .buddypanel-menu .menu-item > a .count,
  .buddypanel .buddypanel-menu .menu-item > a .bp-notifications-count {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    margin-left: 0 !important;
    min-width: 14px !important;
    height: 14px !important;
    font-size: 9px !important;
    padding: 0 3px !important;
  }

  .buddypanel #site-logo .site-title a {
    font-size: 0 !important;
    overflow: hidden !important;
  }

  .buddypanel #site-logo,
  .buddypanel .site-branding {
    padding: 16px 12px !important;
  }

  .buddypanel .side-panel-inner {
    padding: 10px 8px !important;
  }

  .gx-sidebar-footer {
    padding: 10px 8px !important;
  }

  .gx-sidebar-profile-link {
    justify-content: center !important;
    padding: 8px !important;
  }

  /* .gx-sidebar-profile-info,
  .gx-sidebar-profile-dots {
    display: none !important;
  }

  .buddypanel .buddypanel-menu .sub-menu {
    display: none !important;
  } */

  /* Profile popup: open to the right of the icon-only sidebar */
  .gx-sidebar-profile-popup {
    bottom: 0 !important;
    top: auto !important;
    left: calc(100% + 4px) !important;
    right: auto !important;
    min-width: 220px !important;
    transform: translateX(-8px) !important;
  }

  .gx-sidebar-footer.gx-popup-open .gx-sidebar-profile-popup {
    transform: none !important;
  }

  .bb-mobile-panel-wrapper .bb-mobile-panel-header, .bb-mobile-panel-inner {
    background-color: var(--gx-sidebar-bg) !important;
    border-bottom: 1px solid var(--gx-sidebar-border) !important;
  }
  
  .bb-mobile-panel-header .user-name, .bb-mobile-panel-header .my-account-link a,
  a.bb-close-panel i, .bb-mobile-panel-inner .side-panel-menu .sub-menu a,
  .bb-mobile-panel-inner .side-panel-menu a, .bb-mobile-panel-inner .side-panel-menu .sub-menu a>i,
  .bb-mobile-panel-inner .side-panel-menu a>i{
    color: #fff !important;
  }

  /* Hover state for panel nav items */
  .bb-mobile-panel-inner .side-panel-menu li:not(.current-menu-item) > a:hover {
    background-color: var(--gx-sidebar-hover-bg) !important;
    color: var(--gx-sidebar-text-hover) !important;
  }

  .bb-mobile-panel-inner .side-panel-menu li:not(.current-menu-item) > a:hover i {
    color: var(--gx-sidebar-text-hover) !important;
  }

  /* Active / current state for panel nav items */
  .bb-mobile-panel-inner .side-panel-menu li.current-menu-item > a {
    background-color: var(--gx-sidebar-active-bg) !important;
    color: var(--gx-sidebar-text-active) !important;
    font-weight: 600 !important;
  }

  .bb-mobile-panel-inner .side-panel-menu li.current-menu-item > a i {
    color: var(--gx-sidebar-icon-active) !important;
  }
}

/* ================================================================
   Mobile (up to 767px)
   GX mobile header visible; sidebar becomes a slide-in overlay.
   Desktop .site-header-container is hidden by BuddyBoss at ≤799px.
   ================================================================ */
@media (max-width: 799px) {

  /* ---- Sidebar: full-width slide-in overlay ---- */
  .buddypanel {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    height: 100% !important;
    width: 100% !important;
    max-width: 100vw !important;
    z-index: 1000 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-right: none !important;
  }

  body.gx-mobile-nav-open .buddypanel {
    transform: translateX(0) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3) !important;
  }

  /* Reset icon-only width on mobile (show full sidebar labels) */
  .buddypanel .buddypanel-menu .menu-item > a {
    justify-content: flex-start !important;
    padding: 9px 12px !important;
  }

  .buddypanel .buddypanel-menu .menu-item > a span,
  .buddypanel .buddypanel-menu .menu-item > a .menu-label,
  .buddypanel .buddypanel-menu .menu-item > a .link-text {
    display: inline !important;
  }

  /* ---- Content: no left offset (sidebar is overlay) ---- */
  body {
    padding-left: 0 !important;
  }

  #content.site-content {
    margin-left: 0 !important;
  }

  /* Profile popup: position:fixed set in gx-mobile-header.css to escape
     the sidebar's overflow-y:auto clipping context. No further overrides needed. */
}

/* ================================================================
   Very Small Screens (up to 480px)
   ================================================================ */
@media (max-width: 480px) {
  .gx-header-page-title .gx-page-title-text {
    font-size: 15px !important;
  }
  /* Sidebar width at ≤480px is 100% (set in gx-mobile-header.css) */
}