/* =========================================================
   NinjaStats — comptes : bouton du menu, connexion, dashboard
   ========================================================= */

/* ---------------- menu compte ---------------- */
.nav__login{padding:8px 16px}
.acct{position:relative}
.acct__btn{
  display:flex; align-items:center; gap:9px; padding:5px 14px 5px 5px; border-radius:99px;
  background:rgba(255,255,255,.05); border:1px solid var(--line); font-size:13px; font-weight:600;
  transition:background .3s;
}
.acct__btn:hover{background:rgba(255,255,255,.09)}
.acct__dot{
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--grad); color:#08090d; font-size:12px; font-weight:800;
}
.acct__name{max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.acct__menu{
  position:absolute; right:0; top:calc(100% + 10px); min-width:200px; padding:6px;
  border-radius:var(--r-m); z-index:60; display:grid; gap:2px;
  background:rgba(14,16,24,.92);
}
.acct__menu[hidden]{display:none}
.acct__head{padding:10px 12px 12px; border-bottom:1px solid var(--line-2); margin-bottom:4px; display:grid; gap:2px}
.acct__head strong{font-size:14px}
.acct__role{font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--txt-3)}
.acct__item{
  display:block; width:100%; text-align:left; padding:9px 12px; border-radius:10px;
  font-size:13.5px; color:var(--txt-2); transition:background .2s,color .2s;
}
.acct__item:hover,.acct__item:focus-visible{background:rgba(255,255,255,.06); color:var(--txt); outline:none}
.acct__item--out{color:var(--bad)}

/* ---------------- pages compte ---------------- */
.page{max-width:var(--maxw); margin:0 auto; padding:110px var(--pad) 70px; position:relative; z-index:1}
.page--narrow{max-width:440px}
.page h1{font-size:clamp(28px,5vw,40px)}
.page__lead{color:var(--txt-2); margin-top:10px}
.page__head{margin-bottom:26px}

.form{display:grid; gap:14px}
.field{display:grid; gap:6px}
.field label{font-size:12px; font-weight:600; color:var(--txt-2); letter-spacing:.01em}
.field input,.field select{
  width:100%; padding:11px 14px; border-radius:var(--r-s); color:var(--txt);
  background:rgba(0,0,0,.28); border:1px solid var(--line); outline:none;
  transition:border-color .25s, box-shadow .25s;
}
.field select{appearance:none; cursor:pointer}
.field input:focus,.field select:focus{border-color:rgba(124,92,255,.7); box-shadow:0 0 0 3px rgba(124,92,255,.2)}
.field__hint{font-size:11.5px; color:var(--txt-3)}
.form .btn{justify-self:start; padding:11px 22px}
.form__err{font-size:13px; color:var(--bad); min-height:1.2em}
.form__err:empty{display:none}
.form__row{display:grid; grid-template-columns:1.2fr 1.2fr .8fr auto; gap:12px; align-items:end}

.dash{display:grid; gap:20px}
.dash__cols{display:grid; grid-template-columns:1fr 1fr; gap:20px}

.users{width:100%; border-collapse:collapse; font-size:13.5px}
.users th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--txt-3); font-weight:600; padding:0 10px 10px}
.users td{padding:12px 10px; border-top:1px solid var(--line-2); vertical-align:middle}
.users td.mono{color:var(--txt-2); font-size:12.5px}
.users__acts{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap}
.users__acts .btn{padding:6px 12px; font-size:12px}
.users select{
  padding:6px 10px; border-radius:99px; background:rgba(255,255,255,.05); border:1px solid var(--line);
  color:var(--txt); font-size:12.5px; cursor:pointer;
}
.btn--danger{background:rgba(251,113,133,.12); color:var(--bad); border:1px solid rgba(251,113,133,.3); box-shadow:none}
.btn--danger:hover{background:rgba(251,113,133,.2); box-shadow:none}
.tag{font-size:10.5px; padding:2px 8px; border-radius:99px; background:rgba(255,255,255,.07); color:var(--txt-3); margin-left:6px}
.table-wrap{overflow-x:auto}

@media (max-width:820px){
  .dash__cols{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
  .users th:nth-child(4),.users td:nth-child(4),
  .users th:nth-child(5),.users td:nth-child(5){display:none}
}
@media (max-width:560px){
  .acct__name{display:none}
  .acct__btn{padding:5px}
}

/* pages sans liens de section, et accueil en mobile (liens masqués) : compte calé à droite */
.nav--sub .nav__right{margin-left:auto}
@media(max-width:760px){ .nav__right{margin-left:auto} }
.users__acts--start{justify-content:flex-start; align-items:center}
.page code{font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.9em; padding:1px 6px; border-radius:6px; background:rgba(255,255,255,.06)}

/* ---------------- accès (tracker / silva) ---------------- */
.perms{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.perm{display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 8px; border-radius:99px; font-size:12px;
  background:rgba(255,255,255,.04); border:1px solid var(--line); cursor:pointer; user-select:none; white-space:nowrap}
.perm input{accent-color:var(--a1); margin:0; cursor:pointer}
.perm:has(input:checked){border-color:rgba(124,92,255,.55); background:rgba(124,92,255,.12)}
.perm:has(input:disabled){opacity:.6; cursor:default}
.perms--form{gap:10px}