/*
 * GAMERSX Layout CSS — Core Variables & Global Styles
 * BuddyBoss Child Theme
 * Version: 1.0.0
 */

/* ================================================================
   CSS Custom Properties (Design Tokens)
   Synced with BuddyBoss Theme Options where possible.
   Override via gx_sync_buddyboss_colors() in functions.php.
   ================================================================ */
:root {
  /* — Sidebar — */
  --gx-sidebar-width: 230px;
  --gx-sidebar-collapsed-width: 68px;
  --gx-sidebar-bg: #0F172A;
  --gx-sidebar-border: rgba(255, 255, 255, 0.08);
  --gx-sidebar-text: #fff;
  --gx-sidebar-text-hover: #E2E8F0;
  --gx-sidebar-text-active: #FFFFFF;
  --gx-sidebar-icon: #fff;
  --gx-sidebar-icon-active: #FFFFFF;
  --gx-sidebar-hover-bg: rgba(255, 255, 255, 0.06);
  --gx-sidebar-active-bg: #39278F;
  --gx-sidebar-active-radius: 8px;
  --gx-sidebar-section-color: #475569;

  /* — Header — */
  --gx-header-height: 64px;
  --gx-header-bg: #FFFFFF;
  --gx-header-border: #E2E8F0;
  --gx-header-text: #0F172A;
  --gx-header-icon: #64748B;
  --gx-header-icon-hover: #0F172A;
  --gx-header-toggle-color: #334155;

  /* — Content / Page — */
  --gx-content-bg: #F1F5F9;

  /* — Cards — */
  --gx-card-bg: #FFFFFF;
  --gx-card-border: #E2E8F0;
  --gx-card-radius: 12px;
  --gx-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04);

  /* — Brand / Primary (BuddyBoss synced via PHP) — */
  --gx-primary: #39278F;
  --gx-primary-hover: #39278F;
  --gx-primary-light: rgba(79, 70, 229, 0.08);
  --gx-primary-rgb: 79, 70, 229;
  --gx-primary-contrast: #7a4ecc;

  /* — Typography — */
  /* --gx-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; */
  --gx-text-primary: #0F172A;
  --gx-text-secondary: #334155;
  --gx-text-muted: #64748B;
  --gx-text-faint: #94A3B8;

  /* — Status Colours (base) — */
  --gx-success: #10B981;
  --gx-warning: #F59E0B;
  --gx-danger:  #EF4444;
  --gx-info:    #3B82F6;

  /* — Status Badge Tokens —
     Single source of truth for Pending / Approved / Rejected colors
     used in gx-adv-dashboard.css and gx-campaign-review.css.
     ---------------------------------------------------------------- */

  /* Pending (amber) */
  --gx-status-pending-rgb:       245, 158, 11;   /* #F59E0B */
  --gx-status-pending-text:      #d97706;         /* medium amber  */
  --gx-status-pending-dark:      #b45309;         /* dark amber (dot label) */
  --gx-status-pending-dot:       #f59e0b;         /* solid dot fill */

  /* Approved / Accepted / Completed (green) */
  --gx-status-approved-rgb:      16, 185, 129;   /* #10B981 */
  --gx-status-approved-text:     #059669;         /* medium green */
  --gx-status-approved-dark:     #15803d;         /* dark green (dot label, btn text) */
  --gx-status-approved-dot:      #22c55e;         /* solid dot fill */
  --gx-status-approved-dot-rgb:  34, 197, 94;    /* #22C55E – for dot glow shadow */
  --gx-status-approved-btn-bg:   #dcfce7;         /* accept button surface */
  --gx-status-approved-border:   #86efac;         /* accept button border */

  /* Rejected / Denied (red) */
  --gx-status-rejected-rgb:      239, 68, 68;    /* #EF4444 */
  --gx-status-rejected-text:     #dc2626;         /* medium red */
  --gx-status-rejected-dark:     #b91c1c;         /* dark red (dot label, btn text) */
  --gx-status-rejected-dot:      #ef4444;         /* solid dot fill */
  --gx-status-rejected-btn-bg:   #fee2e2;         /* deny button surface */
  --gx-status-rejected-border:   #fca5a5;         /* deny button border */

  /* Progress (amber) */
  --gx-status-progress-rgb:      59, 130, 246;      /* #3B82F6 */
  --gx-status-progress-text:     #2563eb;         /* medium blue */

  /* — Transitions — */
  --gx-transition: all 0.2s ease;
  --gx-transition-slow: all 0.32s ease;

  /* — Border Radii — */
  --gx-radius-sm: 6px;
  --gx-radius-md: 8px;
  --gx-radius-lg: 12px;
  --gx-radius-xl: 16px;
  --gx-radius-full: 9999px;

  /* — Spacing Scale — */
  --gx-space-1: 4px;
  --gx-space-2: 8px;
  --gx-space-3: 12px;
  --gx-space-4: 16px;
  --gx-space-5: 20px;
  --gx-space-6: 24px;
}

/* ================================================================
   Global Base Overrides
   ================================================================ */
html body {
  font-family: 'Poppins' !important;
  background-color: var(--gx-content-bg) !important;
  color: var(--gx-text-primary) !important;
}

#page.site {
  background-color: var(--gx-content-bg) !important;
}

#content.site-content,
.site-content {
  background-color: var(--gx-content-bg) !important;
  min-height: calc(100vh - var(--gx-header-height));
  padding: 30px 0;
}

/* BuddyBoss inner grid background */
.bb-grid,
.site-content-grid {
  background-color: var(--gx-content-bg) !important;
}

/* BuddyBoss content area */
#buddypress,
.buddypress-wrap,
.bp-wrap {
  background-color: transparent !important;
}

/* ================================================================
   Card / Box Styles — global for consistent look
   ================================================================ */
.bb-card,
.widget-area .widget,
.buddypress .bp-widget,
.bb-activity-entry,
.forum-topic-user,
.bp-profile-section,
.bb-entry-content {
  background: var(--gx-card-bg) !important;
  border: 1px solid var(--gx-card-border) !important;
  border-radius: var(--gx-card-radius) !important;
  box-shadow: var(--gx-card-shadow) !important;
}

/* Links */
a {
  color: var(--gx-primary);
  transition: var(--gx-transition);
}
a:hover {
  color: var(--gx-primary-hover);
}

/* ================================================================
   Global Scrollbar
   ================================================================ */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}