/* App-like UI – Theme Friendly
   Uses theme primary/secondary colors when available.
*/
:root{
  /* WordPress block theme presets (when defined) */
  /* Default "skyblue" look (user preference), still allows theme colors to override. */
  --bb-primary-base: var(--wp--preset--color--primary, #0ea5e9);
  --bb-secondary-base: var(--wp--preset--color--secondary, #9333ea);

  /* Elementor globals (fallback) */
  --bb-primary: var(--e-global-color-primary, var(--bb-primary-base));
  --bb-secondary: var(--e-global-color-secondary, var(--bb-secondary-base));

  /* UI tokens */
  --bb-bg: color-mix(in srgb, var(--bb-primary) 6%, #ffffff);
  --bb-card: #ffffff;
  --bb-border: color-mix(in srgb, var(--bb-primary) 28%, #0000);
  --bb-text: #0f172a;
  --bb-muted: #475569;
  --bb-accent: var(--bb-primary);
}

/* Safer fallback for browsers without color-mix */
@supports not (color-mix(in srgb, #000 10%, #fff)){
  :root{
    --bb-bg:#ffffff;
    --bb-border:#00000020;
  }
}

/* Wrapper */
.bbgl-wrap{margin:14px 0}
.bbgl-wrap.bbgl-darkblock{
  background:var(--bb-bg);
  border:1px solid var(--bb-border);
  padding:14px;
  border-radius:22px;
}

/* Grid */
.bbgl-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;
}

/* Card */
.bbgl-card{
  background:var(--bb-card);
  border:1.5px solid var(--bb-border);
  border-radius:18px;
  padding:16px 14px 14px;
  color:var(--bb-text);
  position:relative; /* REQUIRED so rank + badges are visible */
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.06);
}

/* Hover (subtle) */
.bbgl-card:hover{
  border-color: color-mix(in srgb, var(--bb-primary) 40%, #0000);
  box-shadow: 0 14px 38px rgba(2, 6, 23, 0.10);
  transform: translateY(-2px);
}

/* Smooth interactions */
.bbgl-card{
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* Current user highlight */
.bbgl-card.bbgl-me{
  border:2px solid var(--bb-accent);
}
.bbgl-card.bbgl-me:after{
  content:"YOU";
  position:absolute;
  top:10px;
  left:10px;
  font-size:11px;
  font-weight:700;
  padding:4px 8px;
  border-radius:999px;
  color:#fff;
  background:var(--bb-accent);
}

/* Rank */
.bbgl-rank{
  position:absolute;
  top:10px;
  right:10px;
  font-size:13px;
  color:var(--bb-muted);
  font-weight:600;
  z-index:2;
}

/* Avatar */
.bbgl-avatar-wrap{
  text-align:center;
  margin-top:12px;
}
.bbgl-avatar,
.bbgl-avatar img{
  border-radius:999px !important;
}

.bbgl-avatar img{
  border:3px solid color-mix(in srgb, var(--bb-primary) 28%, #ffffff);
  box-shadow: 0 10px 26px rgba(2, 6, 23, 0.12);
}

/* Name */
.bbgl-name{
  text-align:center;
  font-weight:700;
  margin-top:8px;
  color: color-mix(in srgb, var(--bb-primary) 65%, var(--bb-text));
}

/* Sub text */
.bbgl-sub{
  text-align:center;
  font-size:13px;
  color:var(--bb-muted);
  margin-top:2px;
}

/* Grade */
.bbgl-grade{
  text-align:center;
  margin-top:6px;
  font-size:14px;
}
.bbgl-grade strong{
  color: var(--bb-primary);
  font-weight:800;
}

/* Stats */
.bbgl-stats{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:10px;
  font-size:13px;
}
.bbgl-stats span{
  color:var(--bb-text);
  background: color-mix(in srgb, var(--bb-primary) 10%, #ffffff);
  border:1px solid color-mix(in srgb, var(--bb-primary) 18%, #0000);
  padding:6px 10px;
  border-radius:999px;
  line-height:1;
}

/* Title */
.bbgl-title-below{
  text-align:center;
  margin-top:6px;
  font-size:13px;
  color:var(--bb-muted);
}

/* Progress */
.bbgl-progress{
  margin-top:10px;
}
.bbgl-progress-label{
  text-align:center;
  font-size:12px;
  color:var(--bb-muted);
  margin-bottom:4px;
}
.bbgl-bar{
  height:8px;
  background:#eee;
  border-radius:999px;
  overflow:hidden;
}
.bbgl-bar span{
  display:block;
  height:100%;
  background: linear-gradient(90deg, var(--bb-primary), var(--bb-secondary));
}


/* Department filter (bottom) */
.bbgl-filter{
  margin-top:14px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.bbgl-filter-label{font-size:13px;color:var(--bb-muted)}
.bbgl-filter-select{
  border:1.5px solid var(--bb-border);
  border-radius:10px;
  padding:8px 10px;
  background:#fff;
  color:var(--bb-text);
}
.bbgl-filter-btn{
  border:1.5px solid var(--bb-border);
  border-radius:10px;
  padding:8px 12px;
  background:#fff;
  cursor:pointer;
}


/* ===== Leaderboard Enhancements ===== */

/* Use real HTML badge for "YOU" (instead of :after) */
.bbgl-you-badge{
  position:absolute;
  top:10px;
  left:10px;
  font-size:11px;
  font-weight:700;
  padding:4px 8px;
  border-radius:999px;
  color:#fff;
  background:var(--bb-accent);
  z-index:2;
}
/* Disable legacy pseudo badge to avoid duplicates */
.bbgl-card.bbgl-me:after{content:none !important; display:none !important;}

/* Rank layout: medal + place number */
.bbgl-rank{
  display:flex;
  align-items:center;
  gap:6px;
  justify-content:flex-end;
}
.bbgl-rank .bbgl-medal{font-size:16px; line-height:1;}
.bbgl-rank .bbgl-place{
  padding:3px 8px;
  border-radius:999px;
  border:1px solid var(--bb-border);
  background: color-mix(in srgb, var(--bb-primary) 10%, #ffffff);
}

/* Top 3 highlight cards (theme-aware) */
.bbgl-card.bbgl-top1{ border:2px solid var(--bb-primary); box-shadow:0 14px 40px color-mix(in srgb, var(--bb-primary) 18%, #0000); }
.bbgl-card.bbgl-top2{ border:2px solid var(--bb-secondary); box-shadow:0 14px 40px color-mix(in srgb, var(--bb-secondary) 18%, #0000); }
.bbgl-card.bbgl-top3{ border:2px solid color-mix(in srgb, var(--bb-primary) 55%, var(--bb-secondary)); box-shadow:0 14px 40px rgba(2, 6, 23, 0.10); }

/* Make top 3 place badge stand out */
.bbgl-card.bbgl-top1 .bbgl-place{ border-color:var(--bb-primary); }
.bbgl-card.bbgl-top2 .bbgl-place{ border-color:var(--bb-secondary); }
.bbgl-card.bbgl-top3 .bbgl-place{ border-color:color-mix(in srgb, var(--bb-primary) 55%, var(--bb-secondary)); }