/* ============================================================
   STARGAMES — espace personnel / persoonlijke ruimte
   ============================================================ */

.account {
  display: grid;
  gap: 22px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 34px 16px 40px;
  align-items: start;
}

/* ---------- Navigation latérale ---------- */

.acctabs {
  padding: 18px;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: 6px;
}

.acctabs__hello {
  font-family: var(--f-display);
  font-size: 1.12rem;
  margin: 0 0 16px;
}

.acctabs__btn {
  display: block;
  width: 100%;
  padding: 11px 14px;
  margin-bottom: 4px;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--c-silver);
  font-family: var(--f-ui);
  font-size: .86rem;
  text-align: left;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.acctabs__btn:hover { color: var(--c-gold); }
.acctabs__btn--active {
  background: var(--c-panel-2);
  border-color: var(--c-line-gold);
  color: var(--c-gold);
}

/* ---------- Sections ---------- */

.accsection { display: none; }
.accsection--active { display: block; }

.accsection__title { font-size: 1.35rem; margin-bottom: 4px; }
.accsection__sub { color: var(--c-muted); font-size: .88rem; margin-bottom: 22px; }

/* ---------- Cartes de statistiques ---------- */

.statcards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}

.statcard {
  padding: 20px;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: 6px;
}
.statcard__label {
  display: block;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 8px;
}
.statcard__value {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--c-gold);
}
.statcard__value--plain { color: var(--c-text); }

/* ---------- Profil ---------- */

.profilelist {
  display: grid;
  gap: 0;
  margin: 0;
}
.profilelist div {
  display: grid;
  gap: 2px 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-line);
}
.profilelist dt {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.profilelist dd { margin: 0; color: var(--c-text); }

/* Tableaux : voir main.css (.tablewrap / .datatable) — composant partagé.
   Tabellen: zie main.css (.tablewrap / .datatable) — gedeelde component. */

.chip {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid;
  border-radius: 12px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}
.chip--won  { color: #7fd49b; border-color: #3DA35D; }
.chip--lost { color: #ff8f9d; border-color: var(--c-red); }
.chip--open { color: var(--c-gold); border-color: var(--c-gold); }
.chip--mut  { color: var(--c-muted); border-color: var(--c-muted); }

/* ---------- Limites ---------- */

.limitbox {
  padding: 20px;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  margin-bottom: 14px;
}
.limitbox__title { font-size: 1rem; margin-bottom: 6px; }
.limitbox__current { color: var(--c-silver); font-size: .9rem; }
.limitbox__current strong { color: var(--c-gold); }
.limitbox__pending { color: var(--c-muted); font-size: .8rem; }

.limitform {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.limitform input {
  flex: 1;
  min-width: 130px;
  padding: 10px 12px;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 4px;
  color: var(--c-text);
  font-size: .95rem;
}
.limitform input:focus { outline: none; border-color: var(--c-gold); }

.limithistory {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  font-size: .82rem;
  color: var(--c-muted);
}
.limithistory li { padding: 7px 0; border-top: 1px solid var(--c-line); }

/* ---------- Pause & exclusion ---------- */

.exclgrid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0;
}

.exclconfirm {
  padding: 16px 18px;
  border: 1px solid var(--c-red);
  border-radius: 6px;
  background: rgba(200, 16, 46, .08);
  margin-bottom: 14px;
}
.exclconfirm__text { font-size: .9rem; color: var(--c-text); }
.exclconfirm__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.btn--danger {
  background: transparent;
  border-color: var(--c-red);
  color: #ff8f9d;
}
.btn--danger:hover { background: rgba(200, 16, 46, .14); }

/* ---------- Breakpoints ---------- */

@media (min-width: 700px) {
  .statcards { grid-template-columns: repeat(3, 1fr); }
  .profilelist div { grid-template-columns: 220px 1fr; align-items: baseline; }
}

@media (min-width: 1024px) {
  .account { grid-template-columns: 260px minmax(0, 1fr); }
  .acctabs { position: sticky; top: calc(var(--header-h) + 16px); }
}

/* ---------- Onglets « Mes paris » ----------
   Classe dédiée : .chip est déjà pris deux fois (pilule de navigation dans
   betting.css, badge de statut ci-dessus). Ne pas réutiliser ce nom ici.

   Tabbladen "Mijn weddenschappen" — eigen klasse: .chip is hierboven en in
   betting.css al bezet. Die naam hier niet hergebruiken. */

.mbtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.mbtab {
  padding: 11px 16px;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: 20px;
  color: var(--c-silver);
  font-family: var(--f-ui);
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.mbtab:hover { border-color: var(--c-gold); color: var(--c-gold); }

.mbtab--active {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: #1A1A1A;
}
.mbtab--active:hover { background: var(--c-gold); color: #1A1A1A; }