/* ==========================================================================
   eMajor League — Pro Clubs Builder (native, themed to base_v2 / Sneat)
   Accent green: #09F25E  ·  Primary purple: #696cff  ·  Dark: #161616
   ========================================================================== */

.cb {
  --cb-accent: #09f25e;
  --cb-accent-d: #07c64d;
  --cb-primary: #696cff;
  --cb-dark: #161616;
  --cb-muted: #8592a3;
  --cb-border: #e4e6eb;
  --cb-track: #eceef1;
}

.cb .text-accent { color: var(--cb-accent) !important; }

/* ---- Buttons that should pick up the brand accent ---- */
.cb .btn-accent {
  color: #04240f;
  background-color: var(--cb-accent);
  border-color: var(--cb-accent);
}
.cb .btn-accent:hover { background-color: var(--cb-accent-d); border-color: var(--cb-accent-d); color: #04240f; }

/* ---- Sticky summary card ---- */
.cb-sticky { position: sticky; top: 84px; }

/* ---- Player head ---- */
.cb-player-head {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1.1rem;
}
.cb-player-meta { flex: 1 1 auto; min-width: 0; }
.cb-player-pos {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--cb-primary);
}
.cb-player-arch {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--bs-heading-color, #384551);
  line-height: 1.2;
}
.cb-arch-icon-lg {
  flex: 0 0 auto;
  width: 60px; height: 60px;
  object-fit: contain;
  padding: 8px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(9,242,94,.16), rgba(105,108,255,.16));
}

.cb-mini-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--cb-muted);
}

/* ---- Level + acceleration row ---- */
.cb-level-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1rem;
}
.cb-level-control { display: flex; flex-direction: column; gap: .3rem; }
.cb-level-input { width: 130px; }
.cb-level-input input { font-weight: 700; }

/* hide native number spinners (we use the -/+ buttons instead) */
.cb input[type="number"]::-webkit-outer-spin-button,
.cb input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cb input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.cb-accel { display: flex; flex-direction: column; gap: .3rem; align-items: flex-end; }
.cb-accel-badge {
  font-weight: 700;
  letter-spacing: .03em;
  background: rgba(105, 108, 255, .14);
  color: var(--cb-primary);
}
.cb-accel-badge.is-explosive { background: rgba(9, 242, 94, .16); color: var(--cb-accent-d); }
.cb-accel-badge.is-lengthy   { background: rgba(255, 171, 0, .16); color: #d98e00; }

/* ---- AP bar ---- */
.cb-ap-bar { height: 8px; border-radius: 6px; background: var(--cb-track); }
.cb-ap-bar .progress-bar {
  background: linear-gradient(90deg, var(--cb-accent), var(--cb-accent-d));
  transition: width .25s ease;
}
.cb-ap-bar.is-over .progress-bar { background: linear-gradient(90deg, #ff5b5b, #d63031); }

/* ---- Range sliders themed ---- */
.cb-range { accent-color: var(--cb-accent); }
.cb-body-row { margin-bottom: .85rem; }

/* ---- Equipped playstyles preview ---- */
.cb-equipped { display: flex; flex-wrap: wrap; gap: .4rem; }
.cb-equipped .cb-eq-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .55rem;
  border-radius: 8px;
  background: rgba(105, 108, 255, .1);
  font-size: .78rem;
  font-weight: 600;
}
.cb-equipped .cb-eq-chip img { width: 18px; height: 18px; object-fit: contain; }
.cb-equipped .cb-eq-chip.is-signature { background: rgba(9, 242, 94, .14); }

/* ---- Position tabs ---- */
.cb-pos-tabs .btn { font-weight: 700; }
.cb-pos-tabs .btn.active {
  background-color: var(--cb-dark);
  border-color: var(--cb-dark);
  color: #fff;
}

/* ---- Archetype grid ---- */
.cb-arch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: .75rem;
}
.cb-arch-card {
  border: 1.5px solid var(--cb-border);
  border-radius: 12px;
  padding: .85rem .5rem;
  text-align: center;
  cursor: pointer;
  background: var(--bs-card-bg, #fff);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cb-arch-card:hover { border-color: var(--cb-accent); transform: translateY(-2px); }
.cb-arch-card.is-active {
  border-color: var(--cb-accent);
  box-shadow: 0 0 0 3px rgba(9, 242, 94, .2);
}
.cb-arch-card img { width: 44px; height: 44px; object-fit: contain; margin-bottom: .4rem; }
.cb-arch-card .cb-arch-name { font-size: .82rem; font-weight: 700; line-height: 1.15; }

/* ---- Tabs ---- */
.cb-tabs .nav-link { font-weight: 600; }
.cb-tabs .nav-link.active { background-color: var(--cb-dark); color: #fff; }

/* ---- Attribute categories laid out in columns (clubsbuilder-style) ---- */
.cb-cats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}
@media (max-width: 991.98px) { .cb-cats-grid { grid-template-columns: 1fr; } }

.cb-cat { border: 1px solid var(--cb-border); border-radius: 12px; overflow: hidden; background: #fff; }
.cb-cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .65rem .9rem;
  cursor: pointer;
  background: var(--bs-light, #f7f7f9);
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.cb-cat-head .cb-cat-avg {
  font-size: .9rem; color: #04240f; font-weight: 800;
  background: rgba(9, 242, 94, .16);
  border-radius: 6px; padding: 0 .45rem; min-width: 30px; text-align: center;
}
.cb-cat-body { padding: .35rem .9rem .5rem; }
.cb-cat.is-collapsed .cb-cat-body { display: none; }
.cb-cat-chevron { transition: transform .2s; }
.cb-cat.is-collapsed .cb-cat-chevron { transform: rotate(-90deg); }

.cb-attr {
  display: grid;
  grid-template-columns: 120px 1fr 74px;
  align-items: center;
  gap: .6rem;
  padding: .32rem 0;
}
.cb-attr-name {
  font-size: .8rem; font-weight: 600;
  display: flex; align-items: center; gap: .25rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cb-attr-name .cb-key { color: var(--cb-accent); font-size: .9rem; line-height: 1; }
.cb-attr-cost { font-size: .64rem; color: var(--cb-primary); font-weight: 700; margin-left: auto; padding-left: .25rem; }
.cb-attr-val {
  font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; font-size: .9rem;
  display: flex; align-items: center; justify-content: flex-end; gap: .3rem;
}
.cb-attr-adj,
.cb-attr-fac {
  font-size: .66rem; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cb-attr-adj.is-pos { color: #16a34a; }
.cb-attr-adj.is-neg { color: #dc2626; }
.cb-attr-fac { color: var(--cb-primary); }   /* facilities boost (blue) */

/* slider styled as a filled value bar */
.cb-attr-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 9px;
  border-radius: 6px;
  outline: none;
  cursor: pointer;
  background: linear-gradient(to right,
    var(--cb-accent) var(--cb-fill, 0%),
    var(--cb-track) var(--cb-fill, 0%));
}
.cb-attr-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid var(--cb-accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35); cursor: pointer;
}
.cb-attr-range::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid var(--cb-accent); cursor: pointer;
}
.cb-attr-range::-moz-range-track { background: transparent; }

@media (max-width: 575.98px) {
  .cb-attr { grid-template-columns: 100px 1fr 30px; }
}

/* ---- PlayStyles grid ---- */
.cb-ps-section-title {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--cb-muted); margin: .9rem 0 .6rem;
}
.cb-slot-counter {
  font-weight: 700;
  color: var(--cb-accent-d);
}
.cb-slot-counter.is-full { color: #d63031; }
.cb-ps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: .6rem;
  margin-bottom: 1.4rem;
}
.cb-ps {
  position: relative;
  border: 1.5px solid var(--cb-border);
  border-radius: 12px;
  padding: .7rem .5rem;
  text-align: center;
  cursor: pointer;
  background: var(--bs-card-bg, #fff);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cb-ps:hover { transform: translateY(-2px); }
.cb-ps img { width: 38px; height: 38px; object-fit: contain; margin-bottom: .35rem; }
.cb-ps .cb-ps-name { font-size: .76rem; font-weight: 600; line-height: 1.1; }
.cb-ps.is-locked { opacity: .5; }
.cb-ps.is-available { border-color: var(--cb-primary); }
.cb-ps.is-equipped {
  border-color: var(--cb-accent);
  box-shadow: 0 0 0 3px rgba(9, 242, 94, .18);
}
.cb-ps.is-signature::after {
  content: "★";
  position: absolute;
  top: 4px;
  right: 7px;
  color: var(--cb-accent);
  font-size: .85rem;
}
.cb-ps-flag {
  display: inline-block;
  margin-top: .3rem;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.cb-ps.is-equipped  .cb-ps-flag { color: var(--cb-accent-d); }
.cb-ps.is-available .cb-ps-flag { color: var(--cb-primary); }
.cb-ps.is-locked    .cb-ps-flag { color: var(--cb-muted); }

/* ---- Playstyle modal requirements ---- */
.cb-ps-modal-icon { width: 34px; height: 34px; object-fit: contain; }
.cb-req {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .35rem .1rem;
  border-bottom: 1px dashed var(--cb-border);
  font-size: .86rem;
}
.cb-req:last-child { border-bottom: 0; }
.cb-req .cb-req-vals { font-weight: 700; font-variant-numeric: tabular-nums; }
.cb-req.is-met .cb-req-vals { color: var(--cb-accent-d); }
.cb-req.is-unmet .cb-req-vals { color: #d63031; }

/* ---- Equipped chip variants (specialization / facility) ---- */
.cb-eq-chip.is-spec    { border-color: #b07bff; box-shadow: 0 0 0 2px rgba(176,123,255,.16); }
.cb-eq-chip.is-facility{ border-color: var(--cb-primary); box-shadow: 0 0 0 2px rgba(105,108,255,.16); }

/* ==========================================================================
   Specializations
   ========================================================================== */
.cb-spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .9rem;
}
.cb-spec {
  border: 1.5px solid var(--cb-border);
  border-radius: 14px;
  padding: .85rem .9rem;
  cursor: pointer;
  background: var(--bs-card-bg, #fff);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cb-spec:hover { transform: translateY(-2px); }
.cb-spec.is-locked { opacity: .55; }
.cb-spec.is-available { border-color: #b07bff; }
.cb-spec.is-selected {
  border-color: #b07bff;
  box-shadow: 0 0 0 3px rgba(176, 123, 255, .22);
}
.cb-spec-head { display: flex; align-items: center; gap: .6rem; }
.cb-spec-head img { width: 38px; height: 38px; object-fit: contain; }
.cb-spec-titles { flex: 1 1 auto; min-width: 0; }
.cb-spec-name { font-weight: 700; line-height: 1.15; }
.cb-spec-ps { font-size: .76rem; color: var(--cb-primary); font-weight: 600; }
.cb-spec-flag {
  font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  padding: .15rem .4rem; border-radius: 6px; white-space: nowrap;
}
.cb-spec.is-selected  .cb-spec-flag { color: #fff; background: #b07bff; }
.cb-spec.is-available .cb-spec-flag { color: #8b46e0; background: rgba(176,123,255,.16); }
.cb-spec.is-locked    .cb-spec-flag { color: var(--cb-muted); background: var(--cb-track); }
.cb-spec-desc { font-size: .78rem; color: var(--cb-muted); margin: .55rem 0 .35rem; }
.cb-spec-reqs { border-top: 1px dashed var(--cb-border); padding-top: .35rem; }
.cb-spec-reqs .cb-req { font-size: .78rem; padding: .2rem .05rem; }

/* ==========================================================================
   Facilities
   ========================================================================== */
.cb-fac-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  align-items: end;
  margin-bottom: 1rem;
}
.cb-fac-clublevel { display: flex; flex-direction: column; gap: .3rem; }
.cb-fac-budget { min-width: 0; }
.cb-fac-toggle { display: inline-flex; }
.cb-fac-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .8rem;
  max-height: 560px;
  overflow-y: auto;
  padding-right: .25rem;
}
.cb-fac {
  border: 1.5px solid var(--cb-border);
  border-radius: 12px;
  padding: .7rem .8rem;
  background: var(--bs-card-bg, #fff);
}
.cb-fac.is-active {
  border-color: var(--cb-primary);
  box-shadow: 0 0 0 2px rgba(105, 108, 255, .14);
}
.cb-fac-top { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.cb-fac-name { font-weight: 700; font-size: .86rem; line-height: 1.1; }
.cb-fac-pos {
  font-size: .58rem; font-weight: 800; color: var(--cb-primary);
  background: rgba(105,108,255,.12); border-radius: 5px; padding: .05rem .3rem; vertical-align: middle;
}
.cb-fac-stars { display: flex; align-items: center; gap: .12rem; flex: 0 0 auto; }
.cb-fac-star {
  border: 0; background: transparent; cursor: pointer; line-height: 1;
  font-size: 1.05rem; color: var(--cb-track); padding: 0 .04rem;
}
.cb-fac-star.is-on { color: #f4b400; }
.cb-fac-clear {
  border: 0; background: transparent; cursor: pointer; color: var(--cb-muted);
  font-size: 1rem; margin-left: .15rem;
}
.cb-fac-clear:hover { color: #d63031; }
.cb-fac-attrs { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin-top: .45rem; }
.cb-fac-attr { font-size: .72rem; color: var(--cb-muted); }
.cb-fac-attr b { color: var(--cb-primary); }
.cb-fac-ps {
  display: flex; align-items: center; gap: .35rem;
  margin-top: .5rem; padding-top: .45rem;
  border-top: 1px dashed var(--cb-border);
  font-size: .76rem; font-weight: 600;
}
.cb-fac-ps img { width: 22px; height: 22px; object-fit: contain; }