/* =========================================================
   ML Manager XG — ruoli.css
   Badge RUOLO (POR/DEF/MID/ATT), micro-badge OVR e checkbox
   ========================================================= */

/* ---------- Role badge: base ---------- */
.role-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 24px;
  padding: 0 .55rem;
  margin-left:.35rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .3px;
  white-space: nowrap;
  line-height: 1;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #dbeafe; /* azzurrino tenue di default */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* ---------- Role badge: varianti (colori) ----------
   (stesse palette “belle” che avevi in precedenza) */
.r-gk{ /* Portiere */
  background: #ffb3471f;
  border-color: #ffb34766;
  color: #ffb347;
}
.r-def{ /* Difensore */
  background: #ff4fa21f;
  border-color: #ff4fa266;
  color: #ff4fa2;
}
.r-mid{ /* Centrocampista */
  background: #22c55e1f;
  border-color: #22c55e66;
  color: #86f3b0;
}
.r-att{ /* Attaccante */
  background: #3ba9ff1f;
  border-color: #3ba9ff66;
  color: #8fd0ff;
}



/* ---------- Checkbox “moderni” (usa class="chk") ---------- */
input.chk{
  appearance:none;
  -webkit-appearance:none;
  width:18px; height:18px;
  margin:0 .35rem 0 0;
  border:2px solid var(--line, #2a3948);
  border-radius:6px;
  background:transparent;
  position:relative;
  vertical-align:middle;
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
input.chk:hover{
  box-shadow:0 0 0 3px rgba(59,130,246,.18);
  border-color:#3b82f6;
}
input.chk:checked{
  background:#3b82f6;
  border-color:#3b82f6;
  box-shadow:0 0 0 3px rgba(59,130,246,.25);
}
input.chk:checked::after{
  content:'';
  position:absolute;
  left:4px; top:1px;
  width:6px; height:10px;
  border:2px solid #0b1d2b;
  border-top:0; border-left:0;
  transform:rotate(45deg);
}

/* Checkbox in stato disabilitato (se mai servisse) */
input.chk:disabled{
  opacity:.5; filter:saturate(.2);
  cursor:not-allowed;
}