/* ---------------------------------------------------------------------------
   Ruoli dettagliati (tassonomia fine 12 ruoli + lato). Badge riutilizzabile
   (componente x-role-badge) usato in scheda giocatore, listone, asta.
   Il ruolo è dato dal TESTO; il pallino di banda è solo un rinforzo cromatico
   (accessibilità: mai affidarsi al solo colore).
   --------------------------------------------------------------------------- */
.rolebadge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: var(--radius-sm);
  background: var(--color-surface-2, rgba(127, 127, 127, .12));
  border: 1px solid var(--color-border, transparent);
  /* Colore testo ESPLICITO: il badge resta leggibile anche dentro un link (es. righe
     cliccabili dell'admin), dove altrimenti erediterebbe il blu del link. */
  color: var(--color-text); text-decoration: none;
  font-size: var(--text-sm); line-height: 1.5; white-space: nowrap; vertical-align: middle;
}
.rolebadge__text { color: var(--color-text); }
/* Sfondo tintato per banda (leggero) + bordo: banda leggibile a colpo d'occhio, testo su
   tinta al 16% mantiene il contrasto del testo su superficie. */
.rolebadge--P { background: color-mix(in srgb, var(--role-por) 16%, var(--color-surface)); border-color: color-mix(in srgb, var(--role-por) 45%, transparent); }
.rolebadge--D { background: color-mix(in srgb, var(--role-dif) 16%, var(--color-surface)); border-color: color-mix(in srgb, var(--role-dif) 45%, transparent); }
.rolebadge--C { background: color-mix(in srgb, var(--role-cen) 16%, var(--color-surface)); border-color: color-mix(in srgb, var(--role-cen) 45%, transparent); }
.rolebadge--A { background: color-mix(in srgb, var(--role-att) 16%, var(--color-surface)); border-color: color-mix(in srgb, var(--role-att) 45%, transparent); }
.rolebadge__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.rolebadge__dot--P { background: var(--role-por); }
.rolebadge__dot--D { background: var(--role-dif); }
.rolebadge__dot--C { background: var(--role-cen); }
.rolebadge__dot--A { background: var(--role-att); }
.rolebadge__meta { opacity: .75; font-size: .85em; }
.rolebadge--lg { padding: 4px 10px; font-size: var(--text-base, 1rem); }

/* Principale (tier) = tinta piena per banda (regola sopra) + testo in grassetto: il ruolo
   "vero" del giocatore risalta. Secondario = riempimento NEUTRO (non colorato) + testo
   normale: la differenza è nel RIEMPIMENTO (pieno/colorato vs vuoto/grigio), non nella sola
   tonalità, quindi resta leggibile anche per chi non distingue bene i colori. Il pallino
   di banda (sopra) resta colorato in entrambi i casi, per riconoscere sempre il reparto. */
.rolebadge--primary .rolebadge__text { font-weight: var(--weight-bold, 700); }
.rolebadge--secondary {
  background: var(--color-surface-2);
  border-color: var(--color-border);
}
.rolebadge--secondary .rolebadge__text { font-weight: var(--weight-normal, 400); opacity: .85; }

/* Righe-link (es. ricerca admin): l'intera riga è un <a>. Senza questo erediterebbe il
   blu-link di default del browser su nome e badge. */
a.prow { color: var(--color-text); text-decoration: none; }
a.prow:hover { background: var(--color-surface-2); }

/* elenco compatto di TUTTI i ruoli di un giocatore (x-role-badges), righe liste/admin */
.rolebadges { display: inline-flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; align-items: center; }
/* variante inline: dentro la riga "squadra · ruoli" (listone/asta), non sul lato destro della prow */
.rolebadges--inline { justify-content: flex-start; vertical-align: middle; }

/* tier nella scheda giocatore (principale / anche impiegato come) */
.gcard-roles__tier {
  margin: var(--space-3) 0 var(--space-1); font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: .04em; opacity: .65;
}
.gcard-roles__tier:first-of-type { margin-top: var(--space-2); }

/* paginazione (x-pager) */
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-top: var(--space-4); flex-wrap: wrap; }
.pager__status { color: var(--color-text-muted); font-size: var(--text-sm); text-align: center; flex: 1 1 auto; }
.pager__total { opacity: .75; }
.pager [aria-disabled="true"] { opacity: .4; pointer-events: none; }

/* schermata admin override ruoli: righe slot (ruolo + livello) */
.admin-role-slot { display: flex; gap: var(--space-2); margin-bottom: var(--space-2); }
.admin-role-slot__field { display: flex; flex-direction: column; gap: 2px; flex: 1 1 60%; min-width: 0; }
.admin-role-slot__field--tier { flex: 1 1 40%; }
.admin-role-slot__lbl { font-size: var(--text-xs); opacity: .7; }
.admin-role-slot .select { width: 100%; }
@media (max-width: 480px) {
  .admin-role-slot { flex-direction: column; }
}