/* css/kettlebellclasses.css */

/* Top row like leaderboard filters/meta */
.kb-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

/* Match Leaderboards toggle styling */
.lb-toggle-group{
  display:inline-flex;
  padding:4px;
  border-radius:999px;
  background:rgba(0,0,0,.08);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(6px);
}
.lb-toggle{
  border:0;
  background:transparent;
  padding:8px 14px;
  border-radius:999px;
  color:var(--text);
  font-weight:800;
  cursor:pointer;
  transition:background .15s ease, box-shadow .15s ease, transform .12s ease;
}
.lb-toggle[aria-pressed="true"]{
  background:rgba(255,87,51,.14);
  box-shadow:0 8px 18px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.06);
}
.lb-toggle:hover{ transform:translateY(-1px); }
.lb-toggle[data-sex="men"][aria-pressed="true"]{
  background: rgba(72,140,255,.18);
}
.lb-toggle[data-sex="women"][aria-pressed="true"]{
  background: rgba(255,120,170,.18);
}

/* Reuse lb-toggle-group + lb-toggle feel; just add spacing */
.kb-toggle-wrap{ display:flex; align-items:center; gap:10px; }

/* Make the KB title read more like a heading than a pill */
.kb-title-pill{
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: .02em;
  padding: 8px 16px;
  border-radius: 16px;
  border-color: rgba(255,87,51,.35);
  background: linear-gradient(180deg, rgba(255,87,51,.16), rgba(0,0,0,.10));
}

/* Subtle table tints by sex */
.kb-theme-men .kbTable thead th{
  background: #1c3760;
  border-bottom: 1px solid rgba(72,140,255,.22);
}
.kb-theme-men .kbTable{
  --kb-row-even: #141b26;
  --kb-row-odd: #182234;
}

.kb-theme-women .kbTable thead th{
  background: #4a2030;
  border-bottom: 1px solid rgba(255,120,170,.22);
}
.kb-theme-women .kbTable{
  --kb-row-even: #1f151b;
  --kb-row-odd: #251821;
}

/* Table wrapper already uses lb-table-wrap */
.kb-table-wrap{
  overflow-x:auto;              /* allow horizontal scroll if needed */
  -webkit-overflow-scrolling:touch;
}

/* Table core mirrors lbTable */
.kbTable{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  min-width: 720px;
  --kb-row-even: #151515;
  --kb-row-odd: #1b1b1b;
}

.kb-col-bw{ width: 180px; }
.kb-col-level{ width: 180px; }

.kbTable thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 11px 10px;
  font-size:.74rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 950;
  opacity:.92;
  background: #1a1a1a;
  border-bottom: 1px solid rgba(255,255,255,.10);
  text-align: left;
  box-shadow: 0 1px 0 rgba(0,0,0,.35);
}

.kbTable thead th:nth-child(n+2),
.kbTable tbody td:nth-child(n+2){
  text-align:center;
}

.kbTable tbody tr{ background: var(--kb-row-even); }
.kbTable tbody tr:nth-child(odd){ background: var(--kb-row-odd); }

.kbTable tbody td{
  padding: 12px 10px;
  border-bottom: 1px solid rgba(64,64,64,.55);
  font-size: .95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sticky first column (matches your “sticky first column” preference) */
.kbTable thead th:first-child{
  position: sticky;
  left: 0;
  z-index: 5;
}

.kbTable tbody td:first-child{
  position: sticky;
  left: 0;
  z-index: 3;
  font-weight: 900;
  background: var(--kb-row-even); /* solid to prevent bleed */
}

.kbTable tbody tr:nth-child(odd) td:first-child{
  background: var(--kb-row-odd);
}

/* Column header with kettlebell icon, leaderboard-like */
.kb-colhead{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight: 950;
}

.kb-icon{
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  flex: 0 0 auto;
  opacity: 1;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.32));
}
.kb-colhead-intermediate .kb-icon{
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.kb-colhead-advanced .kb-icon{
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
}

.kb-colhead-beginner .kb-icon{
  color: #c46a1a;
}
.kb-colhead-intermediate .kb-icon{
  color: #b0b5bd;
  filter:
    drop-shadow(0 6px 16px rgba(0,0,0,.32))
    drop-shadow(0 0 0 rgba(0,0,0,.65));
}
.kb-colhead-advanced .kb-icon{
  color: #f1c232;
}

.kb-colhead small{
  display:block;
  margin-top:2px;
  font-size:.68rem;
  font-weight: 900;
  letter-spacing:.06em;
  opacity:.72;
  text-transform:none;
}

/* Lower panels styled like “board cards” */
.kb-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
@media (max-width: 980px){
  .kb-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 720px){
  .kb-topbar{ align-items:stretch; }
  .kb-toggle-wrap{ width:100%; justify-content:center; }
  .lb-toggle-group{ width:100%; justify-content:space-between; }
  .lb-toggle{ flex:1 1 0; text-align:center; }
  .kb-title-pill{ width:100%; justify-content:center; text-align:center; }

  .kbTable{ min-width: 560px; }
  .kb-col-bw{ width: 140px; }
  .kb-col-level{ width: 140px; }
  .kbTable thead th{ padding: 9px 8px; font-size:.68rem; }
  .kbTable tbody td{ padding: 10px 8px; font-size:.9rem; }
  .kb-icon{ width: 22px; height: 22px; }
  .kb-colhead-intermediate .kb-icon{ width: 26px; height: 26px; }
  .kb-colhead-advanced .kb-icon{ width: 30px; height: 30px; }
}

.kb-panel{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.06);
  border-radius: 20px;
  padding: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.kb-h3{
  margin:0 0 8px;
  font-size: 1.05rem;
  font-weight: 900;
}

/* Light mode alignment (similar spirit to leaderboards.css) */
@media (prefers-color-scheme: light) {
  .kbTable{
    --kb-row-even: #ffffff;
    --kb-row-odd: #f2f2f2;
  }
  .kbTable thead th{
    background: #f0f0f0;
    border-bottom: 1px solid rgba(0,0,0,.10);
  }
  .kbTable tbody td{
    border-bottom: 1px solid rgba(0,0,0,.10);
  }

  .kb-theme-men .kbTable thead th{
    background: #dbe8ff;
    border-bottom: 1px solid rgba(72,140,255,.22);
  }
  .kb-theme-men .kbTable{
    --kb-row-even: #f6f8ff;
    --kb-row-odd: #eaf1ff;
  }

  .kb-theme-women .kbTable thead th{
    background: #ffdbe8;
    border-bottom: 1px solid rgba(255,120,170,.22);
  }
  .kb-theme-women .kbTable{
    --kb-row-even: #fff6f9;
    --kb-row-odd: #ffeaf2;
  }
}